Docker deployment in Svelte - Step-by-Step Execution

Concept Flow - Docker deployment

Write Svelte app code

↓

Create Dockerfile

↓

Build Docker image

↓

Run Docker container

↓

Access app in browser

↓

App runs inside container

This flow shows how you write your Svelte app, create a Dockerfile, build an image, run a container, and then access the app running inside Docker.

Execution Sample

Svelte

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "run", "preview", "--", "--host"]

This Dockerfile sets up a Node environment, installs dependencies, builds the Svelte app, and starts the preview server exposed on all interfaces.

Execution Table

Step	Action	Details	Result
1	Read Dockerfile	FROM node:18-alpine	Base image set to Node 18 Alpine
2	Set working directory	WORKDIR /app	Working directory inside container is /app
3	Copy package files	COPY package*.json ./	package.json and package-lock.json copied
4	Install dependencies	RUN npm install	Node modules installed
5	Copy app files	COPY . .	All app files copied into container
6	Build app	RUN npm run build	Svelte app built into /build folder
7	Set start command	CMD ["npm", "run", "preview", "--", "--host"]	Container will run preview server exposed on all interfaces on start
8	Build image	docker build -t svelte-app .	Docker image 'svelte-app' created
9	Run container	docker run -p 5173:5173 svelte-app	Container runs, app accessible at localhost:5173
10	Access app	Open browser at localhost:5173	Svelte app loads from Docker container

💡 Execution stops after container runs and app is accessible in browser.

Variable Tracker

Variable	Start	After Step 3	After Step 5	After Step 6	Final
Working Directory	undefined	/app	/app	/app	/app
Files in /app	empty	package.json, package-lock.json	all app files	all app files + build output	all app files + build output
Node Modules	none	none	installed	installed	installed
Docker Image	none	none	none	none	svelte-app built
Container State	none	none	none	none	running, serving app

Key Moments - 3 Insights

Why do we copy package.json files before running npm install?

Copying package.json first allows Docker to cache the npm install step if dependencies don't change, speeding up rebuilds. See execution_table rows 3 and 4.

What happens if we run the container without building the app first?

The app won't have the built files to serve, so the preview server will fail or show errors. See execution_table row 6 for the build step.

Why do we map port 5173 to 4173 when running the container?

The Svelte preview server runs inside the container on port 4173, so we map it to 5173 on the host to access it via localhost:5173. See execution_table row 9.

Visual Quiz - 3 Questions

Look at the execution_table, what is the working directory inside the container after step 2?

A /usr/src/app

B /app

C /root

D /

💡 Hint

Check the 'Set working directory' action in execution_table row 2.

At which step does the Svelte app get built inside the Docker image?

A Step 6

B Step 4

C Step 8

D Step 9

💡 Hint

Look for the 'Build app' action in execution_table.

If you forget to copy package.json before npm install, what will happen?

A Docker build will skip npm install

B npm install will succeed but install wrong packages

C npm install will fail because no package.json is found

D App will build but not run

💡 Hint

Refer to execution_table rows 3 and 4 about copying package.json before npm install.

Concept Snapshot

Docker deployment for Svelte apps:
- Write your Svelte app code
- Create a Dockerfile with Node base image
- Copy package.json, run npm install
- Copy app files, run npm run build
- Set CMD to run preview server
- Build image and run container
- Map container port to host to access app
- This packages app and environment for easy deployment

Full Transcript

Docker deployment for a Svelte app involves writing your app code and creating a Dockerfile that uses a Node base image. The Dockerfile sets a working directory, copies package.json files, and runs npm install to get dependencies. Then it copies all app files and runs npm run build to create the production build. The CMD command starts the preview server. You build the Docker image with docker build and run it with docker run, mapping the container's port to your local machine. This lets you access the Svelte app in your browser running inside the container. Key steps include copying package.json before npm install to use Docker caching, building the app before running, and port mapping for access.

Practice

1. What is the main purpose of using Docker for deploying a Svelte app?

easy

A. To automatically fix bugs in the app

B. To package the app so it runs the same on any machine

C. To make the app load faster in the browser

D. To write the app code faster

Solution

1. Step 1: Understand Docker's role

   Docker creates a container that holds your app and all its parts, so it works the same everywhere.

2. Step 2: Compare options

   Only To package the app so it runs the same on any machine describes this packaging and consistency purpose. Others talk about coding speed, browser speed, or bug fixing, which Docker does not do.

