Visual Studio Code Remote Development

Prerequisites

1. OpenSSH must be installed on Windows.
   1. To test this, open a PowerShell window and type ssh. If you do not see an error, you have OpenSSH installed.
   2. If you see an error, install OpenSSH by following the below:
      1. Install OpenSSH – https://jcutrer.com/windows/install-openssh-on-windows10
      2. Add c:\windows\system32\OpenSSH\ to your system’s PATH environment variable. Here is a handy guide on how to do that: https://www.architectryan.com/2018/03/17/add-to-the-path-on-windows-10/
      3. Restart your computer.
      4. Try step 1.1 again. If you do not see an error, OpenSSH has been successfully installed.

Initial Setup (done only once):

1. Install Visual Studio Code
2. Install this extension: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack
3. Open a PowerShell terminal (from within Windows or VSCode’s terminal, either will work) and type ssh-keygen to generate your SSH key pairs. Just press enter to accept the defaults until it is done.
4. Type cat ~/.ssh/id_rsa.pub and press enter to output your SSH public key to the terminal window. Copy the output into your clipboard – we will paste this later.
   1. Note: The string you copy should start with “ssh-rsa” and end with your device name, e.g. “kevinmabul@Laptop-050”.
5. Login to Cloudways using the credentials stored in LastPass.
6. Select the server where your app is hosted.
7. Select “SSH Public Keys” (fig)
8. Add a new key. Use your name as the label, and then paste in the output we copied from step 4 onto the “SSH Key” field. Save.
9. Go back to Visual Studio Code. Hit F1 and on the prompt type Remote-SSH: Add New SSH Host and then hit enter.
10. Refer to the username and password in the Master Credentials tab on Cloudways for the SSH login. This is in the format of ssh username@ip_address. See this for an example.
11. All subsequent prompts, just hit enter to select the defaults. Also select “Trust Source” when asked.

Opening your app folder

1. Connect to the server by hitting F1 and selecting Connect To SSH Host. Select the host we added during the initial setup.
2. You should see something like this when you have successfully connected to the server (don’t worry if you see an IP address instead).
3. Determine the location/folder of your WordPress project. There are two ways to do this:
   1. From Cloudways – search for your project, select it, and then find the MySQL database name. The database name is also the name of the folder. You should end up with something like xrnuueunme
      1. Your project’s directory will then be: /home/master/applications/<database_name>/public_html/
   2. From WordPress – go to Tools -> Site Health -> Info, and then expand the Directories and Sizes accordion item. The WordPress Directory Location value is what you are looking for.
      1. Your project’s directory will look like: /home/<cloudways-server-node/<database_name>/public_html. This path can be copied directly and used as is on VSCode (in fact the first method’s path is just a symbolic link to this directory).
4. To open the folder, go to File -> Open Folder, and then type in / paste the location you obtained from step 3.
5. Have fun editing!

Troubleshooting

If you are unable to save your file edits, it is most likely related to a permissions issue.

Search for your app within Cloudways and select it, go to the Application Settings tab, and reset the permissions to the master user account.

OpenSSH – bad owner or permissions errors: