CODEWITHSUNDEEP
node.jsdockersvelte
ticofab
ticofab

Reputation: 7717

How to put a Svelte app in a docker container?

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.

Upvotes: 11

Views: 21434

Answers (3)

Monarch
Monarch

Reputation: 11

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.

Upvotes: 1

sk shahriar ahmed raka
sk shahriar ahmed raka

Reputation: 1179

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.

Upvotes: 1

madflow
madflow

Reputation: 8510

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

Upvotes: 16

Related Questions