The Docker Job

Before diving into the docker job to run this specific application, have a look at the job feature here.

The Docker job to run the application is as follows:

Don’t worry if the above image looks overwhelming. We will have a look at it step by step.

Starting from Job Name field, I named the job name “RunApp”. You can name your job whatever you want. Secondly, the input file name is a dummy field for LiveVM so I have entered “foo” in that field.

The build script is left empty while the run script is as follows:

The above script basically runs the code every time the Run button is clicked. This command copies the files from usercode folder which is the folder containing the files that are viewed to the user in the SPA widget and then pastes them in /usr/local/educative/Basic-MERN-Stack-App directory where the actual folder is placed to which the application code was copied in the Dockerfile.

We are doing this so that if a user makes changes to the code in the SPA widget, then those changes should be reflected in the code execution in the terminal. When “Run” is pressed, the run script executes and the watcher (Nodemon) detects changes to the files in /usr/local/educative/Basic-MERN-Stack-App directory. The watcher automatically builds the project and the changes made by the user in the code shown in the SPA widget will be reflected in the terminal.

Next up, we have the start script which only runs once at the start when your app’s terminal is being initiated:

On the first line, we have the following command:

mongod >/dev/null & sleep 5 && n 8.12.0 > dev/null && cd /usr/local/educative/Basic-MERN-Stack-App && tmux \

Basically, we start the mongodb server and then wait for 5 seconds for it to start. Next, we change the node version from 8.15.0 to 8.12.0 as this particular project requires 8.12.0

Then we change the directory to usr/local/educative/Basic-MERN-Stack-App. At this point, we need to initiate two sessions, one to start the server-side, the other to start the client-side. Therefore, we use tmux command. You can read more about it here.

In the second line, we initiate the server-side:

new-session  "yarn server; read" \; \

yarn server is to start the server-side. You can replace yarn server with whatever command you want to run in the first session.

Next, we initiate the second session:

split-window "cd /usr/local/educative/Basic-MERN-Stack-App  && yarn client; read" \; \

In the second window, we change the directory to "/usr/local/educative/Basic-MERN-Stack-App and then initiate the client-side by yarn client.

You can replace the following command with whatever you want to run in the second session:

cd /usr/local/educative/Basic-MERN-Stack-App && yarn client

The last line is just there for formatting purposes.

select-layout even-horizontal