Docker on the Educative Platform

We use Docker to allow authors to create their own custom environments to accommodate any language that is not supported by our platform.

Authors can create custom docker images that deploy on the Google Cloud and allow end-users to directly have access to these customized environments through our platform.

The Jargon

Base Image: An OS userspace.

Image: A read-only template with instructions for creating a Docker container.

Dockerfile: A simple file with no extension, named as Dockerfile is used to builds a Docker image, and specifies everything that will go in the application’s environment setup.

Container: An image when run, builds a container. This contains your application environment, basically where your application will be run.

Tarball

On Educative, we require our Dockerfile and all dependent files to be uploaded on the platform via a tarball.

-tarball
--Dockerfile
--package.json
--file1.js

The above shows the directory structure of our tarball.

The command to create this tarball is as follows:

tar -czvf tarfile.tar.gz Dockerfile file1.js package.json

As you can see, the Dockerfile must be nested directly inside the tarball (not inside any child folder).

This allows Educative to access the Dockerfile directly and create a docker container for our application’s environment.

The other two files i.e package.json and file1.js.

Package.json need not be added as it will be created again on runtime and file1.js just has code for testing and is also optional, it is already provided in the lessons that follow.

Points to Note:

  • all files can be found for download in the Appendix of this lesson.
  • Only ONE tarball with ONE Dockerfile can be uploaded and used at a time. Uploading a new tarball will replace any previously uploaded.

Dockerfile

Our Dockerfile can be found below:

FROM node:8.15
RUN npm -g install eslint
RUN npm -g install eslint-config-airbnb
RUN npm install  -g eslint-plugin-import
RUN npm install  -g eslint-plugin-jsx-a11y
RUN npm install  -g eslint-plugin-react 
RUN npm install -g prettier 
RUN npm install -g --save-dev jest 
RUN npm install -g --save-dev @testing-library/react

Let’s see step by step how this works.

Line 1:

FROM node:8.15:

The FROM command sets the Base Image for the rest of the instructions. This command must be on top of the Dockerfile.

In this example, we are starting with the base image of node:8.15. This will allow us to install various npm packages needed for our purposes. Make sure you use node:8.15 version in your Dockerfile if you are making a LiveVM

You can use a specific version of your base image, by appending : and the version_name at the end of the image name.
In case of LiveVM setup, whatever base image you use, you need to install node:8.15 via Dockerfile for the SPA + LiveVM to work.

For code widget this is not necessary.

Line 3:

RUN npm -g install eslint

The RUN command is used to execute instructions against the image. It is used to run a command during the build process of the docker image.

The RUN npm -g install eslint line runs a global install for eslint

Lines 4-7:

RUN npm -g install eslint-config-airbnb

RUN npm install -g eslint-plugin-import

RUN npm install -g eslint-plugin-jsx-a11y

RUN npm install -g eslint-plugin-react

These lines run a global install for our configuration file: eslint-config-airbnb, and its various dependencies.

Note: A package.json file will be provided in the code files for eslint and you can change eslint configuration from there as needed.

Line 9:

RUN npm install -g prettier : This runs a global install for Prettier.

Line 11:

RUN npm install -g --save-dev jest: This line runs a global install for jest

Line 12:

RUN npm install -g --save-dev @testing-library/react : This runs a global install for React Testing Library.

Uploading the Tarball

Note: In case Image build fails, you can download the Build Logs (image above), to see where the problem went by.

Appendix

File to Download

tarball

In the next lesson, we’ll learn how to set up Prettier.