Directus Starter Templates

This repo provides a collection of starter templates for building web applications with Directus integration.

Each template is designed to be:

• Reusable: Modular codebases that can be easily extended.
• Framework-Specific: Tailored implementations for popular frameworks like Next.js, Nuxt, SvelteKit, and Astro.
• Scalable: Suitable for small to medium projects and scalable to larger applications.

---

Available Templates

CMS

A full-featured CMS starter with pages, blog posts, dynamic forms, live preview, and visual editing.

Framework	Source	Deploy
Next.js	cms/nextjs
Nuxt	cms/nuxt
Astro	cms/astro	(Vercel only — see README to switch adapters)
SvelteKit	cms/sveltekit	(Vercel only — see README to switch adapters)

Adapter note: Astro and SvelteKit only support one deployment adapter at a time. Both starters default to Vercel. To deploy to Netlify or another provider, swap the adapter in the config before deploying — see each template's README for instructions.

→ View CMS templates

CMS with i18n

The same CMS starter with built-in internationalization: locale-based routing, Directus translation integration, and a language switcher.

Framework	Source	Deploy
Next.js	cms-i18n/nextjs
Nuxt	cms-i18n/nuxt

→ View CMS i18n templates

---

Required Environment Variables

Each framework requires your Directus URL, a server-side token, and a site URL. The token (DIRECTUS_SERVER_TOKEN) comes from your Webmaster account and is used server-side for content access, preview, and form submissions. See the individual template README for full setup details.

CMS — Next.js

NEXT_PUBLIC_DIRECTUS_URL=https://your-project.directus.app
NEXT_PUBLIC_SITE_URL=http://localhost:3000
DIRECTUS_SERVER_TOKEN=your-webmaster-token
NEXT_PUBLIC_ENABLE_VISUAL_EDITING=true

CMS — Nuxt

DIRECTUS_URL=https://your-project.directus.app
NUXT_PUBLIC_SITE_URL=http://localhost:3000
DIRECTUS_SERVER_TOKEN=your-webmaster-token
NUXT_PUBLIC_ENABLE_VISUAL_EDITING=true

CMS — Astro

PUBLIC_DIRECTUS_URL=https://your-project.directus.app
PUBLIC_SITE_URL=http://localhost:3000
DIRECTUS_SERVER_TOKEN=your-webmaster-token
PUBLIC_ENABLE_VISUAL_EDITING=true

CMS — SvelteKit

PUBLIC_DIRECTUS_URL=https://your-project.directus.app
PUBLIC_SITE_URL=http://localhost:3000
DIRECTUS_SERVER_TOKEN=your-webmaster-token
PUBLIC_ENABLE_VISUAL_EDITING=true

CMS i18n — Next.js

NEXT_PUBLIC_DIRECTUS_URL=https://your-project.directus.app
NEXT_PUBLIC_SITE_URL=http://localhost:3000
DIRECTUS_SERVER_TOKEN=your-webmaster-token
NEXT_PUBLIC_ENABLE_VISUAL_EDITING=true

CMS i18n — Nuxt

DIRECTUS_URL=https://your-project.directus.app
NUXT_PUBLIC_SITE_URL=http://localhost:3000
DIRECTUS_SERVER_TOKEN=your-webmaster-token
NUXT_PUBLIC_ENABLE_VISUAL_EDITING=true

Note: A DIRECTUS_ADMIN_TOKEN is also needed locally for type generation (pnpm run generate:types). This is the token from your Admin account and should never be used at runtime or committed to version control.

---

Getting Started

Using Directus with a Cloud Instance (Recommended)

1. Create a New Project:

2. Visit Directus Cloud and create a new project.

3. During setup, select the CMS template.
4. Once started, it will take around 90 seconds for the Cloud Project to be created.

5. You will receive an email with your project URL, email, and password for logging in.

6. Access Your New Project:

7. Log in to your project using the URL provided in your email or from the Directus Cloud Dashboard.

8. Create accounts and generate tokens:

9. Go to the Users Directory and create a Webmaster user account.

10. Scroll down to the Token field, generate a static token, and save it — this is your DIRECTUS_SERVER_TOKEN.
11. For local type generation, you can also generate a token on the Admin user — this is your DIRECTUS_ADMIN_TOKEN (never exposed at runtime).

12. Do not forget to save the user, or you will encounter an "Invalid token" error.

13. Connect to a Frontend Template:

Use one of the one-click deploy buttons above, or clone the source and follow the setup instructions in the template's README.

---

Deploying Directus on Railway

Prefer to self-host? You can deploy Directus with the CMS schema pre-loaded directly to Railway.

This sets up a hosted Directus instance with the CMS template already applied. Once deployed:

1. Open your Railway project and grab the public URL for your Directus service — this is your DIRECTUS_URL.
2. Log in to Directus, go to the Users Directory, and create a Webmaster user.
3. Generate a static token for that user — this is your DIRECTUS_SERVER_TOKEN.
4. Choose a frontend starter from the table above and follow the setup instructions in its README.

---

Using Directus Locally

Local Development with CLI

Prefer to run everything locally? You can use Docker and our CLI tool to scaffold and launch a full Directus + frontend setup.

1. Install Docker

Download and install Docker: https://www.docker.com/products/docker-desktop

2. Scaffold Your Project

Open your terminal and run:

npx directus-template-cli@latest init

Follow the prompts to:

• Choose a project name
• Select a backend template
• Select a frontend framework
• Decide whether to install dependencies automatically

This sets up a local project with Docker-based Directus + frontend integration.

3. Complete Directus setup and generate tokens

• This will start Directus on http://localhost:8055
• On first launch, you'll be prompted to complete the admin setup
• After setup, create a Webmaster user and generate a static token for DIRECTUS_SERVER_TOKEN
• Optionally generate a token on the Admin user for DIRECTUS_ADMIN_TOKEN (type generation only)

---

Troubleshooting

Preview Not Working - Content Security Policy (CSP) Issues

If you encounter CSP errors when using the Visual Editor preview, this is typically due to Content Security Policy restrictions.

For Local Docker Setup: See cms/directus/README.md for configuration details.

For Directus Cloud: You'll need to expose your localhost with HTTPS using a tunneling service (ngrok, localtunnel, etc.).

For complete documentation on configuring CSP for the Visual Editor, see the official Directus documentation.

---

Contributing

Have a bug report, feature request, or question? Please open an issue rather than submitting a pull request directly.

Repo Structure

├── cms/                  # CMS starter templates (Next.js, Nuxt, Astro, SvelteKit)
├── cms-i18n/             # CMS starter templates with i18n support (Next.js, Nuxt)
├── blank/                # Blank starter template
├── _shared/              # Shared files (docker-compose, .env.example)
├── _scripts/             # Internal build/validation scripts
└── .github/              # CI workflows

Directories prefixed with _ or . are internal and excluded from the template CLI.

Validation

Run node _scripts/validate-templates.js to check all templates have the required structure and metadata.