How to Dockerize SvelteKit

This guide shows you how to containerize your SvelteKit application for simplified deployment and management. Remember: this is for SvelteKit, not Svelte!

Setting Up

If you lack a SvelteKit project, create one:

<code class="language-bash">npx sv create my-svelte-app --template demo --types ts</code>

Next, configure SvelteKit to use the adapter-node for Node.js compatibility, essential for containerization. Install it:

<code class="language-bash">npm i -D @sveltejs/adapter-node</code>

Modify svelte.config.js:

<code class="language-javascript">// svelte.config.js
- import adapter from '@sveltejs/adapter-auto';
+ import adapter from '@sveltejs/adapter-node';</code>

Now, create your Dockerfile. This instructs Docker on building and running your application:

<code class="language-dockerfile"># Builder stage
FROM node:22-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
RUN npm prune --production

# Final stage
FROM node:22-alpine
WORKDIR /app
COPY --from=builder /app/build build/
COPY --from=builder /app/node_modules node_modules/
COPY package.json .
EXPOSE 3000
ENV NODE_ENV=production
CMD [ "node", "build" ]</code>

This Dockerfile uses a multi-stage build. The builder stage compiles your app, and the final stage creates a leaner runtime image.

To streamline the build process, create a .dockerignore file:

<code>Dockerfile
.dockerignore
.git
.gitignore
.gitattributes
README.md
.npmrc
.prettierrc
.eslintrc.cjs
.graphqlrc
.editorconfig
.svelte-kit
.vscode
node_modules
build
package
**/.env</code>

Generally, install all dependencies as devDependencies (using npm i -D <package>). This lets SvelteKit bundle them, removing unused imports. However, if you encounter issues like __dirname undefined during the build, install the package as a regular dependency. If all dependencies are devDependencies, you can omit copying node_modules in the final Docker stage, further minimizing image size.

Build your Docker image:

<code class="language-bash">docker build -t my-sveltekit-app .</code>

Run the containerized app:

<code class="language-bash">docker run -p 3000:3000 my-sveltekit-app</code>

Access your app at http://localhost:3000.

Environment Variables

SvelteKit offers four ways to manage environment variables: $env/dynamic/private, $env/dynamic/public, $env/static/private, and $env/static/public. Remember that different deployment platforms handle these differently; consult their documentation.

For form actions and server-side features, correctly set the ORIGIN environment variable to prevent cross-site POST errors:

<code class="language-bash">docker run -p 3000:3000 -e ORIGIN=http://localhost:3000 my-sveltekit-app</code>

Replace http://localhost:3000 with your production domain.

Production Optimization

1. Health Checks: Add a /health endpoint and use Docker's HEALTHCHECK instruction:

<code class="language-dockerfile">HEALTHCHECK --interval=30s --timeout=3s \
  CMD wget --no-verbose --tries=1 --spider http://localhost:3000/health || exit 1</code>

2. Memory Limits: Set Node.js memory limits:

<code class="language-bash">docker run -p 3000:3000 -e NODE_OPTIONS="--max-old-space-size=512" my-sveltekit-app</code>

3. Security Scanning: Regularly scan for vulnerabilities:

<code class="language-bash">docker scout quickview</code>

Conclusion

You've now containerized your SvelteKit application. For deployment, consider sliplane.io.

The above is the detailed content of How to Dockerize SvelteKit. For more information, please follow other related articles on the PHP Chinese website!