Easy and efficient development on remote servers from anywhere using VS Code

Editing code on remote server using VS Code

In the last three of articles, we saw how we can setup zsh, vim and tmux as well as use them in order to increase our productivity multi fold when working on terminal. While these are good tools, sometimes we have to perform development on local machines which are non Linux based, due to preference or work device constraints and also might not be able to test and commit that code on local machine due to restriction to software installation like git or angular-cli . This causes developers to face complexity while developing application since developing straight on server can sometime feel uneasy.

Enters Visual Studio(VS) Code. It is a powerful, open source IDE from Microsoft which has a rich set of extensions, a powerful IntelliSense for code completion, in built git support and fits smoothly with almost every language and technology.

Prerequisites

VS code should be installed(Head over to VS Code website for that). Also SSH access is required to the remote server

Installing extension

To access the remote servers, we will install an extension called sftp. Open VS Code, head to extensions section, search for sftp extension and install it.

Installing extension

Setting up remote server connection configuration

There are 2 ways to access remote server:-

  • Username and password authentication
  • SSH Key authentication

Depending on the way we can SSH access the server, we will setup the sftp configuration file on the VS Code. For that, first open an empty folder in VS Code, open Command Palette(Ctrl + Shift + P in windows by default) and select SFTP: Config option. This will create a new file sftp.json under .vscode folder. The file will contain sample configuration, something like this —

Initial SFTP configuration

Next we will add connection details as Server IP, username, etc. Below are configuration common to both type of authentication methods.(config name with optional marked are not required to be set)

  1. name — This is the profile name.
  2. host — This is the Remote Server IP.
  3. protocol — This is the file transfer protocol. We will not change it’s value
  4. port — The port on which sftp will happen. This also we’ll not change.
  5. username — The username on server. This is the username through which SSH access is available.
  6. remotePath — This is the directory on the remote server on which we want to work. The username provided in point 5 should have read & write access to this folder and files/folders inside it.
  7. uploadOnSave — This config tells whether any saved changes on VS Code should be automatically uploaded to server or not. If you don’t want to automatically upload saved changes to server, set it as false
  8. ignore (optional)— An array of all files and folders present on remote server that we do not want to sync on local machine and vice versa.

For username and password based authentication, following keys are present

  1. password(optional) — This is the password used to access the server. Note that since the password is written and stored in plaintext, it is not advisable to use it on a shared or work system. It just increases convenience.

For SSH Key based authentication, following keys are present

  1. passphrase(optional) — if you have setup passphrase for SSH key, then you can pass as plaintext(which is convenient but anyone can see password in config) or pass the value as true. Setting value as true allows to pass passphrase in hidden form when performing any SFTP operation.
  2. privateKeyPath — Absolute path of the private key(ppk format) in the local machine.

The sftp.json file should look something like this(depending on your authentication method and values for other parameters, it can look a bit different)

sftp.json configuration example

Once SFTP configuration is completed, save the file. Now we can use the SFTP actions. First action we will use is SFTP: Sync Remote -> Local . This will download all the files in the remote server to the local machine. Once that is completed, we can start our development.

Syncing files in remote server to local machine

If the uploadOnSave config is set as true then as soon as we make changes, they will get uploaded on the server to test and deploy. To manually push the changes, open the command palette and run the command SFTP: Sync Local -> Remote. The process is same as for SFTP: Sync Remote -> Local. Make sure the changes are saved before pushing.

Sync files from local to remote manually

This process makes developing on any remote server easy and convenient. Whatever code changes we make on local machine, they will reflect on remote server.

That’s all for this article. You can check out my website genericfornow.com to connect with me. Let me know what else would you love to learn.

--

--

--

https://genericfornow.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Cuckoo Sandbox Installation Guide

Send BigQuery Query Results to Datadog?

Symfony routes with conditions

Flask Noodle | Instant Project Folder Generator

Flask Logo

Committing to Code

DSP Forms Porting

How to add pagination on Odoo Controller/API

Create your very first Android app from Scratch

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aviral Agrawal

Aviral Agrawal

https://genericfornow.com/

More from Medium

Add and Remove Custom Methods

Lost Server Access — Postmortem

An Amateur Approach to JSON Mock Server and Local Data Storage for API Testing

Create a REST API with Azure Serverless Functions and Node.js