Running TypeScript via Docker

In this walkthrough, you will learn how to set up a custom Docker container and Docker job for running TypeScript in Strict Mode and/or adding a custom version of TypeScript to the Code Widget and the Single Page App Widget.

We'll cover the following

Adding a TypeScript Docker Job

Our Code widget currently supports TypeScript version 3.3.4. It does not run in strict mode by default.

If we wish to enable strict mode for TypeScript in the Code widget, we will need to upload a tarball containing a custom docker image and a tsconfig.json file with
{ "compilerOptions": { "strict": true, } }.

We will also need to create a custom docker job which will later be selectable from within any Code widget or Single Page App widget you embed in your course.

For your ease, we have already built that tarball which you can download and use to run TypeScript with strict mode.

TypeScript Tarball

Download typescript.tar.gz tarball below.

typescript.tar.gz

Step 1 - Upload the Tarball to your Course

The first step is to upload this tarball to your course. To do so, navigate to your edit course page and scroll down to the DOCKER CONTAINER section:

Step 1: In your course settings page, scroll down to the DOCKER CONTAINER section
Step 1: In your course settings page, scroll down to the DOCKER CONTAINER section

Step 2 - Build the Docker Image

Now save the course to start the image building process.

Note: The image build process may take a few minutes.

Step 3 - Configure a Docker Job

After the image has been built, we will need to configure a docker job with the settings below:

Step 3a - Create a Docker Job
Step 3a - Create a Docker Job

For your convenience, copy and paste the Job Name, Input File Name, and Run Script to configure your new docker job:

Job Name: typescript strict mode

Input File Name: index.ts

Run Script: cp /home/tsconfig.json /usercode/tsconfig.json && ts-node index.ts

Here’s how this should appear in your course settings page:

Step 3b - Configure the Docker Job with a Job Name, Input File Name, and Run Script
Step 3b - Configure the Docker Job with a Job Name, Input File Name, and Run Script

Click UPDATE to save your new docker job, and click SAVE in your course menu to save all of these changes.

Step 4 - Add a Code Widget in a Lesson & Select your TypeScript Docker Job

To use TypeScript in Strict Mode, you will need to embed a Code widget into your lesson and then select the custom docker job you just set up.

Here’s how:

  1. Navigate to a lesson of your choice
  2. Add a Code widget. Note that by default, it will have C++ code
  3. Select TypeScript from the Language Menu
  4. Click the Execute checkbox
  5. Optional: Click Add Hello World for TypeScript to replace the C++ code

Now, you will see a new dropdown appear in the Code widget: the docker job that we just made. Select it.

You should now see a dropdown menu appear, with the docker job you created
You should now see a dropdown menu appear, with the docker job you created

Step 5 - Check your TypeScript in Strict Mode

Our TypeScript will now run with strict mode and will show errors on non-complying code. For example, the following code will output an error:

Press + to interact
function extractIds (list) {
  return list.map(member => member.id)
}
const member = {
  id: 1,
  name: 'Hello'
}
console.log(extractIds([member]))

If we change our code to comply with strict mode, the errors go away!

Press + to interact
function extractIds (list: Member[]) {
  return list.map(member => member.id)
}
interface Member {
  id: number
  name: string
}
const member = {
  id: 1,
  name: 'Hello'
}
console.log(extractIds([member]))

In Summary

To summarize, we enabled a customized version of TypeScript in strict mode. To do that, we created a custom docker image and configured a custom docker job for use in our lessons. We then selected typeScript strict mode in a Code widget rather than use the default TypeScript that runs out-of-the-box.

Updating Typescript to a Custom Version

Now that you’ve learned how to customize TypeScript with our Code widget, you may be wondering if you can also use a custom version of TypeScript. Indeed you can.

If we wish to update the TypeScript version, we can change the contents of the Dockerfile available in the tarball given at the start of this lesson.

Here is what the Dockerfile contains:

Press + to interact
FROM ubuntu:18.04
MAINTAINER Athar Mehboob
RUN apt update && \
    apt install -y software-properties-common curl && \
    curl -sL https://deb.nodesource.com/setup_10.x | bash - && \
    apt install -y nodejs && \
    npm install npm@6.11.3 && \
    npm install -g gulp@4.0.2 && \
    npm install --unsafe-perm --upgrade -g typescript@3.6.2 ts-node@8.3.0
ENV NODE_PATH=/usr/local/lib/node_modules/
ENV NODE_ENV=production
COPY tsconfig.json /home/tsconfig.json

Notice that Line 10 specifies the version of TypeScript. To install another version of TypeScript, we can simply change typescript@3.6.2 (in the Dockerfile) so that it refers to the newer version (e.g. typescript@3.6.3). After making this change, we now must make a tarball (with the extension .tar.gz) containing the updated Dockerfile and tsconfig.json, and re-upload it through the collection editor page of our course following the steps above.

Confirming the Version of TypeScript Your Docker Image is Using

If you’ve followed the instructions in the previous section, you may want to know how you can double-check the results. Here’s an indirect method to check what version of TypeScript your custom docker image is running:

Part 1: Add a Docker Job

  • Go back to your course settings, to the Docker Container section
  • Add a second docker job, using these settings:
    • name: check ts version
    • input file name: test.sh
    • build script: leave this empty
    • run script: bash test.sh

Part 2: Confirm the TypeScript Version

  • Now return to a lesson of your choice
  • Add a Code widget
  • Make it executable
  • Select Shell from the language menu
  • Select the check ts version docker job you just added
  • Type tsc -v in the code editor
  • Press Run

You should now see the version of TS you’re using in your first docker job.

For example, the Code widget in this tutorial is running a docker image with TypeScript 3.6.2, and by following the instructions above, we can confirm it:

Press + to interact
tsc -v

As you can see above, the Code widget returns what version of TypeScript the docker image is using, which in the case of this tutorial is Version 3.6.2.

Note: Keep in mind that the only way you can utilize your custom-built image in the Code widget is by selecting the docker job you made earlier. You must do this in every Code widget you embed in your course. For convenience, you can copy and duplicate Code widgets once you’ve set the docker job. Bottom line: if you haven’t selected any docker job from the Docker(beta) dropdown menu in a given Code widget, then the custom-built image won’t be used at all.

If you have any questions about customizing TypeScript through our Docker functionality, email us at authors@educative.io.