IMDA Directus PoCs

This workspace contains proofs-of-concept that explore Directus as a headless backend, all sharing a single self-hosted Directus instance.

Project	Description
CMS Webpage PoC	A React + TypeScript + Vite + Tailwind storefront ("Luminate") whose content is managed in Directus.
Directus POC	A minimal React + Vite app demonstrating Directus realtime (WebSocket) messaging.
IMDA Tender POC	A React + Vite + Tailwind recreation of the IMDA site where content managers self-serve theming, page composition, and design language from Directus.

Start with the shared Directus setup below, then follow the README in each project folder.

---

Start the Directus server (Docker)

Both apps connect to a Directus instance at http://localhost:8055. Because the apps run on the Vite dev origin (http://localhost:5173), CORS must be enabled; the realtime PoC also needs WebSockets enabled.

Already running? Check with docker ps for a container publishing 0.0.0.0:8055->8055/tcp.

docker run -d --name directus \
  -p 8055:8055 \
  -v directus-database:/directus/database \
  -v directus-uploads:/directus/uploads \
  -e KEY="poc-key-0123456789" \
  -e SECRET="poc-secret-0123456789" \
  -e ADMIN_EMAIL="admin@example.com" \
  -e ADMIN_PASSWORD="password" \
  -e WEBSOCKETS_ENABLED="true" \
  -e CORS_ENABLED="true" \
  -e CORS_ORIGIN="true" \
  directus/directus

Once it boots, the Admin App is at http://localhost:8055/admin — log in with the ADMIN_EMAIL / ADMIN_PASSWORD above (admin@example.com / password).

Why the admin/key/volume env vars? Without ADMIN_EMAIL + ADMIN_PASSWORD, the image boots with no admin account — you can't log in or get a token, and re-running directus bootstrap won't fix it (admin is only created on first install). KEY/SECRET make access tokens persist across restarts. The two named volumes persist the SQLite database (/directus/database) and uploaded files (/directus/uploads), so your data survives docker rm / recreation. (To start completely fresh, also remove the volumes: docker volume rm directus-database directus-uploads.)

Key environment variables:

Variable	Purpose
ADMIN_EMAIL / ADMIN_PASSWORD	First admin account (login + bootstrap). Required to use the instance.
KEY / SECRET	Cryptographic secrets; set them so tokens persist across restarts.
CORS_ENABLED=true	Allows the browser app to call the API from another origin.
CORS_ORIGIN	The Vite dev origin (http://localhost:5173). Use true to allow all.
WEBSOCKETS_ENABLED	Enables realtime.

The provisioning scripts (npm run setup:directus) log in with these admin credentials by default, so you don't need to create a static token for them.

Environment variable reference

• CORS — https://directus.com/docs/configuration/security-limits#cors
• Realtime — https://directus.com/docs/configuration/realtime
• Docker config — https://directus.com/docs/configuration/general