Build a docker image

Introduction

In this blog, I would like to write about docker image and docker container. Recently, I tried to make some docker containers and images and I also researched about how docker works and why it is better than the Virtual Machine. Basically, docker containers are lightweight. They only include the necessary dependencies and libraries required to run a specific application, while VMs need to run an entire guest OS, which consumes more resources.

About Docker

Docker can be described as an open-source platform which allows to automate the deployment, scaling by using the concept of containerization. It simplifies the process of packaging applications and the dependencies into containers, making it easier to develop, deploy and scale applications across different environments.

Now, let's learn about some of the components of the Docker!

Docker Image

A docker image works like a read only blueprint which is used to create Docker containers. The image is build using the instructions specified in the Dockerfile which is a simple text document.

Docker Container

A docker container is a running instance of the docker image. Containers are isolated and lightweight, sharing the host machine's kernel but having their own isolated filesystem and network. They can be created, started, stopped, and deleted using Docker commands.

Prerequisites

• Download and install Docker
  • https://docs.docker.com/get-docker/ - Refer to this link for installing and setting up the Docker on the appropriate platform

Let's containerize a React application!

For this blog, I am going to create a simple react application and then containerize the react application.

Create a Dockerfile

Add a Dockerfile in the root directory and the add the following contents

FROM node:18-alpine
WORKDIR /sample-app
COPY ./package*.json .
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

In this Dockerfile, we use the official Node.js runtime as the base image, copy the package.json and package-lock.json to the container, install the dependencies, copy the entire React app into the container, build the app for production, expose the port 3000 and then start the application with the npm start command.

Build the docker image

Since our Dockerfile is ready, we can build our Docker image. In the terminal or command prompt, navigate to the directory which contains Dockerfile and run the command given below.

$ docker build -t sample-react-image .

The -t flag tags our image with a name, allowing to reference it.

Run the docker container

Since, we have built our docker image, we can run a container by using the following command

$ docker run -p 3000:3000 sample-react-image

The -p flag maps port 3000 from the container to port 3000 on our local machine

Access the React Application:

You can access the react application from http://localhost:3000/

As you can see that our application is running on the port 3000!

You can also check docker desktop to see that the container is running successfully on the port 3000.

Conclusion

In this blog post, we explored the process of Dockerizing a React application. We started by setting up a basic Dockerfile, which serves as a blueprint of the environment and instructions to build our container. Dockerizing our React application provided numerous benefits. Docker's containerization allowed for better resource utilization, enabling multiple applications to run on the same machine without conflicts. Scalability became more manageable, and deploying updates became a matter of swapping out containers rather than complex server configurations. I hope this blog post has been a helpful guide for Dockerizing your React application.

Happy Dockerizing!