Here’s How to Dockerize React App [Containerize React App]

Here’s How to Dockerize React App [Containerize React App]

www.bacancytechnology.com

A few days back, I had to dockerize React app. That was quite challenging because I had to start from scratch to understand React Docker, its prerequisites, installation, advantages, and disadvantages. Finding everything in one place was a real struggle.

And that’s when I thought I’ll indeed write a blog post to lessen fellow React developers’ struggle to deploy a react app in docker containers. Here’s the list of subtopics that we will discuss in detail on how to containerize React app.

Table of Index 1. Prerequisites for Docker 2. Steps to Dockerize React App Project Setup: Create a React App Create Dockerfile for React Ap Add a .dockerignore file Create Docker Image Run the Docker Container 3. Conclusion

Prerequisites for Docker

Installing docker in your system, which we will discuss in the below section.

Creating an account at Docker Hub registry for pushing and pulling the docker images. It’s absolutely free; you can click here for registration.

As the blog focuses on how to dockerize React app, we will need and demo react application. If you have, then it’s excellent, but you can just follow the next section’s steps if you are new at React part.

Steps to Dockerize React App

Project Setup: Create a React App If you haven’t installed create-reactapp, then run the below command-

npm i create-react-app --global

You can choose an existing React application or Create a new React application using this command-

create-react-app demo-react-docker-app

Go to demo-react-docker-app and run the command to make sure it’s working. cd demo-react-docker-app npm start

Create DockerFile for React App Add this file and name it – Dockerfile to your project’s root. # pull the official base image FROM node: alpine # set working direction WORKDIR /app # add `/app/node_modules/.bin` to $PATH

ENV PATH /app/node_modules/.bin:$PATH # install application dependencies COPY package.json ./ COPY package-lock.json ./ RUN npm i

# add app COPY . ./ # start app CMD ["npm", "start"]

Add a .dockerignore file Though it’s not mandatory to have a .dockerignore file, it’s a good practice to add it as it speeds up the build process of Docker image and excludes the unnecessary files.

Here’s the code which you have to add in your .dockerignore file-

node_modules npm-debug.log build .dockerignore **/.git **/.DS_Store **/node_modules

Want to Dockerize your React app enabling hot-reload?

Containerize React app with Docker in 10 minutes.

Build Now

Create a Docker Image After running the Docker build command, you’ll be able to create Docker Image with the help of Dockerfile. I have named my Docker Image as a sample:react-app

, but you can replace it with your choice.

Please keep in mind that a dot must follow the Docker image as it means that the path of the Docker build and Dockerfile is the same. docker build -t sample:react-app .

If you wish to list the images which are generated with your React Application Image, then run the following command-

docker images

Run the Docker Container Moving on towards the last step of how to Dockerize React app.

We have successfully made Docker Image; now follow the below-mentioned command to run your React Demo Application in the Docker Container. Please verify your image name ( here sample:react-app) that you have given.

docker run \ -it \ --rm \ -v ${PWD}:/app \ -v /app/node_modules \ -p 3001:3000 \ -e CHOKIDAR_USEPOLLING=true \ sample:react-app

So, these were the steps to dockerize react app. I hope this blog post has helped and satisfied your requirements. Just follow and run the commands as mentioned above and dockerize react app.

Conclusion I hope you find this tutorial helpful to create React app with docker. If you are struggling or looking for a helping hand to dockerize React app, then lessen your struggle by combining docker and React application with the help of our expert senior React developer. Hire RecatJS developer to containerize React application.

Thank You

www.bacancytechnology.com