How to Dockerize Sveltekit Using Node Adapter

In this guide we will create a sample sveltekit application and dockerize it. We will confirm that it works using docker run and build a docker-compose for it.

To create a docker image for your application, you need a Dockerfile. A Dockerfile serves as a template for the image and includes all the steps needed to make the application available inside. The image is then used to create a Docker container. The container can then be run on any system, such as your server or even in a kubernetes cluster.

Creating a sample sveltekit application

In this guide we will create a sample sveltekit application using the standard SvelteKit example. We will then run it on the node-adapter to make it executable with node. For that, we will execute the following steps:

Create a sveltekit application:

npm create svelte@latest citizixapp

Select the SvelteKit demo app, Select Typescript then Select the utilities that you want.

Once done, switch to the directory and create a git repository:

cd citizixapp
git init

Then install the required packages:

npm install

Next, nstall the node adapter:

npm i -D @sveltejs/adapter-node

Open VS Code in the directory using this command:

code .

Then configure it in the svelte.config.js (replace adapter-auto with adapter-node in the import): import adapter from '@sveltejs/adapter-node';

Create a .dockerignore file and add node_modules inside

Launch the app using this command

npm run dev

Check the application in the browser under the provided URL

With that, we have a running node application and can build a Docker image for it. In the next step, we will create the Dockerfile.

Create a Dockerfile

Next we create a Dockerfile in the base of our project.

Docker images tend to be big when you use it for building the aplication. We will thus make this a two step process where we build the application in step one and then copy the needed files into the final image in step two.

The Dockerfile looks like this:

FROM node:lts-alpine as build
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:lts-alpine AS production
COPY --from=build /app/build .
COPY --from=build /app/package.json .
COPY --from=build /app/package-lock.json .
RUN npm ci --omit dev
EXPOSE 3000
CMD ["node", "."]

Build and check the image

To now create a docker image from the Dockerfile, we need to run the following command:

docker build . -t citizixapp:latest

This creates a Docker image called citizixapp with the latest tag and contains the sveltekit node application.

To confirm that the image exists:

$ docker images

REPOSITORY            TAG            IMAGE ID       CREATED              SIZE
citizixapp            latest         eebd50335515   About a minute ago   177MB

We can then check if everything works correctly by using the image to create a Docker container. For that, we run:

docker run -p 3000:3000 –name citizixapp citizixapp:latest

docker run --rm --name citizixapp \
    -p 3000:3000 \
    citizixapp:latest

This creates a container called citizixapp based on the citizixapp:latest image. In addition, it has a port mapping of port 3000 inside the container to port 3000 on the local machine.

A successful run should print out something like this:

Listening on 0.0.0.0:3000

That way, we can visit the application under: http://localhost:3000.

Another way to verify that the container is running is using docker ps in another terminal.

$ docker ps
CONTAINER ID   IMAGE                       COMMAND                  CREATED          STATUS          PORTS                                       NAMES
70d746009cd5   citizixapp:latest           "docker-entrypoint.s…"   5 minutes ago    Up 5 minutes    0.0.0.0:3000->3000/tcp, :::3000->3000/tcp   citizixapp

To clean up the container once it is no longer needed, use this commands:

$ docker stop citizixapp

citizixapp

Running the container with Docker Compose

You can take advantage of Docker Compose to run the application. Create a file named docker-compose.yaml and add the following content:

version: '3.9'

services:
  citizixapp:
    image: citizixapp:latest
    restart: always
    ports:
      - 3000:3000
    networks:
      - my_net

networks:
  my_net:

Start the container

docker-compose up -d

You should see an output similar to this

$ docker-compose up -d

[+] Running 2/2
 ✔ Network citizixapp_my_net          Created                                                                          0.1s
 ✔ Container citizixapp-citizixapp-1  Started                                                                          0.0s

Confirm that it is running

$ docker-compose ps

NAME                      IMAGE               COMMAND                         SERVICE      CREATED          STATUS          PORTS
citizixapp-citizixapp-1   citizixapp:latest   "docker-entrypoint.sh node ."   citizixapp   40 seconds ago   Up 40 seconds   0.0.0.0:3000->3000/tcp, :::3000->3000/tcp

Once no longer needed you can stop and remove the container:

➜ docker-compose stop

[+] Stopping 1/1
 ✔ Container citizixapp-citizixapp-1  Stopped                                                                         10.2s

$ docker-compose rm

? Going to remove citizixapp-citizixapp-1 Yes
[+] Removing 1/0
 ✔ Container citizixapp-citizixapp-1  Removed                                                                          0.0s

Conclusion

We successfully managed to create a Docker image for our SvelteKit node application! This will allow you to run it in any containerized environment like in a server with docker installed or in a kubernetes cluster.