Running Jupyter Notebook on Live App

The next step is to configure a Docker job that we'll need to run our Live App.

Docker Job

After the image successfully builds, click the + sign in the Docker Container section. Add fill the following fields with these values:

Job Type

Select "Live" from the drop-down.

Job Name

You can include as many Docker jobs in a course as you need. The Job Name acts as an ID to each job. In this example, we are setting up a job named jupyter-hello.

Input File Name

In our Live VM functionality, this field can have any value in it. For demonstration purposes, let’s call it foo.

Run Script

The run script is the most important part of the job. This script is run every time the Live App is launched. In our case, we want to launch the helloworld.ipynb in Jupyter. Add the lines given below in your run script:

Note: We need to create separate docker jobs for running specific files and modify the notebook filename in the run script. In our case we are running helloworld.ipynb.

Application Port

This port must match the port specified in config.py. In our case, it is 8080.

Start Script

The start script is not required for the Live App widget, but it cannot be left empty. Hence, a simple echo command should be fine:

Our Docker setup is now ready! Let’s use it in a Live App

Use Jupyter Notebook in Live App

Everything we’ve done up to this point has been to embed a Python Jupyter Notebook in our lessons. As our last step, we need to insert a Live App widget in our lesson and choose the Docker job.

Add a Live App from the widget selection menu:

A blank Live App widget will now appear. You will also see two fields: App Entrypoint and Live Docker Job.

App Entrypoint

The App Entrypoint displays the URL of your container. From this URL, we must navigate to the ipynb file in our notebooks directory.

In our case, the required file is /notebooks/helloworld.ipynb. Add this at the end of the URL.

Now the URL will https://jy9lnm-live-app.educative.run/notebooks/helloworld.ipynb.

Note: For each notebook file in your tarball, you will have to create a separate Docker job, and specify the file’s path in the App Entrypoint field, e.g, URL/notebooks/filename.ipynb.

Background Image

The third step is to add the background image to our live app.

Follow the steps below to add the image:

• Go to the course editor and upload the image in the course assets section.

• On successful upload, this will generate a source link. Copy the link and go to the desired Live App widget where you want to add this image and add the source link to the Background Image URL.

Note: According to the notebook, you need to add a background image on all live apps.

Demo 1

Demo 2

We have added another file in our tarball, that is plot.ipynb. You can go to your live app URL and append /notebooks/plot.ipynb at the end of the URL to see that notebook.