[Cloud/Remote Server Productivity] Tooling for editing locally and running remotely: VSCode and Jupyter Notebook Setups

Key references:

1. Jupyter: DigitalOcean tutorials on Jupyter setup
2. VSCode: Great Medium article (only just found it last night)

Extra tools needed:

VSCode extension Remote VSCode should be installed via microsoft marketplace:

Figure 1: Remote VSCode extension

Text editor for remote server: what if I am not a vim user?

Remote VSCode Comes To Rescue! 😃

Before yesterday, I thought my only option would be to stay with in-the-console vim editor. Don’t get me wrong — vim is great, but unfortunately, I have never got over the learning curve and always found myself gravitating toward other editors such as sublime and vscode. X11 forwarding for a graphic interface? The agonizingly slow speed makes it impossible to use.

Luckily there is Remote VSCode. All you need to do is:

1. On your local machine:

[Step 1] Install Remote VSCode extension

[Step 2] Open command palette with key combination [Cmd] + [Shift] + [P] (or on Windows, replace Cmd with Ctrl) and type Remote: Start Server

Figure 2: Start server via command palette

[Step 3] ssh into your remote server with port forwarding

ssh -R 52698:localhost:52698 username@xx.xxx.xxx.xxx
# -R [bind_address:]port:host:hostport

*You certainly can have your ssh public keys setup for this, and port 52698 is the default user setting for the extension and can be modified to suite your specific needs.

2. On your remote server:

Upon ssh onto your remote server, install rmate (=remote textmate)

# Download standalone binary
sudo wget -O /usr/local/bin/rmate https://raw.githubusercontent.com/aurora/rmate/master/rmate
# Change permission. Otherwise, `which rmate` won't return anything
sudo chmod a+x /usr/local/bin/rmate
# Verify install
$ which rmate
/usr/local/bin/rmate

Now continue working on your server. Open a code file with rmate mycode.py, for example, will show up in your local VSCode. The editing experience is of no difference from working on any of your local machines.

Edit remote Jupyter Notebook locally

Same ssh port forwarding saves the day 😃

For my workflow, Jupyter plays a crucial role in the development-testing cycles. As you could have guessed, the same kind of port forwarding that has worked for Remote VSCode also applies to jupyter.

Prerequisite: you must have installed Jupyter on your remote server to begin with

1. On your local machine, ssh into your remove server with the following port forwarding

ssh -R 8888:localhost:8888 username@xx.xxx.xxx.xxx
# DigitalOcean tutorials use -L option. I am yet to figure out how
# -L and -R could be different from each other. For now, they both
# seem to work

2. On your remote server:
Upon ssh onto your server with the above-mentioned port forwarding, launch Jupyter with:

$jupyter-notebook --no-browser &
# --no-browser appears to be optional, but in case you already have # X11 forwarding enabled in your ssh log in, we don't want the # server to try to open its browser

This should show something like this:

Figure 3: The URL you are going to copy and paste onto your local machine’s web browser

3. Back to the browser on your local machine, paste the URL onto the address bar, and voila, here comes the notebook at your disposal!

Of course, you can combine both port forwarding in one go:

ssh -R 8888:localhost:8888 -R 52698:localhost:52698 username@xx.xxx.xxx.xxx