So you have a slow machine for development

You are a developer. You have a laptop. Development on said laptop is slow. Servers take minutes to start. 2 IDE windows slow down your machine significantly.

In short, your friend in on a Macbook Pro and you are on a laptop with 4 Gigs of Ram, 2 CPUs and an abysmally slow response time to the smallest of code changes.

Frustrated?

Envy your friend and the speed at which he can code on his faster machine?

Don’t be.

Introducing remote SSH dev on spot instances with Azure VM and VS Code.

If you live under a rock and haven’t heard about an IDE called Visual Studio Code then you must come out from under said rock and check it out. Its one of the finest IDEs out there.

This is VS Code

VS code has is a free to use IDE with amazing features. One of those features that we will be exploring today is the Remote SSH extension that comes with Visual Studio Code.

Pre-requisites

Although you can use any VM size from any cloud provider for your development needs (depending upon your budget), I have gone with an Azure VM of size

Azure VM

Once you have provisioned a VM and are able to SSH into it, you are all set to start Remote SSH with Visual Studio Code.

Step 1:

Install the Remote SSH extension on VS Code.

Click extensions and search for Remote

Install the Remote — SSH plugin.

Step 2:

Now whether on windows or a mac, you need to create a config file in your .ssh directory to be able to connect using SSH to the remote instance.

The .ssh file is normally in your user -> home directory so for example if my username on the machine is ritesh then the .ssh folder would be in

~/.ssh

Which is my home directory.

Now within the .ssh folder you should keep the private key to connect to the VM as well as create a config file that looks like this on a macbook

Host <ssh_connection_name>
   HostName <machine_external_ip>
   User <remote_machine_user>
   IdentityFile ~/.ssh/<private_key_file_name>

ssh_connection_name: for running command ssh <ssh_connection_name> to connect to the VM

Or like this on a windows machine

Host <ssh_connection_name>
HostName <machine_external_ip>
User <remote_machine_user>
Port 22
IdentitiesOnly=yes
PreferredAuthentications publickey
PasswordAuthentication no
IdentityFile C:\Users\<user>\.ssh\<private_key_file_name>

Step 3:

The Remote SSH extension will identify this config entry and display it for you in VS Code.

As you can see the remote command is available to me. Now I click on the Folder icon in the riteshdev row to open a new window with remote ssh onto the target machine.

I will be asked the target OS. I select Linux because that’s what I installed on the VM.

Once connected, click on the Browse files icon of VS Code

Click on Open Folder.

You will see the remote directory.

You can create a project folder on the VM and clone a project there, or start development by creating your own. Its exactly as if developing locally. For the purposes of this tutorial, I am creating a sample React application.

Step 4:

Create an app →

I have opened a terminal and will create an app in the projects->react-app folder

I used nvm to install node and then npx to create a sample react app

Then

And the app is launched onto my local machine browser at port 3000.

Now I can just make changes directly in the IDE and they will be reflected on my local browser but persisted on the remote vm.

And voila! You can now code on a powerhouse machine from any laptop or desktop no matter how slow it is.

And thus you have limitless power and potential at your fingertips! Limitless possibilities!

So I only ask on thing — Remember me in your code :)