Docker deployment in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the Dockerfile to set the base image for a Svelte app.

Svelte

FROM [1]

Drag options to blanks, or click blank then click option'

Anode:18-alpine

Bpython:3.12

Cubuntu:latest

Dnginx:latest

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing an image without Node.js will cause build errors.

Using a heavy image can slow down the build process.

The base image node:18-alpine is lightweight and suitable for building Svelte apps.

2fill in blank

medium

Complete the command to install dependencies in the Dockerfile.

Svelte

RUN npm [1]

Drag options to blanks, or click blank then click option'

Astart

Binstall

Cbuild

Dtest

Attempts:

3 left

💡 Hint

Common Mistakes

Using npm start instead of install will not install packages.

Running npm build is not a valid npm command.

npm install installs all dependencies listed in package.json.

3fill in blank

hard

Fix the error in the Dockerfile command to build the Svelte app.

Svelte

RUN npm run [1]

Drag options to blanks, or click blank then click option'

Ainstall

Bstart

Ctest

Dbuild

Attempts:

3 left

💡 Hint

Common Mistakes

Using start runs the app instead of building it.

Using install installs packages but does not build.

The build script compiles the Svelte app for production.

4fill in blank

hard

Fill both blanks to copy the build output and expose the correct port.

Svelte

COPY public [1]
EXPOSE [2]

Drag options to blanks, or click blank then click option'

A/usr/share/nginx/html

B3000

C80

D/app/build

Attempts:

3 left

💡 Hint

Common Mistakes

Exposing port 3000 is common for dev servers but not for Nginx.

Copying to /app/build won't serve files via Nginx.

The build files are copied to Nginx's default directory /usr/share/nginx/html, and port 80 is exposed for HTTP traffic.

5fill in blank

hard

Fill all three blanks to complete the multi-stage Dockerfile for Svelte deployment.

Svelte

FROM node:18-alpine as builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm [1]
COPY . .
RUN npm run [2]

FROM nginx:stable-alpine
COPY --from=builder /app/[3] /usr/share/nginx/html
EXPOSE 80

Drag options to blanks, or click blank then click option'

Ainstall

Bbuild

Dpublic

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up install and build commands.

Copying the wrong folder to Nginx will cause the app not to load.

First, dependencies are installed with npm install. Then the app is built with npm run build. Finally, the build output in the public folder is copied to Nginx's serving directory.