How do develop on GCP, Azure, Digital Ocean Remote Servers with Webstorm/IntelliJ and Rsync

This image has nothing to do with the below guide, but makes it look fun for developers. Kudos! Image by Pexels

Remote Machines are the new love for developers, and a boon for running heavy tasks. The modern world needs scalable apps with complex ML and AI backend, which takes a toll on our Personal Computers.

My personal motive for moving to remote machines was extensive use of Docker. Those who are familiar with Docker will agree that it takes up a lot of machine space and memory. I’ve seen my Macbook Pro fans blazing at their top speed to run Docker. Things get difficult as the micro-services increase, or when too many projects start stacking up in our local drives.

Remote machines help curb this issue, because they run somewhere in a huge datacenter equipped with top-conditioned air cooling system, so our computers don’t need to take the heavy load, pretty cool huh 😉?.

The IDE used by me is Webstorm by JetBrains, one of the best out there for Javascript lovers, but this guide can also be applied to others such as VSCode, IntelliJ and many more.

Step 1 — Getting a remote machine instance.

Companies like Google, Microsoft, Digital Ocean, (Click on them for links) etc. provide limited free credits to spin up our own virtual machines, which are enough for developers to run their personal/professional projects. Follow the links to get free credits and create a virtual machine with the OS of your choice. My preference has always been Ubuntu OS, whereas it can vary for different people. But it doesn’t really matter because we will be running our applications inside docker containers, which can have their own operating systems.

Once that is setup, try connecting to the remote machine with ssh . It’s important to ensure the connection establishes without any issues to make this work. Make sure to setup a firewall to connect to the machine. Often the firewall is provided with the machine.

Step 2 — Setting up rsync

Webstorm again is a personal preference here, but you can follow this step with any IDE of your choice. Open the project in Webstorm and follow the steps below.

a) Directory Structure

Inside the root directory of your project, create a new directory and let’s call it rsync .

b) Creating rsync shell script

Inside the directory rsync , create a new file and let’s call it rsync.sh . The .sh file extension means it will be a shell script.

Important: Make sure to give executable permissions to the `rsync.sh` file

Put the following lines of code inside that file:

#!/usr/bin/env bash

rsync -avz --delete /absolute/path/to/project/ user@virtual-machine-ip:'/absolute/path/to/project/in/remote/machine'

Now replace the project paths and remote machine IP in the above code so it looks something like this:

#!/usr/bin/env bash

rsync -avz --delete /Users/kamal/dev/myProject/ root@34.xx.xxx.332:'/home/kamal/myProject/'

Details of what this command does can be found out by running rsync --help in either your own command line or in your remote machine. In a nutshell, this will incrementally copy changes in your local machine’s project files to your remote machine’s project files.

c) Exclude non-required files from syncing

Now, the biggest lesson I learnt is to avoid huge project files that we don’t necessary need to sync to the remote machines, like node_modules , and .git files. These can be in thousands, and could take forever to sync to your remote machines. So to make sure they don’t sync, we need an --exclude command. Let’s do this by creating a new file inside the rsync/ directory, and call it .exclude-files for simplicity.

In the .exclude-files file, add the following lines:

.git*
.DS*
error_log
.ht*
node_modules
.idea
cache
docker
rsync/
package-lock.json

The above lines are added acc. to my project requirements. You may change them according to your own needs.

Change the above command as following:

#!/usr/bin/env bash

rsync -avz --delete --exclude-from '/Users/kamal/dev/myProject/rsync/.exclude-files' /Users/kamal/dev/myProject/ root@34.xx.xxx.332:'/home/kamal/myProject/'

Now the base for our rsync is complete. Let’s get it integrated with Webstorm in the next step. P.S. Remember to change the absolute paths acc. to your own setup.

Step 3 — Integrating rsync with Webstorm

This is probably the easiest part. We will leverage Webstorm’s advance FileWatcher. A file watcher can perform many tasks when it gets changes in any files, for example., formatting code, transpiling code, etc. We will ask the file watcher to run our rsync shell script every time there’s a change in our code.

a) Go to File(Webstorm) > Preferences > Tools > File Watchers.

b) Click on the (+) Plus icon at the bottom to add a new File Watcher. In the dropdown, select <custom> . Following screen will appear.

Fill the values as in the screenshot. Make sure to get the correct rsync.sh path for “Program”. Also take care of the checkboxes accordingly. I keep the “Immediate File Synchronization” unchecked so that my code syncs only when I press Cmd+S on my Mac (Ctrl+S on Windows). Click on OK to finish.

c) That’s it. We’re done with the Webstorm configuration. Now any change in your code will reflect on your remote machine within microseconds(depending on your internet bandwidth of course).

Kudos to you coming this far. Please add comments if I missed out some detail in the tutorial or if this doesn’t work for you. Also comment which IDE you got to work with this tutorial.

Thank you. Happy Coding! 😎