Successfully Setting up Visual Studio Code

A Beginner’s Guide to Setting up a SSH Connection & GitHub to VS Code with a little Docker fun!

Edited Adobe Stock Image

If you have found this article, you might be getting started with growing and expanding your knowledge with Visual Studio Code. Believe me switching to a new platform can be frustrating. I am hoping that this article eases the process and helps to get you on the right path.

A little background //

Visual Studio Code often referred to VS Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.

Objective //

• Install Visual Studio Code to your OS
• Create a AWS Ubuntu EC2 & Key-Pair
• Link Ubuntu EC2 to VS Code
• Link GitHub Account to VS Code

To follow along with this project you will need //

• Your own Computer
• Access to AWS
• GitHub Account
• Attention to Details

Install VS Code by visiting this link:

Visual Studio Code - Code Editing. Redefined

After a successful install, you can add Extensions to aid in you in future projects, or at least be helpful to prevent headaches. On the side menu in Visual Studio Code, select the four square image, which will open EXTENSION MARKETPLACE. Install the recommended following:

• Remote-SSH
• Remote Explorer
• Remote Development
• Remote SSH: Editing Configuration Files
• Remote -Tunnels
• WSL

You can always add more extensions when needed, or even extensions that will customize the theme of your VS Code Screen. Possibilities are endless.
Note: We will be using the extensions option to install directly onto our EC2 later on.

Once you are finished head over to Amazon Web Services to create an Ubuntu EC2.

In your AWS Console //

Create a new EC2 Instance from the EC2 Dashboard. If you haven’t create an EC2 or a key-pair before, you can refer to a previous article, and instead of creating a Linux EC2 choose Ubuntu Free Tier, and no need for a custom page. Note: have your SSH/HTTP/HTTPS allowing traffic from your IP. Once you have a successful Ubuntu EC2 Created, I recommend adding termination protection if you plan to continue to use for projects.

Next, we are going to ensure that your EC2 is set up for success by using PowerShell/Terminal to download Docker onto it.

I will be using PowerShell. Once again if you haven’t ssh into a PowerShell before you can refer to my previous article. It is important to note where your key-pair is located on your OS.

ssh into your EC2 //

• Check for updates by running these commands:

sudo apt update

sudo apt upgrade -y

After successfully update & upgrading your EC2 you should be able to install docker by running the command:

sudo install docker

We can verify a couple ways, let’s start with running:

sudo docker version

sudo docker info

or my favorite run:

sudo docker run hello-world

Just think it’s a nice little Hello! Makes me smile.

Awesome job so far! Let’s head back to Visual Studio Code to finish setting up for future projects. When you first open up Visual Studio Code, you will be at a Welcome Page.

Configure your SSH Connection in VS Code //

• Down in the lower left hand corner is to arrows click it. A window will open up at the top of your screen.

• Select Connect to Host
• Next you will have an option of adding a new or Configure SSH.
  Select Configure SSH Host
• Select the drive that says User\[Your User Name]\.ssh\config

You should now see a Configuration Script open. Delete everything and lets add the following script that you can update with your information.

# AWS Instance
Host EC2_Docker
    #IPv4 of the instance it changes everytime
    HostName [ENTER THE EC2 IPv4 Address here]
    User ubuntu
    IdentityFile [ENTER THE PATH OF YOUR .PEM KEY on you OS]

Ctrl +S to save or go to File then Save.

Note: You should now be able to connect to your EC2. Note that every time you close your VS Code after you are connected you will need to reconfigure your EC2 Address. Since your .pem is saved you shouldn’t have to update.

To connect to your EC2 we created and configured to VS Code; once again select the little arrows at the bottom left hand of your screen once again. When the window opens up this time, you can select Host. Now, you will be able to see and select your EC2 you created.

My EC2 is name EC2_Docker

Once you are connected to your EC2, you can add extensions that will be helpful to running your next project directly onto your EC2. You will still have local ones you installed earlier on VS Code. Some Extensions are meant just for remote hosts.

• Docker
• GitLens
• GitHub

We can also connect our GitHub Account refer to documentation:

Collaborate on GitHub

Add a GitHub Repo to your Workspace //

• Create a New Repository in your GitHub Account
• Return back to VS Code
• Select Source Code from left-hand menu
• Use the Clone Repository button in the Source Control view (available when you have no folder open).

• Copy the https from your GitHub Repo

Way to go!! You now have the basics set up and should be ready to tackle a project. Remember to troubleshoot with your team members as you familiarize yourself with VS Code.

Adobe Free Stock Image

Before You Leave Let’s make a Splash with Docker //

If you are feeling set up we can try an exercise together before we part ways today. Let’s play around with creating and naming a Docker Container. In Visual Studio Code, open up a new Terminal, by selecting Terminal from your top menu then choose your repo.

You should see your Ubuntu@ip:~/EC2 Name$ with the cursor ready input.

Let’s create a Docker Container with nginx:

sudo docker container run --publish 80:80 nginx

Next, if you go to your AWS EC2 and copy your Public IPv4 Address into your browser you should see a successful http page running with the Welcome to nginx message.

Note: Anytime you are running a demo project and your instructor refers to LocalHost it will be your EC2’s IPv4 Address.

Return back to VS Code Terminal and run: ctrl +c, you will now disconnect the container.

To fully detach run in the background to open up your terminal to process other commands run:

sudo docker container run --publish 80:80 --detach nginx

sudo docker container ls

To fully stop, you can run the command:

sudo docker container stop 09c8

Note: When stopping you only need enough of the Container ID to be specific, you don’t need the entire ID. As you can see once we ran the stop command, and ls again there is no longer any IDs listed. (ls will only show running containers.)

Fun Fact: Container IDs are autogenerated. However, you can specify a container name. If you don’t specify a name , it will be created for you. If you let the system generate one the name will randomly be generated from an open source list of adjectives and surnames of notable hackers or scientists.

You can see this if we run command:

sudo docker container ls -a

The command to add a name to the container:

sudo docker container run --publish 80:80 --detach --name [ENTER YOUR CUSTOM NAME HERE IN LOWERCASE]

Again, you could create your custom name container and view by running the command ls, and then run the command stop it. I encourage you to experiment and try it out.

Adobe Free Stock Image

Thank you so much for joining me today. Seriously, you deserve a pat on the back! It’s not easy to set everything up. Just remember to take your time, discuss with your team when you run into issues. You are human, and it’s completely fine not to get things right off the bat. The key is to never give up and to keep trying. You got this!!

Tips //

• If you wrote any scripts commit & push them to GitHub
• Once you stop any running containers and are ready to close VS Code, head back to AWS Console to Stop any running EC2s.

Helpful Resources //

Deploying NGINX and NGINX Plus on Docker

Join me on https://www.linkedin.com/in/melissafoster08/ or follow me at https://github.com/mel-foster