{"id":520,"date":"2022-06-24T18:43:00","date_gmt":"2022-06-24T18:43:00","guid":{"rendered":"http:\/\/frontendguruji.com\/?p=520"},"modified":"2022-06-30T12:59:11","modified_gmt":"2022-06-30T12:59:11","slug":"how-to-create-react-app-in-docker-container","status":"publish","type":"post","link":"https:\/\/frontendguruji.com\/blog\/how-to-create-react-app-in-docker-container\/","title":{"rendered":"How to Create React App in Docker Container – React 18, Docker Engine 20.10, Windows 11"},"content":{"rendered":"\n

Hello Friends 🙏, in this tutorial we will create React App in Docker Container and will also configure it for Hot Reloading 🚀.<\/p>\n\n\n\n

What is a Docker<\/h2>\n\n\n\n

Docker is used to package applications into containers, it contains all application source code with the operating system (OS) libraries and dependencies required to run that code in any environment.
🔽Setup Docker on Windows\/Linux: https:\/\/www.docker.com\/<\/a><\/p>\n\n\n\n

Why to use Docker<\/h2>\n\n\n\n

You must have been in a situation in your career where code must be running in your system but not on others system quoting “mere system me to chal raha hai” <\/strong>😁. Well, Docker solves that problem by packing application with all required dependencies in a container which can be easily shared and deployed to any OS running Docker 🔥.<\/p>\n\n\n\n

Overall it improves ✅Development, ✅Deployment and ✅Business Agility<\/p>\n\n\n\n

What’s in this Tutorial<\/h2>\n\n\n\n

In this docker react tutorial, we
– will configure docker in a react project
– will use Node image from Docker cloud
– will modify it by copying our application code
– will create a modified image
– will run the modified image inside the docker
– will access the Docker port from our localhost
– will also implement Hot Reloading so that browser reflects the code changes automatically.<\/p>\n\n\n\n

I am using Windows 11 while writing tutorial, React version is 18 and Docker Engine is 20.10.
You must setup docker on Windows or Mac before proceeding.<\/p>\n\n\n\n

Chalo suru kiya jaye!<\/strong>🍻 Lets start! <\/strong>🕺.<\/p>\n\n\n\n

Setup React App in Docker Container<\/h2>\n\n\n\n

Create React App<\/h3>\n\n\n\n

First thing! create a React app using create-react-app toolkit<\/p>\n\n\n\n

npx create-react-app react-docker<\/pre>\n\n\n\n
Create Dockerfile<\/h3>\n\n\n\n
Now create a dockerfile to define the tasks to be execuited by docker.<\/p>\n\n\n\n
\"create<\/figure>\n\n\n\n
\"create<\/figure>\n\n\n\n
FROM <\/strong>node – fetch node image from docker cloud
WORKDIR <\/strong>\/app – set the docker container root directory
COPY <\/strong>package.json . – copy the package.json to container directory (‘.’ or ‘\/app’)
RUN<\/strong> npm install – install the dependencies of the project in container directory
COPY <\/strong>. . – copy all files from current directory to container directory
EXPOSE <\/strong>3000 – open 3000 port of container
CMD <\/strong>[“npm”, “start”] – start the app in the container <\/p>\n\n\n\n
We need Node image because this React app will be build and served from node server.<\/p>\n\n\n\n
Create .dockerignore<\/h3>\n\n\n\n
Thsi file works exactly same as gitignore file, stopping non required files from getting copied to container directory.<\/p>\n\n\n\n
\"create<\/figure>\n\n\n\n
\"create<\/figure>\n\n\n\n
Build the project image<\/h3>\n\n\n\n
docker build -t react-image<\/pre>\n\n\n\n
\"create<\/figure>\n\n\n\n
Verify the files copied in Docker container<\/h3>\n\n\n\n
Check if correct files are getting copied to the docker container<\/p>\n\n\n\n
docker exec -it react-app bash<\/pre>\n\n\n\n
\"create<\/figure>\n\n\n\n
Run the project image<\/h3>\n\n\n\n
docker run -d -p 3000:3000 --name react-app react-image<\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
-d<\/strong> – running the container in background
-p<\/strong> 3000:3000 – this is to connect port of the local machine to docker container port, so that localmachine can access project running inside docker.
–name<\/strong> react-app – define name of the app
react-image<\/strong> – name of the project image created earlier<\/p>\n\n\n\n
Verify the image<\/h3>\n\n\n\n
Now verify if image is created successfully<\/p>\n\n\n\n
docker image ls<\/pre>\n\n\n\n
\"create<\/figure>\n\n\n\n
Verify project in browser<\/h3>\n\n\n\n
\"create<\/figure>\n\n\n\n
Activate Hot Reloading<\/h3>\n\n\n\n
Kill the already running container<\/p>\n\n\n\n
docker rm reactapp -f<\/pre>\n\n\n\n
Now add -v<\/strong> flag for volume bind mount<\/strong> in docker run command<\/p>\n\n\n\n
\"create<\/figure>\n\n\n\n
dirlocaldirectory<\/strong> is the local directory path – this  is full path of the directory
containerdirectory<\/strong> is the directory path of container<\/p>\n\n\n\n
Get full path of directory<\/strong> – right click on the left panel in Visualstudio and select Copy Path<\/strong><\/p>\n\n\n\n
\"create<\/figure>\n\n\n\n
run the project image<\/p>\n\n\n\n
docker run -v <path to src folder>:\/app\/src -d -p 3000:3000 --name react-app react-image<\/pre>\n\n\n\n
\"create<\/figure>\n\n\n\n
Now Hot Reloading will start working.😎<\/p>\n\n\n\n
<\/p>\n\n\n\n
Docker Hot Reload not Working?<\/h3>\n\n\n\n
🔥To fix docker hot reload react not working in windows, pass below environment variable using -e flag <\/p>\n\n\n\n
WATCHPACK_POLLING=true<\/pre>\n\n\n\n
docker run -e WATCHPACK_POLLING=true -v <path to src folder>:\/app\/src -d -p 3000:3000 --name react-app react-image<\/pre>\n\n\n\n
\"create<\/figure>\n\n\n\n
Tada!… we have completed create react app in docker container tutorial. Any query, please do ask in comments!<\/p>\n\n\n\n
Checkout the code here.<\/a><\/strong><\/p>\n\n\n\n
Thanks 🙏<\/p>\n\n\n\n
Do you know how to setup a React project from Scratch without using create-react-app? Check this tutorial<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Create React App in Docker Container with Hot reloading in Windows machine.<\/p>\n","protected":false},"author":1,"featured_media":546,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"categories":[4],"tags":[29,84,13],"_links":{"self":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/520"}],"collection":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/comments?post=520"}],"version-history":[{"count":0,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/520\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media\/546"}],"wp:attachment":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media?parent=520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/categories?post=520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/tags?post=520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}