Visual Studio Code Remote Sync to SiteGround Shared Hosting

There are files (e.g. PHP files, config files) I need to maintain at my SiteGround shared hosting. Using FTP, File Manager or SSH into the server and make changes are not idea. I would like to use Visual Studio Code to make changes remotely. How can I do that?

Typically, Visual Studio Code Development on a remote machine is achieved through the use of Remote – SSH extension. Unfortunately, this method does not work against SiteGround Shared Hosting because the SSH server at SiteGround is restricted and does NOT allow SSH Local Port Forwarding, which is a feature used by Remote – SSH to establish communication.

Hope is not lost!

We can utilize SFTP, available with SiteGround, to achieve the same. Well, technically it’s not the same but the results are probably good enough to work with SiteGround. It allows you to modify files using Visual Studio Code and reflect it on SiteGround as soon as you save the files. The idea is to work your code/files in a local folder and through the use of SFTP to auto-sync your modification to a specific folder hosted in SiteGround.

Essentially, the development is done locally but will maintain an exact copy at SiteGround. This works well with PHP, which basically is the only language officially supported by SiteGround for web hosting applications.

Enable SSH connection to SiteGround server

While we still need to use SSH for this alternative, we do not need the Local Port Forwarding capability.

• log in to your SiteGround account
• go to SITE TOOLS of your domain
• go to DEVS > SSH KEYS MANAGER

Take note of the information shown at SSH CREDENTIALS section. It includes the hostname, username and port # to use for the SSH connection.

To enable SSH connection, we need a SSH key pair (public & private keys). If you already have one, that’s great and you can import it by clicking on the IMPORT tab. If not, SiteGround has a convenient feature to generate one for you. Let’s generate one right now:

• enter a key name you like
• enter a password. This is the passphrase you need to provide when establishing the SSH connection.
• click CREATE

Note: The passphrase is mandatory using SiteGround GENERATE feature. If you do not want to use passphrase, you should create your own ssh key pair using tools such as ssh-keygen and then import it instead.

The generation is quick and the new ssh key will be listed as shown:

You would need to keep a copy of the private key locally. So click on Actions > Private Key to get it. You can also limit the IP addresses that are allowed to connect using SSH.

Configure Visual Studio Code

This guide assumes you already have Visual Studio Code installed. So let’s go straight into setting up your VSCode to work with SiteGround.

Creating a working folder

We will first create a new folder locally. This would be the folder where all its files and sub-directories will be synced up with a folder located at your SiteGround server account.

For illustration, I created the local folder as /home/ec2-user/working-folder.

Browse the local folder using Visual Studio Code

• launch Visual Studio Code
• click Open Folder…
• enter full path of your local folder
• click OK

Install SFTP Extension

• click on Extension icon
• type sftp in the search box
• click Install on SFTP created by liximomo

Configure SFTP

• click Explorer icon (top one on the left icon menu)
• press CTRL-SHIFT P
• type sftp on the popup search box
• click on SFTP: Config

It shows you the config file sftp.json with some default settings. By default, files will be synced up when you save the file.

There are several settings you would need to modify:

• name: any name for you to recognize
• host: use value you noted from SiteGround SSH Credentials
• port: use value you noted from SiteGround SSH Credentials
• username: use value you noted from SiteGround SSH Credentials
• remotePath: this is the folder located at SiteGround server where your files will be mirrored to
• privateKeyPath: add this setting and provide the full path pointing to your private key file

Note: remember that your private key file must be set to read only by you.

By default, locally deleted files will not be removed at the remotePath. If you want those files to be removed, add the following setting to the config file:

"syncOption": {
  "delete": true
}

Please note that deleting files at remotePath do not happen automatically, you would need to do Sync Local -> Remote manually.

• press CTRL-SHIFT P
• type sftp sync
• click SFTP: Sync Local -> Remote

This would perform a full sync.

No Such File error

If you encounter this error and the files are not synced up, there is a quick fix for it.

• edit the file ~/.vscode/extensions/liximomo.sftp-1.12.9/node_modules/ssh2-streams/lib/sftp.js
• at line 388, change the line of code from:

if ( code === STATUS_CODE . OK ) {

to

if (code === STATUS_CODE.OK || code === STATUS_CODE.NO_SUCH_FILE) {

• restart Visual Studio Code and you should be good to go.

Note: the path to sftp.js would be ~/.vscode-server instead of ~/.vscode if the local folder is in a remote machine. Yes, you can connect Visual Studio Code to a remote machine (not SiteGround) using SSH – Remote and then establish a local folder sync with SiteGround server using SFTP at the remote machine.

That’s it! You should now be able to enjoy using Visual Studio Code to edit files on SiteGround server remotely.