This guide describes the steps necessary to get Directus and SvelteKit app deployed to your own server. I'm describing steps based on `app.amateurinmotion.com` domain and `Demo` application. Replace those with your domain and application name. References: * https://dokploy.com/ * https://directus.io/ * https://svelte.dev/ See https://docs.dokploy.com/docs/core/installation for a referrial link for Hetzner to get 20€ off. ## DNS Add `A` records pointing to your server's IP: * `app.amateurinmotion.com` * `*.app.amateurinmotion.com` ## Random Later we'll need random strings. On your local machine add the following alias to your `~/.zshrc`: ``` zsh alias rand="openssl rand -base64" ``` Open new Terminal (or `source ~/.zshrc`) to test it out: ``` air:~ $ rand 32 T/kCF2Q7FIZLcZc8UE/Sc0soh+U5qsaLDVpTCpfAli4= ``` ## Install Dokploy As root on your server run Dokploy installer: ``` bash curl -sSL https://dokploy.com/install.sh | sh ``` This will install docker, docker compose, dokplay. When it's done, open a `http://:3000` URL provided by the installer. Sign up. ## Dokploy SSL In Dokploy open: * Web Server > Server domain * Domain: `app.amateurinmotion.com` * Let's Encrypt Email: `ampatspell@gmail.com` * Enable HTTPS * Certificate provider: `Let's Encrypt` * Save Open `https://app.amateurinmotion.com`, sign in with the same credentials. Maybe change your password – previous one was set in non-SSL connection. Open: * Requests * Activate logging Then open: * Web server * Click on Traefik * Reload ## Dokploy GitHub Provider Open: * Git * Create your first provider * Follow GitHub instructions * When you're redirected back to Dokploy, click on that tiny icon right after "Action required" * Again follow GitHub instructions ## Project Open: * Projects * Create new project (Demo) ## Directus Click on: * Create Service * Compose * Name: `Directus` * Compose type: `Docker Compose` Open `Directus` service: * Advanced * Scroll down * Enable Isolated Deployment: `Yes` * Save Go Back to General: * Select `Raw` provider Paste the following `docker-compose.yaml` and Save: ``` yaml services: directus: image: 'directus/directus:11' volumes: - 'database:/directus/database' - 'uploads:/directus/uploads' environment: - PUBLIC_URL=${PUBLIC_URL} - KEY=${KEY} - SECRET=${SECRET} - ADMIN_EMAIL=${ADMIN_EMAIL} - ADMIN_PASSWORD=${ADMIN_PASSWORD} - DB_CLIENT=sqlite3 - DB_FILENAME=/directus/database/data.db - WEBSOCKETS_ENABLED=true - ASSETS_TRANSFORM_IMAGE_MAX_DIMENSION=10000 - MARKETPLACE_TRUST=${MARKETPLACE_TRUST} - CORS_ENABLED=true - CORS_METHODS=GET,POST,PATCH,DELETE,OPTIONS - CORS_ORIGIN=${CORS_ORIGIN} restart: always healthcheck: test: - CMD - wget - '-q' - '--spider' - 'http://127.0.0.1:8055/admin/login' interval: 5s timeout: 20s retries: 10 volumes: uploads: database: ``` Open Environment, paste the following: ``` PUBLIC_URL=https://demo-directus.app.amateurinmotion.com CORS_ORIGIN=https://demo.app.amateurinmotion.com,http://localhost:5173 KEY= SECRET= ADMIN_EMAIL=ampatspell@gmail.com ADMIN_PASSWORD= MARKETPLACE_TRUST=sandbox ``` `MARKETPLACE_TRUST` can be either `sandbox` or `all`. Save. Generate three random strings (with `rand` command) and replace ``, `` and `` with them. Save. Go back to General and click Deploy. Wait for the green light. Go to Domains and add new: * Service name: `Directus` * Host: `demo-directus.app.amateurinmotion.com` * Path: `/` * Internal path: `/` * Container Port: `8055` * HTTPS: `On` * Provider: `Let's Encrypt` * Create Click on the link, wait for Let's Encrypt. Sign in with `ADMIN_EMAIL` and `ADMIN_PASSWORD` from environment variables above. ## SvelteKit ``` sh nvm use 24 npx sv@latest create ``` * SvelteKit Minimal * Typescript * prettier * eslint * sveltekit-adapter - node * devtools-json ## Docker Add a `Dockerfile` ``` docker FROM node:24-alpine AS builder WORKDIR /app RUN apk update RUN apk add --no-cache coreutils ARG GITHUB_TOKEN COPY package*.json . COPY .npmrc . RUN npm ci COPY . . ARG PRIVATE_DIRECTUS_ADMIN_TOKEN ARG PUBLIC_DIRECTUS_URL ARG PUBLIC_DIRECTUS_TOKEN # RUN npm exec tools generate RUN npm run build RUN npm prune --production FROM node:24-alpine WORKDIR /app RUN apk --no-cache add curl COPY --from=builder /app/build build/ COPY --from=builder /app/node_modules node_modules/ COPY package.json . EXPOSE 3000 ARG PRIVATE_DIRECTUS_ADMIN_TOKEN ARG PUBLIC_DIRECTUS_URL ARG PUBLIC_DIRECTUS_TOKEN ENV NODE_ENV=production CMD [ "node", "build" ] HEALTHCHECK \ --interval=1m \ --timeout=10s \ --start-period=5s \ --retries=10 \ CMD curl -f http://localhost:3000 || exit 1 ``` Add `.dockerignore` ``` Dockerfile .dockerignore .git .gitignore .gitattributes README.md .prettierrc .eslintrc.cjs .graphqlrc .editorconfig .svelte-kit .vscode node_modules build package **/.env ``` ## GitHub Publish to GitHub as `https://github.com/ampatspell/demo` ## Deploy Open Demo project in Dokploy: * Create service: `Application` * Name: `Frontend` * Create Open Frontend app: * Select GitHub account * Repository: `demo` * Branch: `main` * Build path: `/` * Trigger type: `On Push` * Save Build type: * `Dockerfile` * Docker File: `Dockerfile` * Docker Context Path: `.` * Leave build stage empty * Save Deploy. ## Domain Open Domains: * Add domain * Host: `demo.app.amateurinmotion.com` * Path: `/` * Internal Path: `/` * Container port: `3000` * HTTPS: `On` * Certificate provider: `Let's Encrypt` * Create Open domain, wait for Let's Encrypt. ## Directus Data Model Open Directus at `https://demo-directus.app.amateurinmotion.com` In Admin > Data Model: * Create new collection * Name: `hello` * Threat as single object * In the next step optional fiels leave as is * Create In the newly created data model: * Create field * Input * Set key: `message` * Save In Content > Hello: * Type in the message: `To whom it may concern it is springtime it is late afternoon.` * Save ## Directus role Open Users: * Add User * First Name: `Frontend` * Scroll down to Policies * Create new * Name: `Frontend` * Add Collection: `hello` * Read: `All access` * Save * Generate a token (this will be `PUBLIC_DIRECTUS_TOKEN`, save it somewhere) * Save Open Admin User: * Generate a new token for admin (`PRIVATE_ADMIN_TOKEN`, also save it somewhere) * Save ## GitHub token Open GitHub * Settings > Developer settings * Personal access tokens * Tokens (classic) * Generate new token (classic) * Note: `app.amateurinmotion read:packages for npm install` * Expiration: `Set it to more than 7 days.` * Check: `read:packages` * Generate token * Save it somewhere **Expiration**: This token will be used every time you re-deploy your app. Open `~/.zshrc` and export your token: ``` export GITHUB_TOKEN="ghp_*****" ``` ## Directus SDK and tools In SvelteKit demo app: Add a `.npmrc` ``` //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN} @ampatspell:registry=https://npm.pkg.github.com engine-strict=true ``` Add `.env` ``` yaml PUBLIC_DIRECTUS_URL=https://demo-directus.app.amateurinmotion.com PUBLIC_DIRECTUS_TOKEN= PRIVATE_DIRECTUS_ADMIN_TOKEN= ``` and ``` sh npm install \ @ampatspell/base \ @ampatspell/directus ``` Add `generate` and `tools` scripts to `package.json`: ``` diff "scripts": { … + "tools": "tools", + "generate": "tools generate" }, ``` Generate types: ``` sh npm run generate ``` Add `src/lib/directys/directus.ts` file: ``` ts import { type Schema } from './schema'; import { getBaseDirectus, type Fetch } from '@ampatspell/directus/directus'; export const getDirectus = (fetch: Fetch) => getBaseDirectus(fetch); export type Directus = ReturnType; ``` Add the following files to `.gitignore`: * `/src/lib/directus/schema.ts` * `/src/lib/directus/diff.json` In `src/routes` add: ``` ts // +layout.server.ts import type { LayoutServerLoad } from './$types'; export const load: LayoutServerLoad = async (event) => { const visualEditingEnabled = event.url.searchParams.get('visual-editing') === 'true'; return { visualEditingEnabled, }; }; ```` ``` ts // +page.server.ts import { getDirectus } from '$lib/directus/directus'; import { CollectionNames } from '$lib/directus/schema'; import { readSingleton } from '@directus/sdk'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ fetch }) => { const directus = getDirectus(fetch); return { hello: await directus.request(readSingleton(CollectionNames.hello, {})) }; }; ``` ``` ts // +page.svelte

