10

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.

ticofab
  • 7,551
  • 13
  • 49
  • 90

2 Answers2

14

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
ticofab
  • 7,551
  • 13
  • 49
  • 90
madflow
  • 7,718
  • 3
  • 39
  • 54
  • Apologies for only now getting around to try your suggested solution. Thanks! – ticofab Aug 15 '20 at 09:32
  • 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" ] ``` – ticofab Aug 21 '20 at 13:58
  • @ticofab 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 ? – kinsley kajiva Aug 24 '20 at 17:57
  • @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 – kinsley kajiva Aug 25 '20 at 05:41
  • 1
    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. – Gareth Oates Feb 02 '21 at 15:11
  • @GarethOates Are you using Windows as host by any chance? – madflow Feb 02 '21 at 15:19
  • Yes I am. I'm guessing that's the problem? – Gareth Oates Feb 03 '21 at 15:42
  • 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... – madflow Feb 03 '21 at 16:00
  • 1
    @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.) – alex.rind Mar 15 '21 at 09:51
  • There is documentation for that: https://svelte-recipes.netlify.app/publishing – Pedro Luz Sep 25 '21 at 10:57
  • I have seen cases where they deploy the svelte app behind nginx. I am not sure what is better production wise. – Yassine Nacif Aug 23 '23 at 19:26
0

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.

sk shahriar ahmed raka
  • 815
  • 1
  • 10
  • 29
  • Doesn't work. Show err: ```failed to load config from /app/vite.config.ts error during build:``` I'm using pnpm – ramory-l May 21 '23 at 13:37