As a frontend developer, learning to use Docker will help simplify the process of building, testing, and deploying your web applications.

It's a valuable skill in today's job market. Adding Docker to your toolset can make you stand out to potential employers. Demonstrating proficiency in Docker will also highlight your ability to collaborate with backend developers, who often use Docker.

In this article, I'll review some essential Docker commands that every frontend developer should know.

If you want to follow along with a real example, clone this GitHub repository, which contains code for a simple React app built using Vite.

In the example repo, the Dockerfile instructs Docker to build and run the React app as a static site using NGINX.

Let's get started!

1) docker build

The first command that every frontend developer should know is docker build. This command is used to build a Docker image from a Dockerfile. A Dockerfile is a script that contains instructions for building the image.

The syntax for the docker build command is:

docker build -t [image_name] [path/to/dockerfile]

To use our example, cd into the project root directory (which is where the Dockerfile exists) and run the following command:

docker build -t my-app:v1 .

The -t argument is the short form of the -tag argument and allows you to specify a name and optional tag (the part following the colon) for the image.

Tags are usually used to distinguish the versions of the image. If you leave out a tag (e.g. if you were to just run docker build -t my-app, the image would be automatically given the tag of "latest").

2) docker images

To list all the docker images that have been built locally, you'd use the docker images command.

If you run this, you should see the my-app image listed. Note that docker images is equivalent to the command docker image ls

3) docker run

Once you've built an image, how do you run it? You'd use the docker run command. The syntax for the docker run command is:

docker run -p <host_port>:<container_port> [image_name]

For example, if you want to start the container for the image tagged "my-app:v1" and access it on port 80, you would run:

docker run -p 80:80 my-app:v1

This example assumes that the Dockerfile exposes the app on port 80. To map to a different host port, specify a different number for the first part of the -p argument.

If you run this command, you'll notice that your terminal window becomes locked to the running process. If you want to run the container in the background, add the -d argument like this:

docker run -d -p 80:80 my-app:v1

The command will return the container id and hand you back control of the terminal window.

When you run a container, Docker will assign it a random name like "happy-einstein". You can specify your own name by including the --name argument.

For example, we could give the container running the my-app image the name "vite-app" like this:

docker run -d -p 80:80 --name vite-app my-app:v1

4) docker ps

To list all the currently running containers, run

docker ps

If you've followed along so far, you should see the my-app container listed, along with its container id and image name.

5) docker start/stop

To start or stop a container, the syntax is:

docker start|stop <container_name> (or <container_id>)

So to stop our custom-named container, let's run:

docker stop vite-app

To start it again, you'd run:

docker start vite-app

Tip: Once the container has stopped running, it'll no longer appear in the list of running containers (docker ps). But you can still see it listed if you run this command which shows all containers whether they're running or stopped:

docker ps --all

6) docker logs

Using the docker logs command, you can view the logs from a running container. The syntax is:

docker logs [container_name]

For example, to view the logs from the container we named "vite-app", run the following command:

docker logs vite-app

This command helps debug any start-up issues or exceptions thrown in the container.

7) docker exec

Another helpful command is docker exec. This command allows you to run commands in an already-running container.

The syntax for the docker exec command is:

docker exec -it [container_name] [command_to_run]

For example, if you want to open a shell inside the "vite-app" container, run:

docker exec -it vite-app sh

Tip: To exit the interactive shell, type 'exit'.

8) docker login

Once you've built an image for your app and tested it runs successfully, how do you share it with your team or deploy it to a cloud provider? To do that, you need a container registry.

Docker Hub is a public container registry, meaning anyone can access and download the images stored on it unless the user makes the repository private.

Other cloud providers such as AWS, Azure, and GCP provide private container registries allowing users to store and manage their images.

To login to Docker Hub (assuming you have an account), you would use the command:

docker login -u <username>

The major cloud providers usually provide their own cli for accessing their container registries, so check their documentation for further details.

9) docker push

To push an image to Docker Hub, use the docker push command. The syntax is:

docker push <username>/<image_name>

Note that Docker Hub assumes you have named your image in the format of your Docker Hub username, followed by / and then a unique image name.

A standard convention when building Docker images is:

docker build -t <username>/<image_name>:<tag_name>

For instance, if I were building the example image for my Docker Hub account, I would use something like :

docker build -t matttburrellnet/vite-app:v1

Docker Hub would automatically tag my image named "vite-app" as "v1".

10) docker pull

Once you've logged in to a container registry, you can pull existing images using the docker pull command:

docker pull mattburrellnet/vite-app:v1

If you've used Git, then the push and pull functionality should sound familiar.

Learning these essential Docker commands can improve your productivity and employability as a frontend developer. Docker ensures your apps run consistently across environments and cloud providers, saving you time and effort.

Additionally, being skilled in Docker helps you collaborate with other developers on your team. If you haven't already, I recommend experimenting with Docker. It'll be well worth the investment.

Good luck!