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.
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
npm run dev Rollup process which has watch enabled, is not reacting to the changes to the file.
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:
pnpm though, other package managers like yarn and npm can be used as well.FROM node:jod-alpine 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
# Don't run production as root
FROM gcr.io/distroless/nodejs22-debian12:nonroot AS prod
WORKDIR /app
ENV NODE_ENV=production
COPY --from=installer /app/build ./build
COPY package.json .
EXPOSE 3000
CMD [ "build"]
# ENV HOST is not needed though you can uncomment it if needed
# ENV HOST=0.0.0.0
# EXPOSE 4173
# node is not needed as distroless:nonroot doesn't need node to be specified as user
CMD ["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.
Now SvelteJs and SvelteKit Uses ViteJs . For building a minimized SvelteJs/SvelteKit docker image you can use this dockerfile commands
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.
failed to load config from /app/vite.config.ts error during build: I'm using pnpm