How to put a Svelte app in a docker container?

Question

The title pretty much says it all. I am very new to web development.

I created a Svelte app using npx degit sveltejs/template .... Now I run it locally using npm run dev or npm start.

To my understanding, this is a Node server, but adapting their official tutorial didn't get me very far.

I found a blog post about this, but it doesn't quite explain how to dockerize an existing Svelte app, instead points to a fork of the official template.

Truett

Answer 1

You can place a Dockerfile in your app directory (where package.json is):

FROM node:14-alpine

WORKDIR /usr/src/app

COPY rollup.config.js ./
COPY package*.json ./

RUN npm install

COPY ./src ./src
COPY ./public ./public

RUN npm run-script build

EXPOSE 5000

ENV HOST=0.0.0.0

CMD [ "npm", "start" ]

Build a local image:

$ docker build -t svelte/myapp .

And run it:

$ docker run -p 5000:5000 svelte/myapp

Butlery

Apologies for only now getting around to try your suggested solution. Thanks! – Truett

Can you modify your answer adding the steps to execute a build every time? Otherwise one would have to build manually before each Docker build. This is the code I ended up using. ``` FROM node:14-alpine WORKDIR /usr/src/app COPY rollup.config.js ./ COPY package*.json ./ RUN npm install COPY ./src ./src COPY ./public ./public RUN npm run-script build EXPOSE 5000 ENV HOST=0.0.0.0 CMD [ "npm", "start" ] ``` – Truett

@Truett i am failing to get any page back all I get Is 404 error from the docker image i have deployed on my was what could be the cause of it ? – Vern

@ticofab, I have managed to get the app to work from my the docker image on was but I see that it's failing to create the build folder in the public folder I have tried to change the commands in the docker file but its an issue still – Vern

Has anyone managed to make this work with Watch enabled on Rollup? I've mounted the /src directory in as a Volume and verified that the files inside the container are updated, but the npm run dev Rollup process which has watch enabled, is not reacting to the changes to the file. – Nauseous

@GarethOates Are you using Windows as host by any chance? – Butlery

Yes I am. I'm guessing that's the problem? – Nauseous

My understanding is that Windows Hosts + Docker have problems with reloading/watching tasks like Rollup and Webpack. Could be completely FUD... Maybe make sure -you have the latest Docker version installed... – Butlery

@GarethOates my current workaround (on windows with docker toolbox) is to run rollup on the host and sirv in the docker container in parallel and mirroring the src/ and public dirs as docker volumes. (Alternatively, mirroring public/ to a basic webserver container should be a simpler workaround.) – Grammatical

There is documentation for that: svelte-recipes.netlify.app/publishing – Caraviello

I have seen cases where they deploy the svelte app behind nginx. I am not sure what is better production wise. – Fortify

Answer 2

Now SvelteJs and SvelteKit Uses ViteJs . For building a minimized SvelteJs/SvelteKit docker image you can use this dockerfile commands

Dockerfile

FROM node:19 as build

ENV NODE_ENV=production 


WORKDIR /app

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


FROM node:19-alpine3.16

WORKDIR /app
COPY --from=build /app .


ENV HOST=0.0.0.0
EXPOSE 4173
CMD ["npm","run", "preview","--", "--host", "0.0.0.0"]

Here , Vitejs preview serves in PORT 4173 that's why i used EXPOSE 4173 and --host 0.0.0.0 will expose the port outside the container . From my experience nodejs alpine image gives small and reliable Docker images.

Longsighted

Doesn't work. Show err: failed to load config from /app/vite.config.ts error during build: I'm using pnpm – Fascicule

Answer 3

I noticed the answers are quite outdated and not what i needed, Let me help abit.

The main problem i faced was in deploying a svelte/sveltekit app with docker using a dockerfile for production and optimized for production as well.

Using the Dockerfile provided above one would have to update it to look like this:

• for my instance i will make use of pnpm though, other package managers like yarn and npm can be used as well.
  

# bookworm images are more secure compared to alpine
FROM node:20.10-bookworm-slim as build

ENV NODE_ENV=production 

WORKDIR /app

COPY package.json ./
COPY pnpm-lock.yaml ./

# pnpm must be installed as it doesn't come with the default image
RUN npm i -g pnpm
RUN pnpm i
COPY . ./

RUN pnpm build

FROM node:20.10-bookworm-slim

WORKDIR /app
COPY --from=build /app .
# ENV HOST is not though you can uncomment if if needed
# ENV HOST=0.0.0.0
 EXPOSE 4173

CMD ["node","build"]

package.json{scripts}
this is the script section for the package.json

"scripts": {
  "dev": "vite dev",
  "build": "vite build",
  "preview": "vite preview",
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
  "test:unit": "vitest run",
  "test:ui": "vitest --ui",
  "test:integration": "playwright test",
  "coverage": "vitest run --coverage",
  "lint": "prettier --check . && eslint .",
  "format": "prettier  --write ."
},

Note: I would advice to only use npm run preview / pnpm preview only in local environment to ensure that the production version used will look the same, in Production after pnpm build only make use of node build which is optimized for production.

Jerrylee