In this guide, I will be walking through the entire process of how to connect remotely on Cloudways with Visual Studio Code (VSC), as well as tweaks I have used to create a clean, simple workflow.
Many developers prefer working in a local development environment such as Wamp, Xamp, or Local by Flywheel. Then to install backup plugins or create manual backups for files and databases and upload/restore them on the live server after each series of changes. While this is still necessary for the first stages of the project, it’s still not the most productive method in case you want to skip the local environment later.
A better approach is combining remote working with a staging environment, such as the one provided by Cloudways, a managed cloud hosting company mainly known as a WordPress hosting platform.
What is a Local Environment?
Instead of using a web hosting company’s server, a local development environment helps you to run your website on your own computer. You can change the configuration without worrying about affecting your live site, as well as build and test your site before publishing it.
What is a Staging Environment?
A staging environment is the last step before something goes into production and is visible on the live site on your server. In web development, it is often necessary to have many environments as this allows various developers and users to work on a project separately without affecting the live site.
What is Visual Studio Code?
Visual Studio Code (also known as VS Code) is a free open-source text editor by Microsoft. Visual Studio Code is available for Windows, Linux, and macOS. Although the editor is relatively lightweight, it includes some powerful features that have made VS Code one of the most popular development environment tools in recent times, and more importantly, it’s free.
Visual Studio Code Remote SSH Extension
The Remote SSH extension for Visual Studio Code, allows you to open a remote folder on any remote machine, virtual machine, or container with a running SSH server and take full advantage of VS Code’s feature set. Once connected to a server, you can interact with files and folders anywhere on the remote filesystem and no source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine. For more details and installation info, visit the Remote SSH docs page.
Working Remotely with Visual Studio Code
Working remotely on your server could definitely save you a lot of time, but working directly on your live site is not recommended. That’s why a staging environment such as the one from Cloudways is very handy because taking away the risks when building something makes the development process much less stressful.
So once you have finished editing your files on your Cloudways staging application thru the VS Code SSH extension, instead of using a backup extension or manually uploading the files on your live website, you can take advantage of the Cloudways Staging Pull and Push features.
The Cloudways Staging Push feature will basically copy the data such as files and database from your staging website to the live production website, while the Cloudways Staging Pull feature will do the opposite, copying the data from the live site to your staging website, and all by a click of a button.
How to Connect Remotely on Cloudways With VSC
01. Install VS Code and the VS Code Remote SSH Extension
You can install the latest version of Visual Studio Code from their official website. The Remote SSH Extension can be installed within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (Ctrl+Shift+X). This will show you a list of the most popular VS Code extensions on the VS Code Marketplace.
02. Create a Cloudways Staging
Go to your Cloudways account and inside the Applications section, pick any of your existing applications ( your existing WordPress sites ) and click on its three vertical dots you see on the right side, and then Clone APP/Create Staging.
This will clone your existing project.
03. Configure the Cloudways Staging
Once created, there are some settings you’ll need to change, otherwise the VS Code extension won’t be able to connect to your server. So on your stagging application, click on the left-side menu on the Application Settings and follow the next steps:
- On SSH Access click Enable
- On Application Access click Enable
- On the Folder field, rename your staging folder into something much easier to recognize ( e.g stagging-project-x ). This also goes for all your apps ( websites ) if you intend to connect through SSH as all your projects folders will have generic names by default.
- Optional: If for some reason you’ll see a notification on VSC that you can’t modify files, go to RESET FILE ( see the above picture ), click on the “reset as” dropdown, and select master. Click the refresh small icon right next to it. This will reset your folder permissions to the master level.
04. Whitelist Your IP
This is also a very important step. Go to any IP check website copy your ipv4 IP and then go back on your Cloudways account, into servers and click on your server. After that go to Server Management and click on Security. On Add IP field paste your IP address and click the “Add” button. Now at the bottom of the page click on the “Save Changes” button.
05. The Cloudways Master Credentials
At the time of writing this article, the master credentials are the only ones that will work with the VS Code SSH extension. Using the app-specific credentials, the extension will fail to connect to your server. To copy the master credentials, you need to go to Server Management and click on Master Credentials. From here you’ll need to copy the server public IP, the master username, and password and paste them inside the VS Code SSH extension.
06. Connect to Your Cloudways Staging Application
Once the VS Code SSH extension is installed, you will notice an indicator on the bottom-left corner of the Status bar. This indicator tells you in which context VS Code is running (local or remote). Clicking on the indicator will bring up a list of Remote extension commands. For more details on this, you can also check the VS Code official website.
07. Open Configuration File
Next click Open Configuration File and select the one located in Users under your username and inside this file paste your Master Credentials I mentioned in the previous step. Your file should look like this ( of course in your file instead of 000.00 number should be your server public IP address and your master username ):
08. Connect to Host
Once it’s done, save the file and try to connect again using the indicator on the bottom left corner and this time instead of selecting Open Configuration File, you should select Connect to Host and click on your public IP from the list. By doing so, it will ask you the password for your master username. If everything is properly configured you should now be connected to your server. Congratulations! 🎉
I hope you found this useful and if so I’ll appreciate if you could share it with others. Thank you!
