Docker for Frontend Developers

You might have encountered situations where a frontend app worked on your machine but not on others. The most likely causes of these issues are differences in node version, operating system, incorrect configuration, or build steps.

These issues are likely symptoms of a lack of standardized development, packaging, and deployment process. They can have a profound impact on your products and customers. If you see these issues happening, then actions should be taken to bring standardization.

Containers are a widely adopted way to package application code and the necessary dependencies. Docker is a popular container engine and runtime. Using docker, you can:

Codify instructions on how to build and package your application as a Dockerfile
Build and package your application as a Docker Image
Publish Docker Image to a Docker Image repository
Launch and run your application from a Docker Image

Here is a glossary of terms related to Docker:

A docker image is similar to a zip file that contains application code and/or executables. We create new Docker images by using existing Docker images as a base.
A Dockerfile contains instructions on how to build a Docker image.
A container is a running instance of a docker image.
Docker is a containerization platform, and runtime used to build, deploy and run containers.
Docker Hub is a public Docker image repository.
Kubernetes is a platform for running and managing containers from many container runtimes.

Docker vs npm

Docker and npm are both tools for building and running applications.

Docker is a tool for building and running containers, whereas npm is for building and running JavaScript applications.

Docker vs npm

Here is a comparison of Docker and npm:

Comparision of npm and Docker commands

Docker Architecture

Docker is a client-server architecture. The Docker client talks to the Docker daemon, which does the heavy lifting of building, running, and distributing your Docker containers. The Docker client and daemon can run on the same system, or you can connect a Docker client to a remote Docker daemon.

The Docker Docs are a great resource to learn more about Docker architecture.

Docker architecture

Hello World Docker

To see Docker in action, let’s run a hello-world Docker Image.

docker run hello-world

This will pull the hello-world Docker Image from Docker Hub and run it as a container. You can execute the above command multiple times to create multiple containers.

Hands-on Docker with React

In this section, you will learn how to standardize a React app’s development, packaging, and deployment process using Docker.

You will need to install Docker Desktop to follow along.

Generate a new React app using create-react-app.

Dockerfile

Create a Dockerfile in the root directory of the project with the following content:

FROM node:16-bullseye
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
CMD \["npm", "run", "start"\]

This dockerfile builds a Docker Image based on the node:16-bullseye Docker Image.

First, it copies the package.json and package-lock.json files to the Docker Image. Then it runs npm install to install the dependencies.

Next, it copies the rest of the files to the Docker Image. Finally, it runs npm run build to build the React app.

The CMD instruction specifies the command to run when the Docker Image is run as a container. In this case, it runs npm run start to start the React app.

Build Docker Image

To build a Docker Image for your React app, use the following command:

docker build -t <docker-username>/my-react-app .

Run Docker Image

After building the Docker Image, run it using the following command:

docker run -p 3000:3000 <docker-username>/my-react-app

This will run the Docker Image as a container and expose port 3000 of the container to port 3000 of the host machine.

You can stop the container anytime by using Ctrl+C.

Stop and Remove Docker Containers

To clean up, stop and remove all running containers using the following commands:

docker stop $(docker ps -a -q) docker rm $(docker ps -a -q)

Publish Docker Image to Docker Hub

Publish your Docker Image to Docker Hub using the following commands:

docker login docker tag my-app <docker-username>/my-app docker push <docker-username>/my-app

You might have a private Docker Image repository like Google Container Registry or Amazon Elastic Container Registry. Publishing Docker Images to a private Docker Image repository is similar to Docker Hub.

Next Steps

Docker enables you to build and run your front-end applications in a standardized way. Here are some resources to learn more about Docker: