Easy and efficient development on remote servers from anywhere 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.
VS code should be installed(Head over to VS Code website for that). Also SSH access is required to the remote server
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.
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
.vscode folder. The file will contain sample configuration, something like this —
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)
- name — This is the profile name.
- host — This is the Remote Server IP.
- protocol — This is the file transfer protocol. We will not change it’s value
- port — The port on which sftp will happen. This also we’ll not change.
- username — The username on server. This is the username through which SSH access is available.
- 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.
- 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
- 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
- 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
- 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
trueallows to pass passphrase in hidden form when performing any SFTP operation.
- 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)
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.
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.
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.