Tutorial: Create a Docker app with Visual Studio Code

Article
04/12/2023

This tutorial is the beginning of a four-part series introducing Docker for use with Visual Studio Code (VS Code). You'll learn to create and run Docker containers, persist data, and manage multiple containers with Docker Compose.

VS Code offers a Docker extension that lets you work with a local Docker Desktop service. Docker Desktop runs on your computer and manages your local containers, which are compact virtualized environments that provide a platform for building and running apps. Containers don't require the size and overhead of a complete operating system.

In this first tutorial, you learn how to:

Create a Docker container.
Build a container image.
Start an app container.

Prerequisites

Visual Studio Code installed.
Docker VS Code Extension installed.
Docker Desktop configured to use Linux containers.
A Docker Hub account. You can create an account for free.

The tutorial works with Windows 10 or later and Docker Desktop configured to use Linux containers.

Create a container

A container is a process on your computer. It's isolated from all other processes on the host computer. That isolation uses kernel namespaces and control groups.

A container uses an isolated filesystem. This custom filesystem is provided by a container image. The image contains everything needed to run an application, such as all dependencies, configuration, scripts, and binaries. The image also contains other configuration for the container, such as environment variables, a default command to run, and other metadata.

After you install the Docker extension for VS Code, you can work with containers in VS Code. In addition to context menus in the Docker pane, you can select Terminal > New Terminal to open a command-line window. You can also run commands in a Bash window. Unless specified, any command labeled as Bash can run in a Bash window or the VS Code terminal.

Set Docker to Linux container mode. To switch to Linux containers if you are currently set to Windows containers, right-click on the Docker icon in the system tray while Docker Desktop is running, and choose Switch to Linux containers.
In VS Code, select Terminal > New Terminal.
In the terminal window or a Bash window, run this command.
```
docker run -d -p 80:80 docker/getting-started
```
This command contains the following parameters:
- -d Run the container in detached mode, in the background.
- -p 80:80 Map port 80 of the host to port 80 in the container.
- docker/getting-started Specifies the image to use.
Tip

You can combine single character flags to shorten the full command. As an example, the command above could be written as:
```
docker run -dp 80:80 docker/getting-started
```
In VS Code, select the Docker icon on the left to view the Docker extension.

The Docker VS Code Extension shows you the containers running on your computer. You can access container logs and manage container lifecycle, such as stop and remove.

The container name, modest_shockley in this example, is randomly created. Yours will have a different name.
Right-click on docker/getting-started to open a context menu. Select Open in Browser.

Instead, open a browser and enter http://localhost/tutorial/.

You'll see a page, hosted locally, about DockerLabs.
Right-click on docker/getting-started to open a context menu. Select Remove to remove this container.

To remove a container by using the command line, run this command to get its container ID:
```
docker ps
```
Then stop and remove the container:
```
docker stop <container-id>
docker rm <container-id>
```
Refresh your browser. The Getting Started page you saw a moment ago is gone.

Build a container image for the app

This tutorial uses a simple Todo application.

Screenshot shows the sample application with several items added and a text box and button to add new items.

The app allows you to create work items and to mark them as completed or delete them.

In order to build the application, create a Dockerfile. A Dockerfile is a text-based script of instructions that is used to create a container image.

Go to the Docker Getting Started Tutorial repo, and then select Code > Download ZIP. Extract the contents to a local folder.
In VS Code, select File > Open Folder. Navigate to the app folder in the extracted project and open that folder. You should see a file called package.json and two folders called src and spec.
Create a file named Dockerfile in the same folder as the file package.json with the following contents.
```
FROM node:20-alpine
RUN apk add --no-cache python3 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]
```
Note

Be sure that the file has no file extension like .txt.
In the file explorer, on the left in VS Code, right-click the Dockerfile and then select Build Image. Enter getting-started as the tag for the image in the text entry box.

The tag is a friendly name for the image.

To create a container image from the command line, use the following command.
```
docker build -t getting-started .
```
Note

In an external Bash window, go to the app folder that has the Dockerfile to run this command.

You've used the Dockerfile to build a new container image. You might have noticed that many "layers" were downloaded. The Dockerfile starts from the node:20-alpine image. Unless that image was on your computer already, that image needed to be downloaded.

After the image was downloaded, the Dockerfile copies your application and uses yarn to install your application's dependencies. The CMD value in the Dockerfile specifies the default command to run when starting a container from this image.

The . at the end of the docker build command tells that Docker should look for the Dockerfile in the current directory.

Start your app container

Now that you have an image, you can run the application.

To start your container, use the following command.
```
docker run -dp 3000:3000 getting-started
```
The -d parameter indicates that you're running the container in detached mode, in the background. The -p value creates a mapping between the host port 3000 and the container port 3000. Without the port mapping, you wouldn't be able to access the application.
After a few seconds, in VS Code, in the Docker area, under CONTAINERS, right-click getting-started and select Open in Browser. You can instead open your web browser to http://localhost:3000.

You should see the app running.
Add an item or two to test if it works as you expect. You can mark items as complete and remove items. Your frontend is successfully storing items in the backend.

Next steps

You've completed this tutorial and you have a running todo list manager with a few items. You've learned to create container images and run a containerized app.

Keep everything that you've done so far to continue this series of tutorials. Next, try part II of this series:

Update and share a Docker app

Here are some resources that might be useful to you: