Resources

Install Node.js

Install Docker

Install create-svelte: - Run npm install create-svelte-app -g

What is SvelteKit?

SvelteKit is a tool that lets developers use the Svelte framework to quickly build and deliver websites. With Docker, nginx, and SvelteKit, you can create a base image to use as a starting point for your new Svelte projects. Svelte allows developers to create modular components and load them into any part of their website easily and handles routing so developers can focus on creating pages, knowing that they’ll just work. It is a relatively new framework, but its ease of use and popularity in the development world makes it a valuable tool.

Setup and Installation

Create a new directory for your project and navigate to it.

$ mkdir kind-spock; cd kind-spock

Use create-svelte to create a directory with your svelte application.

$ npm create svelte@latest svelte

The UI at the time of this article’s creation will prompt you for the following configuration choices:

  • ? Which Svelte app template?
    • For our purposes, let’s choose Skeleton project.
  • ? Add type checking with TypeScript?
    • Type checking makes the syntax more strict, but also makes code easier to maintain and read. We will select Yes, using TypeScript syntax.
  • ? Add ESLint for code linting?
    • ESLint will help identify coding issues in our JavaScript framework. It’s optional, but I recommend it.
  • ? Add Prettier for code formatting?
    • If you’re using Prettier in your IDE and want this project to include it, select Yes.
  • ? Add Playwright for browser testing?
    • Playwright is a web browser testing toolkit that allows you to write automated testing features. The tool can then crawl through your website and test these features. This feature is excellent, and critical for production environments, but we will select No for this tutorial.
  • ? Add Vitest for unit testing?
    • Vitest is a unittesting framework for our application. Similarly, this is a robust toolkit and I highly recommend writing unittests for your code, but we will select No for this tutorial.

Configuration and Routing

After the installation, navigate into the application directory and run this command to install the adapter-static plugin and our node packages.

$ cd svelte
$ npm install --save-dev @sveltejs/adapter-static

Open the svelte/svelte.config.js file and replace adapter-auto with adapter-static in the first line.

import adapter from '@sveltejs/adapter-static';

Create a file named +layout.js in the svelte/src/routes directory and export the constant prerender with a value of true. This prerenders the entire website as a collection of static files, which Nginx eventually serve.

src/routes/+layout.js

export const prerender = true;

By default, the new SvelteKit application will serve src/routes/+page.svelte as its home page. Let’s change the contents to the following:

src/routes/+page.svelte

<h1>Dockerized SvelteKit</h1>
<p>Hello, World!</p>
<a href="/about">About</a>

SvelteKit uses the directory structure in src/routes to automatically route users. To create new routes, like the /about route we referenced in the home page, create a new directory with the name of the route.

$ mkdir svelte/src/routes/about

Then, create a file named +page.svelte in the new directory. This tells SvelteKit to what to serve. Here is an example.

src/routes/about/+page.svelte

<h1>About This Project</h1>
<p>This project is a containerized SvelteKit application running in Docker.</p>
<a href="/">Home</a>

Deployment

Now we will build the project’s static files.

$ npm run build

By default this creates a collection of static files in the /build directory, which will be in the svelte directory that you specified when we created the project. The success message should read as follows.

> Using @sveltejs/adapter-static
  Wrote site to "build"
  ✔ done

Next, we will set up Docker. Navigate to the root directory of your project, just above the root directory of the SvelteKit project, and create a file named Dockerfile.

$ cd ..; touch Dockerfile

Populate the Dockerfile with this example:

FROM node:alpine AS build

WORKDIR /app

COPY svelte .
RUN npm install
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html

This Dockerfile tells Docker to do the following:

  1. Create a container from node:alpine called build
  2. Set the working directory to /app
  3. Copy the svelte directory into the container’s /app directory
  4. Install node packages
  5. Build the static file collection into the /app/build directory
  6. Create a second container from nginx:alpine
  7. Copy the contents of the build container’s /app/build directory to the /usr/share/nginx/html directory of the new container

Note: The build container will be discarded by Docker after it’s used to create and copy the SvelteKit project to the Nginx default html directory /usr/share/nginx/html. We do not have to worry about it.

Once the Dockerfile is created, you can build the image and tag it as sveltekit-docker with the following command:

$ docker build -t sveltekit-docker .

Finally, run the container and navigate to http://localhost:80/

$ docker run -it --rm -p 80:80 sveltekit-docker

Now navigate to localhost You should see your home page and Hello, World! string.

Dockerized SvelteKit and PocketBase