In the Live App widget, we can use Docker to run a live server application whose source code does not need to be shown to the user. Hence, the user will only see the running application in the output.

Let’s understand this with the help of an example.

Example - Setting Up a Vue Application

Objective

Let’s suppose we want to display a simple Vue application to the user. The GitHub repository we have can be found here.

Have a look at the vue.config.js file in the repo.

Press + to interact
module.exports = {
  devServer: {
    host: '0.0.0.0',
    disableHostCheck: true
  }
}

Best Practice: You should always launch your apps on 0.0.0.0 when working on Educative.

Since you’ll be working in a secure sandbox environment, the disableHostCheck option for Webpack can also be enabled.

Step 1 - Create a Dockerfile

As always, we’ll start by creating a Dockerfile. The first step is to make sure that we are installing all the required frameworks to run the application. In our case, we need NodeJS and npm.

It is also essential to bring the project folder into the container. We’ll be doing this through git, as our project is already uploaded on GitHub.

Note: The recommended way is to always upload your code to GitHub and simply import that code in your Dockerfile using git clone. This saves the build time!

Lastly, we’ll install all the npm packages for our project. For Vue applications, these are specified in the package.json file. Keep in mind that whatever your setup may be, you should always aim to perform such installations in the Dockerfile.

The final Dockerfile looks like this:

Press + to interact
FROM 	ubuntu:20.04
RUN 	apt update &&\
		apt install -y curl git &&\
		curl -sL https://deb.nodesource.com/setup_12.x -o nodesource_setup.sh &&\
		bash nodesource_setup.sh &&\
		apt install -y nodejs &&\
		git clone https://github.com/rauhaanrizvi/vue-hello-world.git &&\ 
		cd vue-hello-world && npm install

Initial setup:

  • FROM ubuntu:20.04: We are using ubuntu:20.04 as our base image. The OS will be Ubuntu 20.04.

  • apt update: Update all packages

  • apt install -y curl git: Install cURL and git, both of which will be used in further commands.

Installing Node and npm:

  • curl -sL https://deb.nodesource.com/setup_12.x -o nodesource_setup.sh: Use cURL to add the NodeJS PPA to our container.
  • bash nodesource_setup.sh: Run the file to enable the NodeSource repository.
  • apt install -y nodejs: Install NodeJS and npm.

Cloning the project:

  • git clone https://github.com/rauhaanrizvi/vue-hello-world.git: Clone the project in your preferred directory.

  • cd vue-hello-world && npm install: Move into the project folder and run npm install to install the required packages.

This may look intimidating, but most of these commands can be found in the official installation instructions of all the required frameworks. We’re using them just as we would while installing them on our local machine.

Note: The -y flag in the apt install commands ensures that the terminal does not ask us to confirm the installation. Without the flag, the image building process would get stuck on the confirmation step, causing our build to fail.

Step 2 - Create a Tarball and Upload It

The Dockerfile must be compressed into a the tarball. Remember, we’ve already imported our code into the container using git clone. Hence, we don’t need to store it in the tarball.

Make sure the tarball has the .tar.gz extension:

tar -czpf vue.tar.gz Dockerfile

Upload the tarball in the Docker Container section of your course’s Collection Editor page. Save the course and wait for the image to build until the following message is displayed:

widget

Step 3 - Create a Docker Job

Most of our work is done. All that is left is to create a Docker job to run an instance of our container.

Just as we did for running a live server in SPA, we must tick the Run in Live Container checkbox for this job. Here is what the Docker job looks like:

Job Type

This field determines which type of widget will be using your Docker job. Here we are using “Live” because we are making it for the Live app widget.

Job Name

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

Input File Name

This field is not applicable when working with LiveVMs. There is no input file in the Live App widget. In fact, we are not showing any files to the user. So, we can name this. to anything random.

Run Script

This script is the most essential part of running the Live App widget. It is executed whenever we run the Live App. In our case, we want to launch our React app. For that, we simply have to move into the /vue-hello-world folder and run npm run serve. This is exactly how we would do it locally.

Application Port

This is the port where your server will be listening. Port 3000 is open by default and you can specify one more port using this field. In our case, Vue runs on port 8080 by default, so let’s use that.

HTTPS Strict Mode

If your server is HTTPS, tick this field.

Start Script

This script is not relevant for the Live App widget. Hence, we can put in a simple echo command.

Note: When migrating an app from the SPA widget to the Live App widget, make sure to flip the Run and Start scripts.

Step 4 - Select the Job in a Live App

We are now ready to launch our application and display it using the Live App widget. First, create a Live App from the widget selection menu:

The widget will be displayed as follows:

App Entrypoint

This is the URL on which your app will be accessible to users. The original URL cannot be altered as it directs to the homepage. However, if you want the user to land on a specific page within your app, you can extend the URL so that the app moves to that page:

Live Docker Job

Select your Docker job from the dropdown menu. In our case, it was called vueapp:

Background Image URL

Here you can specify a background image to be displayed while your application loads. It is strongly recommended that you take a screenshot of your app’s webpage and add it here.

You can upload the image in the Course Assets section of the course, and use its link here.

Live App in Action

Now, the Live App window shows the Click to launch app! button. Our application is ready to be launched. Try it out below:

Please login to launch live app!