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.