Remote Development with Visual Studio Code on Amazon EC2

Share on facebook
Share on twitter
Share on pinterest

Let’s get you into developing in the cloud! Shall we? Long gone are the days of installing a local XAMPP stack and writing code in Sublime Text. So how do I work now to create WordPress plugins? I’ll teach you to start remote development with Visual Studio Code on Amazon EC2. Why is it good:

  • All your code will exist in an environment that could closely match production.
  • Things are super fast as you get to choose the physical location of the server, keeping the latency low.
  • You’ll be able to work from different machines since all your VS Code workspace settings are stored remotely.
  • You can point a development domain at the server, so no more localhost, dynamic IP by your ISP, or port forward hassles just to show your progress to colleagues.
  • Amazon servers are probably more robust than your computer.
  • Bash commands from tutorials or GitHub will suddenly make way more sense (as you’ll have a terminal).
  • If you are worried about the code not being at your fingertips… Regular automated backups offer a piece of mind (you should be doing that on local development anyway).

Prerequisites

The preparation steps are longer than the actual setup for remote development. I’m assuming you are on Windows 10 and you are somewhat new to all this. Feel free to skip to parts that are relevant to you.

Amazon EC2 instance with OLS AMI

in a previous article, I pointed out that we use an Ubuntu-based Amazon Machine Image for WordPress that features OpenLiteSpeed web server and all other necessary stuff. While the steps pointed out in this article work elsewhere, this is its original environment. Henceforth I’ll assume you already have an Ubuntu server with at least 2GB RAM.

Linux user

You’ll need a non-root but sudo user on the server. DigitalOcean nicely explains how to create one. In a nutshell, the following commands create an example user. As root or prefixed with sudo:

adduser example

Password twice, Enter a bunch of times then Y. After that:

usermod -aG sudo example

Key pair for SSH

One part is the private key that resides in an extensionless or .pem file that has many lines. The client (your SSH software or VS Code itself) uses it to log in, and the server verifies it against its counterpart. That is the shorter, one-line public key, found in a .pub file, that goes into the authorized keys list we initiate like this:

su - example
mkdir .ssh
chmod 700 .ssh
touch .ssh/authorized_keys
chmod 600 .ssh/authorized_keys
ssh-keygen

Smash Enter thrice for that last one. To continue…

cat .ssh/id_rsa.pub >> .ssh/authorized_keys
cat .ssh/id_rsa

That’s it. Now you need to save the content of the private key as a file in Windows 10. Select the whole thing that looks like this:

-----BEGIN RSA PRIVATE KEY-----
...
-----END RSA PRIVATE KEY-----

Copy paste it to a text file and save it as something similar to this:

C:\Users\Example\.ssh\aws-example-user.pem

Name it however you wish. Don’t forget to create the .ssh folder in your profile, the path of which includes the Windows user name.

SSH config file for Visual Studio Code

Create a text file with content similar to this:

# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host aws-ec2
    HostName example.com
    User example
    IdentityFile C:\Users\Example\.ssh\aws-example-user.pem

Save it as an extensionless file called config in the C:\Users\Example\.ssh\ folder, same as above. To explain:

  • Host is just a nice name that will appear in VS Code (window title and connection indicator in the lower-left corner).
  • HostName is the server’s host or IP.
  • User is the username in Ubuntu.
  • IdentityFile is the path to the private key.

Windows 10 OpenSSH client

There is a built-in SSH client, but it’s hidden by default. Search the Start Menu for Manage optional features then click Add a feature. You’ll find OpenSSH Client and click Install.

Windows 10 install OpenSSH Client

Visual Studio Code (Insiders)

If you haven’t already, download VS Code (one of the installers). I chose the Insiders edition which is cutting-edge with frequent updates.

Remote Development Extension Pack

Once you have VS Code, you need to install the Remote Development extension pack as well. After that, you’ll see it came with others that you can happily remove: Remote – Containers and WSL. Those are not needed.

Remote Development with Visual Studio Code

Connect to server

Connect to Host in VS Code

  1. Press the F1 key or click the dark orange button in the corner.
  2. Begin typing the word connect so the auto-suggestion Remote-SSH: Connect to Host… will come up and press Enter
  3. Choose the name you set as Host, such as aws-ec2. VS Code gets this from the extensionless config file you created.
  4. BAM! You are connected. Don’t worry, this happens in a new window… close the old one.

Eventually, the dark orange button will say SSH: aws-ec2. It indicates the connection status. Waiting for this every time I begin working is a small price to pay for being able to develop in the cloud. Remote development with Visual Studio Code is anything but slow. I can’t tell if I’m working locally or not!

Remote Development with Visual Studio Code, connecting to remote host

Create a workspace

You’ll see that in VS Code, you can do the same thing multiple ways.

  1. Reach the Open folder… panel by either from the File menu, from the Start section on the home screen, or hit Ctrl+K and then Ctrl+O. Whenever you see these keyboard shortcuts after one another, it means you should press them in sequence.
  2. Navigate this panel to the WordPress folder (or directly to your plugin/theme you are developing). You can either click around, type or paste the path, such as /var/www/example.com/ then click OK. Yaay, another window!

Finally, see WordPress files loaded in the Explorer on the left.

WordPress Remote Development with Visual Studio Code on Amazon EC2

To create a shortcut to other folders on your server, use the Add Folder to Workspace… feature. I like to have access to the entire WordPress tree in case I want to learn from the core files or inspect other plugins.

Now the only thing left to do is to save this view as a Workspace, so coming back to it is easy.

  1. To open the saving panel, choose File -> Save Workspace As… or hit F1 and type save work.
  2. Save it as /home/example/wp.code-workspace or similar (wp is the project, and example is the home folder of your Ubuntu user).
  3. Close and re-open VS Code, and it’ll automatically load it!

If you have other workspaces and need to switch between them, go to File -> Open Workspace… or F1, type open work and choose what you need from there. I prefer to keep these files outside of WordPress.

Open saved remote workspace in VS Code

Marvel at your creation and start coding

This concludes my tutorial for setting up remote development with Visual Studio Code. I used to work in Cloud9 which is now also owned by Amazon but trust me it’s not this fast and awesome. Initially, it seemed cool as it ran in the browser, but it wasn’t configurable much. If you are reading this, you already know certain benefits of VS Code, and being able to use it remotely is truly a blessing. A huge community of developers is creating extensions that help you tune everything to your liking. Frequent updates have got your back. VS Code seems to be the trendiest editor since 2018, look how rapidly it grows:

Where is your development server?

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Join Our Newsletter!

Get secret tips and valuable details about making your site more successful.

Follow Us!

We Recommend

This site is powered by Elementor

100% Free  WP Website Builder  All-in-One Solution