Dockerize a Svelte App

Let’s pull down the basic svelte template using degit.

npx degit sveltejs/template svelte-docker
cd svelte-docker

Run npm install to generate the package-lock.json file.

Building

Next, we need to create a file named Dockerfile in the root of our project, and paste in the following:

FROM node:12 AS build

WORKDIR /app

COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . ./
RUN npm run build

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

This tells Docker to build the Svelte App using an intermediate Node image and then copies only the build output to the final NGINX image, as we only need something that serves static content. That way, Node doesn’t contribute to the final size of the Docker image.

To ensure we are not copying unnecessary files and folders in the build process (the COPY . ./ step), we can add the following to a file named .dockerignore:

node_modules

You can now build your docker image:

docker build . -t svelte-docker

Running

And to run your image:

docker run --rm --name=svelte-docker -p 5000:80 svelte-docker

Open up your browser at http://localhost:5000 and your dockerized Svelte App should now be up and running!