A Step by Step Guide for VS Code Remote Development

Photo by Emile Perron on Unspash

A few weeks ago, I came across an interesting article that discussed application development only with the iPad’s OS. At that point, I thought, “So now we can run some code on that little machine?”

After reading it for a few minutes, I assumed that the system was running on the development server remotely and could be accessed by an iPad device. Actually this method is commonly used, especially for those who are using a serverless integration. In the marketplace, many tools provide remote development such as Docker, Kubernetes, or others.

There are many advantages in using this system, one of them is to keep your development environment organized, so that the application library doesn’t affect the local system. I have tried several methods to implement this system and got the key to understand it easily.

Now, I will guide you to set up remote development. First, you must know that we will be using VS Code with a remote extension pack to connect container applications.

VS Code Remote Development extension pack

• Remote — SSH: Connect to any remote machine/VM through SSH
• Remote — Containers: Work with remote container-based application
• Remote — WSL: Run Linux development environment with Windows Subsystem for Linux (WSL)

The Setup

1. Install Remote — Container extension
2. Install Docker extension
3. Make a project
4. Create Dockerfile
5. Build Image
6. Create Container
7. Attach running container to VS Code
8. Enjoy your coding

Extensions Installation

To get started, you need to install two extensions from VS Code. Open “Extensions Tab” then search Remote — Container and install it.

VS Code Remote — Container extension

Next, you need to install the Docker extension

VS Code Docker extension

Making a Project

For this guide, I’m using vue-cli to create an example project — however you can use others.

Creating a project using vue-cli

Image Creation

To be able to create a project image, you need to create a Dockerfile. This file contains the syntax code for creating a custom image.

Dockerfile

According to the Docker Docs, Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. In this section I will tell you how to create a simple Dockerfile, first you need to create a file called Dockerfile to the project root directory. For example, I created that file in a previously created vue project, here the working directory tree.

The project directory tree

Then, you have to define several commands to run the process. The basics of commands are FROM, RUN, USER, EXPOSE, CMD — you can see the docs for all available commands.

• FROM: to define the base image.
• RUN: for executing commands that are available for base image.
• USERS: determine who the user is logged in.
• EXPOSE: allow a port to access the image from the local network.
• CMD: to execute some commands other than RUN.

Build Image

It’s time to build the image from the Dockerfile, to make it easier you can run it using the Command Palette (CTRL + Shift + P) and select “Docker Images: Build Image…” — rest a bit, it will take some time.

VS Code Command Palette

Running a Container

Now open a terminal and create a container based on that image, you can use this command.

docker container create — name [container-name] -p [host-port:container-port] [image-name]

You can change [container-name] with your container name, and [image-name] as your image name, but don’t forget to remove the brackets when running the command. Also, you can customize open ports by changing [host-port:container-port] to the port you want.

After that run your container from the docker or VS Code command. Personally, I recommend using VS Code because it’s easier.

Starting a Container from VS Code Docker extension

Last, attach the running container to Visual Studio Code and enjoy your coding time.

Attach running Container to VS Code

Project workspace on Remote Container

Final Words

Remote development is one of the many things I want to try, because of the many benefits that come with that method. Personally, when I try to implement it it’s hard to understand how it works, but after a lot of trial and error I got the idea to make it easy to understand and wanted to share it with others.

If you have any thoughts or suggestions feel free to comment below.

Thanks for reading!