Docker deployment in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the output when running this Dockerized Svelte app?

Consider a simple Svelte app served by a Docker container. The Dockerfile uses node:18-alpine as base and runs npm run build then npm run preview. The app has a button that increments a counter displayed on screen.

What happens when you open the app in a browser and click the button 3 times?

Svelte

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

A The app fails to load because the Dockerfile misses exposing port 3000.

B The counter increments from 0 to 3 on button clicks, showing updated count each time.

C The app shows the counter but button clicks do not update the count due to missing hot reload.

D The app crashes on start because node_modules is not copied into the container.

💡 Hint

Think about what npm run preview does and how Svelte apps behave after build.

The Dockerfile builds the Svelte app and runs the preview server which serves the static built files. The counter is client-side JavaScript and increments normally on button clicks.

📝 Syntax

intermediate

Which Dockerfile snippet correctly sets up a Svelte app for production?

Choose the Dockerfile snippet that correctly installs dependencies, builds the app, and runs it in production mode.

A

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

B

FROM node:18
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]

C

FROM node:18
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
CMD npm run preview

D

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

💡 Hint

Look for correct CMD syntax and proper copying order.

Option A uses JSON array syntax for CMD which is recommended. It copies package.json first to leverage Docker cache, installs dependencies, copies rest, builds, then runs preview.

🔧 Debug

advanced

Why does this Dockerized Svelte app fail to start?

The Dockerfile below builds a Svelte app but the container exits immediately after starting. What is the cause?

Svelte

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

A The CMD instruction is missing JSON array syntax, causing the container to exit immediately.

B The app crashes because the build output folder is not copied.

C The container exits because the port is not exposed in the Dockerfile.

D The app fails because <code>npm run preview</code> is not installed in node_modules.

💡 Hint

Check how CMD is written and how Docker interprets it.

Using CMD without JSON array runs the command in a shell but does not keep the container running properly. Using JSON array syntax keeps the process attached.

❓ lifecycle

advanced

What happens if you change source code after building the Docker image?

You build a Docker image for a Svelte app and run it. Then you change the source code locally but do not rebuild the image. What will the running container show?

A The container shows a blank page because source and build files mismatch.

B The container automatically updates to show the new source code changes.

C The container crashes because source files changed but image is not rebuilt.

D The container shows the old version of the app as it uses the built files inside the image.

💡 Hint

Think about how Docker images and containers isolate files.

Docker containers run from the image snapshot. Changes outside the container do not affect the running container unless volumes are mounted.

🧠 Conceptual

expert

Which statement best explains why multi-stage builds are used in Docker for Svelte apps?

Multi-stage builds are common in Dockerfiles for Svelte apps. Why is this approach used?

A To allow running multiple Svelte apps in one container efficiently.

B To enable hot module replacement inside the container during development.

C To separate the build environment from the runtime environment, reducing final image size and attack surface.

D To cache node_modules separately for faster rebuilds.

💡 Hint

Consider what files are needed to run the app versus build it.

Multi-stage builds let you build the app in a full Node environment, then copy only the built static files into a lightweight image for running, making the image smaller and safer.