How To Use Visual Studio Code for Remote Development using SSH

Introduction

Visual Studio Code is by far one of the best IDE for developers due to its large numbers of plugins, cross-platform, etc. We will be mainly focusing on Remote - SSH plugin for Visual Studio Code that will help us to connect to a remote server/system for application development using our local workstation cool!

There are many reasons why do you want to use this feature in the first place:-

1. You are working on a Linux system & need to develop an application for windows, and you need to test it as well so it would require a windows environment.
2. Your current machine is running out of resources for your projects lets say ML, AI projects, etc.
3. Maybe due to some privacy policy, your client/company wants you to work on their machine/server.
4. Blah Blah… Whatever…

Prerequisites

1. You need to have a local machine having Windows, macOS, or Linux
2. Visual Studio Code
3. Server password, .pem file or SSH key pair generated ( I am using .pem file directly )

PS: I’am demonstrating this using Windows 10.

Step 1: Install Remote-SSH Plugin

Click on the Extensions on the left nav bar of VS Code, type in remote in the search field, and install the Extension you see on the image above, after successful installation you get to see a green icon at the bottom left of your VS Code application (its like two arrows greater than and less than).

Step 2: Configure the Remote-SSH Plugin & Connect to the Server

Now that the plugin has been installed. We need to configure it first to use it, so we need the following ( In case you have .pem file ).

1. Host: it’s pretty much self-explanatory you put a placeholder.
2. HostName: will be the actual hostname of the server, which is either an IP address or a fully qualified domain name.
3. User: you want to use or connect with e.g. ubuntu, etc.
4. IdentityFile: the path to your .pem file or SSH private key. On Mac and Linux systems, you’ll find this in your home directory in a hidden .ssh directory, typically called id_rsa. If you are on Windows, you will have specified a location to save this file when you created it using putty-gen, or you will find it inside C:\Users{USER}.ssh

Now click on that green button on the bottom left of your VS Code application.

On clicking, you will see the following.

Now we need to click on the second option that says Remote-SSH: Open Configuration File…

Now click on the first option ( this should work on windows ).

Follow this configuration in case you have .pem file

Follow this configuration in case you have server password

Host host-alias
    HostName server-ip     \\eg:- 172.0.345.11
    Port server-port       \\eg:- 8002
    User user              \\eg:- ubuntu

You will see something like above; now add your correct credentials/values and save the file.
Now again go to that green button & click on the first option that says Remote-SSH: Connect to Host…
You should see the option with the Host alias that you have entered in the config file ( placeholder/very first value ), simply click on that.

A new VS Code window will open that will ask you about the remote system.

Whether its Linux, Windows, or macOS select the correct type of the remote system

and BOOM you are connected to the remote system.

Also, you can access the file system using the inbuilt terminal of the VS Code cool!

Step 3: Access file system on the server via integrated terminal VS Code

Step 4: Create a new Vue cli app on the server & access it via your local machine

First of all, install Vue cli on the server to use it on the server itself, npm install -g @vue/cli

Check if Vue cli has been installed on the server vue --version

Following command will create a new Vue cli app

vue create sshvueapp

after that it will start creating your app.

Now cd to the folder shown in the picture yours might be different.

In order to open your newly created project inside your VS Code instance, click on File top left corner & click on Open Folder.

Now lets try to run this application on the server & access it via local machine, enter the following command
npm run serve

You will see something like above image.

App running at:

• Local: http://176.9.137.77:8082/
• Network: http://176.9.137.77:8082/

Click on any of the links or put any of the links in the browser URL bar, if you don’t see your app running on the links, your server’s port may be closed you would need to open them in order to see the app running.

NOTE: In case you see something like following (SKIP if you don’t see something like this)

In the above case, you need to replace localhost with the IP address of the server & open port.

You can open port on the Linux server using the following command.

sudo ufw allow 8082/tcp
You need to change 8082 ( port ) according to your configuration.

Happy Coding!!!!