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.