In this lesson, we're going to use Visual Studio Code's Remote Development Extensions Pack to set up a remote development environment with a server. We'll cover how to connect, how to set up an SSH alias, and how to use forwarded ports to run local servers seamlessly.

Set Up Remote Development in Visual Studio Code

Radhika Morabia: [0:00] Let's start by going to the extensions tab on the left, and searching for the Remote Development Extensions Pack. We can see that this is an extension pack that allows us to open any folder in a container, on a remote machine, or in WSL, and take full advantage of VS Code's feature set.

[0:14] Once it's done installing, we'll see this monitor here on the left that says, "Remote-SSH." Once we click into that, we'll see that the connections tab is empty, and says, "No SSH hosts have been configured yet." Let's click here to configure an SSH host.

[0:28] We'll be presented with a list of options. I recommend choosing whatever comes first. In this case, it's home Radhika. If we choose ETC, that would be my whole computer. Whatever it is for your computer, just choose whatever comes first. As you can see, I have this little template set up here. If yours doesn't include a template, feel free to just write along.

[0:47] We start with the host. This is going to be whatever name that you can recognize. In my case, I'm going to call mine egghead. You can call it work, fun, Web, whatever your project name is, whatever you want to call it.

[0:57] For HostName, this is going to be the exact URL of your server. In my case, since it's the AWS server, I have this very long URL. User is whatever username that you use to connect to the server. In my case, mine is ubuntu. Port, whatever your server defines it to be. Mine is 22.

[1:13] Now, IdentifyFile's a bit complicated. You might have a password instead. In which case, go ahead and do that. IdentifyFile is if yours includes a PEM key, which AWS does for me. I am going to link up my egghead PEM.

[1:27] Now, once this is all filled out, you'll see that we have this connection on the left here that says, "Egghead." Now, we can feel free to try and connect to our server. If we right-click here, we can connect to host in current window. Then VSC is going to reload. Once it does, we'll see in the corner here that it's going to connect to the SSH server.

[1:46] We can see it's setting up SSH Host egghead here. Now, our terminal is starting. We have our ubuntu server's bash. Again, this is not our local computer's bash anymore. This is my AWS server's bash.

[1:59] We can see here that there's no folder opened, and it's not detecting any folders. Clearly, there are folders here. If we run an LS, we can see that there's an egghead folder right here. Now, if we click open folder, we can see that egghead folder right here.

[2:12] We're going to need to click on that, press OK, and VS Code will restart again. It won't need to restart every time it opens a new file, but in order to define its route folder, it will need to restart, and go into that place in the server. Now, if I click around these files, it runs perfectly fine with very little lag, and VS Code doesn't need to restart every single time.

[2:33] Let's try running our Gatsby website. Over here, if we type in Gatsby serve, we'll see that it says, "Gatsby serve running at localhost 9000." Now, if we click on this, we would expect it to run normally.

[2:44] Instead, it says, "Unable to connect." This is happening because it's on running on our remote computer, rather than our local computer. Our local computer has no way to detect that local host 9000 even exists. Luckily, VS Code includes a solution for this.

[2:59] If we go back to Remote-SSH here, we'll see this second tab called Forwarded Ports. It says, "No ports are being forwarded from egghead." If we click forward a port, we can type in the port number that we want to forward. In this case, it's 9000.

[3:11] We can give it a human readable name.

[3:12] In this case, we want to serve up our Gatsby website. Let's just call it Gatsby. Now, it will say that it's setting up the port forwarding. Then it should say that the port is forwarded. Now, if we click on this again, we can see that our Gatsby website loads up perfectly fine.

[3:29] Let's recap what we did today. We setup the Remote-SSH extension here. We setup our first SSH alias to our remote server. In this case, it's egghead. If you want to add more, there's clearly space for multiple connections based on our SSH.config file here.

[3:44] We also connected to a folder. Now, when you connect to this specific folder, it doesn't need to go through the process twice. It will immediately connect to that egghead folder that we want. We also setup forwarded ports. We enabled ourselves to forward a port that is loaded up from the remote server to our local computer.

Set Up Remote Development in Visual Studio Code

Share this video with your friends