{hello.message}

``` Uncomment `npm run generate` in `Dockerfile` `builder` layer: ``` diff FROM node:24-alpine AS builder WORKDIR /app COPY package*.json . RUN npm ci COPY . . ARG PRIVATE_DIRECTUS_ADMIN_TOKEN ARG PUBLIC_DIRECTUS_URL ARG PUBLIC_DIRECTUS_TOKEN - # RUN npm exec tools generate + RUN npm exec tools generate RUN npm run build RUN npm prune --production … ``` # Dokploy Open Dokploy: * Open `Demo` project * Open `Frontend` application * Add the same `.env` variables to Environment Settings and Build-time Variables * Add `GITHUB_TOKEN` to Build-time variables Environment settings: ``` PUBLIC_DIRECTUS_URL=https://demo-directus.app.amateurinmotion.com PUBLIC_DIRECTUS_TOKEN= PRIVATE_DIRECTUS_ADMIN_TOKEN= ``` Build-time Variables: ``` PUBLIC_DIRECTUS_URL=https://demo-directus.app.amateurinmotion.com PUBLIC_DIRECTUS_TOKEN= PRIVATE_DIRECTUS_ADMIN_TOKEN= GITHUB_TOKEN= ``` Back to the app locally, git commit, push. Wait a bit. Open `https://demo.app.amateurinmotion.com/` Done.