Dockerfile for a Basic Svelte App

Requirements

The most important use of Docker on the Educative platform is to run an app with a live server connected to it. This live virtual machine will stay persistently active throughout your course for a fixed period of time. It gives users the ability to interact with an app/webpage and use a server terminal to see how the backend of the app works.

If you wish to include a running server in your course, you must use the SPA widget.

This guide will take you through all the steps required to set up a live server. We will create a Dockerfile, set up our Docker job, and run the code.

Step 1: Create a Dockerfile and a package.json file

The first step is to create a Dockerfile. In the same directory, we will have all the folders and files needed for our application. In this case, there is a package.json. You can also upload your whole project folder if you have multiple files.

FROM node:10: We are using Node version 10 as our base image. The OS is Debian.

COPY . /usr/local/educative/sveltedev: This copies all the source files to the current working directory in the container. In our case, this is the package.json file. Keep in mind that these files are not automatically present in the container. Hence, it is essential to use COPY to bring them into the container.

RUN npx degit sveltedev: This will create a new project in the sveltedev directory.

Step 2: Create a Tarball and Upload It

Compress the Dockerfile and the application files and folders into a tarball. In the command below, we have named our tarball tarball.tar.gz:

Upload this file in the Docker Container section of the Course Editor page. Click Save to build the image. If everything went well, the image will be built:

Step 3: Create a Docker job

Create a new job by pressing the ‘+’ button and fill in the fields like shown below.

This is where the actual set up of your container takes place. So, let’s discuss each component one by one.

Job Name

This name will be used to select the job in a SPA widget.

Input File Name

This field is not applicable when working with LiveVMs. The files in the SPA widget are not linked to your container. Hence, there is no input file for the backend to work with. Instead, we can copy the files from the SPA into our container (more on this shortly).

Application Port

This is the port where your server will be listening. In our case, it’s 5000.

HTTPS Strict Mode

If your server is HTTPS, tick this field.

Start Script

This script runs the first time you click the ‘RUN’ button in a SPA. It runs only once. Typically, this script would be used to ‘start’ the server.

Run Script

The Run Script is typically used to update your project’s code in the container. As we discussed earlier, the code present in the SPA widget’s editor is not actually part of our project. This code lives in a directory called /usercode which is present in your container’s root directory by default.

So if the user makes any changes to main.js or App.svelte (which is in /usercode), they will not be reflected in the server running inside the container.

Hence, before every run, the code from /usercode is copied to your container’s folder. The folder inside is placed at /usr/local/educative/sveltedev

In the next lesson, we will see how to create a SPA widget for our Svelte App.