Now that you saw working demos of RxJS running on our platform, here’s how to make it work in your course. Here are the setup instructions.

Setup: How to Enable RxJS for Your Course

RxJS code doesn’t run on our platform by default. If you want to teach a course on RxJS, you have to enable it. To do that, you will need to Dockerize the RxJS library so that it compiles in our Code widget and SPA widget. Then you will need to configure the widgets to run the RxJS container when students click Run on the code snippets in your course. Here is an overview of the steps:

  1. Download or create a simple Dockerfile with instructions for RxJS
  2. Upload the Dockerfile to your course’s back-end
  3. Add a docker job for use with your Code widgets, so that RxJS code will execute on our platform
  4. Add a docker job for use with your SPA widgets, if you wish
  5. Add RxJS code to your lessons!

Note: Please read our Author’s Guide for a complete tutorial on our Docker functionality.

Step 1: Download or Create the RxJS Dockerfile (Tarball)

The Dockerfile for RxJS is very simple and contains only three layers:

FROM gcr.io/educative-exec-env/educative:latest
LABEL maintainer="educative@educative.io"
RUN npm install rxjs

Explanation of the Dockerfile

In case you’re curious, let’s walk you through what’s here:

  • FROM is a docker instruction that pulls a base image, in this case our very own. Educative’s base image comes pre-installed with NodeJS on a Ubuntu Linux distribution
  • LABEL is a docker instruction that applies metadata to an object, such as an image; in this case, the metadata is just our contact info
  • RUN is a Docker instruction that executes the specified script or command, in this case the installation of rxjs via the npm package manager

We have already created a tarball file that you can use to upload the Dockerfile to your course, below.

But if you prefer to make the Dockerfile and zip it as a tarball yourself, create a file named Dockerfile on your computer. Then add the code snippet above and save the file. Last, use your terminal and run the following command:

tar -czvf rxjs.tar.gz Dockerfile

This will take your RxJS Dockerfile as input and produce a zipped tarball named rxjs.tar.gz as output. It will be the same as what is downloadable below.

Download the RxJS Dockerfile Tarball

Click to download the Dockerfile tarball "rxjs.tar.gz"

Step 2: Upload the RxJS Tarball to your Course Settings Page

The purpose of this step is to upload an RxJS Dockerfile to our platform in order to create the RxJS docker image and subsequent RxJS containers. The output of this step is that RxJS will be “Dockerized” (enabled to work) with your course. Here are the details.

The DOCKER CONTAINER Section

When you create a new course, there’s a settings page where you can name your course, give it a description, set your course price, add your table of contents, and more. There’s also a section there called DOCKER CONTAINER. This is where you can do two things:

  1. upload your Dockerfile tarball to have your rxjs Docker image built.
  2. create docker jobs, which are the settings which actually let you use rxjs with the Code and SPA widgets

Here’s what your course settings page will look like after you do all of this:

widget

Uploading the RxJS Tarball

Follow these instructions:

  1. Go to the DOCKER CONTAINER section
  2. Click CHANGE DOCKER FILE(BETA)
  3. Upload the rxjs.tar.gz file
  4. Click SAVE on your course settings page
  5. Wait a minute or two for the Docker image build
  6. Once Image has been built appears, congratulations!

If you’ve made it this far, the RxJS docker image build process was successful. You have now Dockerized RxJS.

Step 3: Add Your RxJS Docker Job for the Code Widget

The purpose of this step is to prep our teaching tools to work with the Dockerized RxJS you just enabled in Step 2. The output of this step is that the Code Widget and/or Single Page App Widget will be able to ingest RxJS code in your lessons.

Note: To enable RxJS in the Code widget, you’ll need to first create a docker job for it with the following settings:

  • Job Name: rxjsCodeWidget (adjust to taste)
  • InputFileName: foo
  • Run Script: cd /usercode && node main.js

What does this do? It will allow you to embed interactive RxJS code snippets. When a student clicks the Run button in a Code widget, the code will execute correctly.

Note that you’ll need a file called foo with a script src attribute inside, as well as the file main.js where the RxJS user code will be placed.

Also note that RxJS supports two methods for importing modules:

  • import { of } from 'rxjs';, and
  • const{of} =require('rxjs') ;

Only the second method works with Docker. Hence the syntax you see in the main.js file below:

Press + to interact
foo
main.js
const{of}  =require('rxjs') ;
const{ map } = require('rxjs/operators'); 
// subtract two values of x
map(x => x - x)(of(10, 100, 1000)).subscribe((v) => console.log(`difference: ${v}`));
// add two values of x
map(x => x + x)(of(10, 100, 1000)).subscribe((v) => console.log(`sum: ${v}`));
// multiply two values of x
map(x => x * x)(of(10, 100, 1000)).subscribe((v) => console.log(`product: ${v}`));
// divide two values of x
map(x => x / x)(of(10, 100, 1000)).subscribe((v) => console.log(`quotient: ${v}`));
// raise one value to the power of itself
map(x => x ** x)(of(10, 100, 1000)).subscribe((v) => console.log(`exponentiation: ${v}`));

Step 4: Add Your RxJS Docker Job for the SPA Widget

Note: To enable RxJS in the SPA widget, you’ll need to first create a docker job for it with the following settings:

The SPA widget config is a little longer:

  • Job Name: rxjsSPA (adjust to taste)
  • InputFileName: foo
  • Run Script: cp -r /usercode/main.js /usr/local/educative/
  • Run in Live Container: true
  • Application Port: 3000
  • Start Script: n latest && cd /usr/local/educative && node main.js

Step 5: Add RxJS Code to A Lesson

Once you create these docker jobs, in your course back-end, you will be able to do this:

  • navigate to a lesson
  • add a Code Widget and/or a Single Page App widget
  • select rxjsCodeWidget or rxjsSPA from the Docker(Beta) dropdown
  • add your code

Don’t forget to observe the correct syntax! When you preview your code, it should work. If it doesn’t, send us an email and we’ll troubleshoot for you.

Happy writing!