Docker deployment in Svelte - Mini Project: Build & Apply

Docker Deployment for a Svelte App

📖 Scenario: You have created a simple Svelte app and want to share it easily with others. Using Docker, you can package your app so it runs the same way on any computer.This project guides you step-by-step to prepare your Svelte app for Docker deployment.

🎯 Goal: Build a Docker setup that packages your Svelte app and serves it using a lightweight web server inside a container.After completing, you will have a Dockerfile that builds your app and a container that runs it.

📋 What You'll Learn

Create a basic Svelte app folder structure with package.json and src directory

Add a Dockerfile that installs dependencies and builds the app

Configure the Dockerfile to use a lightweight web server to serve the built app

Write the final Dockerfile with all necessary commands to build and run the container

💡 Why This Matters

🌍 Real World

Docker lets developers package apps with all needed parts so they run the same everywhere. This is useful for sharing apps or deploying to servers.

💼 Career

Many companies use Docker to deploy web apps. Knowing how to containerize a frontend app like Svelte is a valuable skill for developers.

1

Set up the Svelte app structure

Create a package.json file with the exact content: {"name": "svelte-app", "version": "1.0.0", "scripts": {"build": "svelte-kit build"}} and a src folder with an empty app.html file inside.

Svelte

# Create package.json and src/app.html as described
# Your code here

Hint

Make sure package.json has the exact keys and values. Create an empty app.html inside the src folder.

2

Add base Dockerfile setup

Create a Dockerfile starting with FROM node:18-alpine and set the working directory to /app using WORKDIR /app.

Svelte

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "svelte-kit build"
  }
}

# src/app.html is an empty file inside src folder

# Start Dockerfile with base image and working directory
FROM node:18-alpine
WORKDIR /app
# Your code here

Hint

Use the official Node.js 18 Alpine image for a small base. Set the working directory inside the container to /app.

3

Install dependencies and build the app

In the Dockerfile, copy package.json and package-lock.json (if exists) to /app, run npm install, then copy the rest of the app files and run npm run build.

Svelte

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "svelte-kit build"
  }
}

# src/app.html is an empty file inside src folder

FROM node:18-alpine
WORKDIR /app

# Copy package files and install dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install

# Copy all files and build the app
COPY . ./
RUN npm run build
# Your code here

Hint

Copy only package.json and package-lock.json first to leverage Docker cache. Then install dependencies. Finally, copy all files and build.

4

Serve the built app with a lightweight server

In the Dockerfile, use a multi-stage build: start a new stage with FROM nginx:alpine, copy the built build folder from the previous stage to /usr/share/nginx/html, and expose port 80.

Svelte

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "svelte-kit build"
  }
}

# src/app.html is an empty file inside src folder

FROM node:18-alpine
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . ./
RUN npm run build

# Start new stage with nginx and copy build files
FROM nginx:alpine
COPY --from=0 /app/build /usr/share/nginx/html
EXPOSE 80
# Your code here

Hint

Use multi-stage build to keep the final image small. Copy the build output from the first stage to nginx's default folder. Expose port 80 for web traffic.

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