3. Final Answer:

   To package the app so it runs the same on any machine -> Option B

4. Quick Check:

   Docker ensures consistent app environment = D [OK]

Hint: Docker packages apps for consistent environments [OK]

Common Mistakes:

• Thinking Docker speeds up coding
• Confusing Docker with browser performance tools
• Assuming Docker fixes app bugs automatically

2. Which line correctly exposes port 3000 in a Dockerfile for a Svelte app?

easy

A. EXPOSE 3000

B. EXPOSE:3000

C. EXPOSE = 3000

D. EXPOSE_PORT 3000

Solution

1. Step 1: Recall Dockerfile syntax for ports

   The correct syntax to expose a port is simply 'EXPOSE' followed by the port number without symbols.

2. Step 2: Check each option

   Only 'EXPOSE 3000' matches the correct syntax. Others have invalid characters or wrong commands.

3. Final Answer:

   EXPOSE 3000 -> Option A

4. Quick Check:

   Correct Dockerfile port syntax = B [OK]

Hint: Use 'EXPOSE' followed by port number without symbols [OK]

Common Mistakes:

• Adding colons or equals signs after EXPOSE
• Using wrong command names like EXPOSE_PORT
• Forgetting to expose the port at all

3. Given this Dockerfile snippet for a Svelte app:

FROM node:18-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "preview"]

What happens when you run this container?

medium

A. The app builds and runs on port 3000 serving the preview

B. The app fails because 'npm run preview' is invalid

C. The container exposes port 80 instead of 3000

D. The app runs but does not build before starting

Solution

1. Step 1: Analyze Dockerfile commands

   The Dockerfile installs dependencies, copies files, builds the app, exposes port 3000, and runs 'npm run preview' which serves the built app.

2. Step 2: Understand container behavior

   Since 'npm run preview' is the correct command to serve a Svelte build, the app will run on port 3000 as exposed.

3. Final Answer:

   The app builds and runs on port 3000 serving the preview -> Option A

4. Quick Check:

   Build then preview on port 3000 = A [OK]

Hint: Check build then preview commands and exposed port [OK]

Common Mistakes:

• Assuming 'npm run preview' is invalid
• Confusing exposed port 3000 with 80
• Thinking build step is missing

4. You wrote this Dockerfile for your Svelte app but the container fails to start:

FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD npm run preview

What is the likely error?

medium

A. npm install should come after build

B. EXPOSE 3000 is missing

C. CMD should be an array, not a string

D. WORKDIR is not set

Solution

1. Step 1: Check CMD syntax in Dockerfile

   CMD should be an array of strings like ["npm", "run", "preview"] to run correctly in Docker.

2. Step 2: Verify other parts

   EXPOSE 3000 is present, npm install is before build which is correct, and WORKDIR is set. So these are not errors.

3. Final Answer:

   CMD should be an array, not a string -> Option C

4. Quick Check:

   Use array syntax for CMD = A [OK]

Hint: Use array syntax for CMD in Dockerfile [OK]

Common Mistakes:

• Writing CMD as a plain string
• Changing order of npm install and build incorrectly
• Forgetting to set WORKDIR

5. You want to deploy a Svelte app with Docker but need to serve it on port 8080 instead of 3000. Which change in the Dockerfile is correct?

FROM node:18-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "preview"]

hard

A. Change CMD to ["npm", "run", "preview", "--port", "8080"] only

B. Only change EXPOSE 3000 to EXPOSE 8080

C. No changes needed; Docker maps ports automatically

D. Change EXPOSE 3000 to EXPOSE 8080 and run preview with PORT=8080

Solution

1. Step 1: Understand port exposure and app config

   Changing EXPOSE alone only tells Docker which port to open, but the app must also listen on that port.

2. Step 2: Set app to listen on port 8080

   You must pass the PORT environment variable or argument so 'npm run preview' serves on port 8080.

3. Step 3: Combine both changes

   Change EXPOSE to 8080 and run preview with PORT=8080 ensures Docker and app ports match.

4. Final Answer:

   Change EXPOSE 3000 to EXPOSE 8080 and run preview with PORT=8080 -> Option D

5. Quick Check:

   Match exposed port and app port = C [OK]

Hint: Match Docker EXPOSE and app port settings [OK]

Common Mistakes:

• Changing only EXPOSE without app port
• Changing only CMD without exposing port
• Assuming Docker auto-maps ports