How to run JavaScript & TypeScript directly inside Jupyter Notebook

It's no doubt Jupyter notebooks offer a simplified, lightweight notebook-authoring experience. It is a shareable document file that combines Code, plain language descriptions, data, rich visualizations, charts, and interactive controls.

Packed with all these features, it turns out Python users enjoy it exclusively. However, contrary to the belief that Jupyter notebooks executes only python, it does actually support a variety of other languages - each of which is installed with a custom kernel.

Today, we'd specifically look at how we can execute JavaScript or TypeScript directly inside Jupyter notebooks which turns out to be much more convenient than using a terminal. An extension right inside VS Code marketplace (serving as a Node.js REPL) makes this possible and much more simplistic. Essentially, this extension comes along with a node.js kernel and installs it into your environment.

Besides, if you've ever played around Jupyter notebooks hosted in VS code, you wouldn't want to have it any other way - nothing beats the experience.

Just to give you a hint of what notebooks offer - Think about not having to explicitly call console.log() whenever you simply want to print an output. Sounds cool right?😎

Going forward, this tutorial only focuses on Notebooks hosted inside VS Code.

Step 1: Do ensure you've got node.js and npm installed. Otherwise, open a terminal and enter the following commands.

sudo apt update && sudo apt install nodejs && sudo apt install npm

Ideally, you should have a version of Node.js later than 12.0.0 installed. You can check this by entering node -v . If you've got an earlier version than 12.0.0, you might need to update node using nvm.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
sudo nvm install node
sudo nvm alias default node

Step 2: Install and enable Node.js REPL extension from VS code marketplace.

Step 3: Create a new file with .nnb extension. This simply identifies the file as a Node.js Notebook - similar to that of python which is .ipynb. Alternatively, we could create same notebook using a shortcut in Command palette (Ctrl+Shift+P)

Upon opening the Notebook file, you'd be presented with a default Node.js kernel.

Inside a notebook you can execute your code in cells. You can use the defined variables across your notebook. To add new cells in the notebook click + Code. To run your code from the cell simply click the play button in the left side of the cell.

One downside of introducing a new file extension .nnb is the absence of a default file icon. Personally, I do feel a file icon is as important as the file name. Luckily, VS Code got you covered on this. We could use same JS icon as other Javascript files.

In your root directory, create a folder named .vscode. Inside the folder, create a settings.json file and enter the following lines of code as shown below

{
    "files.associations": {
        "*.nnb": "javascript"
    }
}

Save the changes and restart VS Code. Upon re-opening, the changes would be implemented. Now, feel free to play around - enjoy the rich features notebooks has to offer 😇

Advantages of Notebooks

• It allows you to selectively execute and modify parts of your code easily, without needing to run the program in its entirety.

• You can embed formatted text (and figures) into your file, thereby making it easy for others to read and modify your code directly.

• Since it's a shareable document, it allows users to convert the notebooks into other document formats such as HTML and PDF.