Dealing with React And Docker Desktop
It was a pleasant journey for me. My manager told me, "Please integrate our React project with Docker Desktop. I wondered to myself, there are tons of samples over the web…mmmm… it’s not a big deal…”
Ok, long story short, a happy scenario always works fine, but Windows is another story :-)
In this article (my very first, BTW), I’ll explain how to deal with a React project, which contains environment variables, integration with many APIs, Azure AD, and all those excellent features running on a Windows PC.
Prerequisites
1. Make sure that “Docker for Desktop” is already installed on your PC. If not, Download it from here: https://www.docker.com/products/docker-desktop/
2. Familiarize yourself with the Docker / K8s concept and K8s terms such as volume, environments variables, deployments, docker-compose, and more.
Powershell basic commands
These are the three major commands that we need to know:
1. ‘build image’
2. ‘run container’
3. ‘kill container’
Step by Step
Congratulations! I’ve finished the first stage of my React project, and I’m ready to deploy it into my local docker desktop.
Let’s build our first image:
‘docker build -t react-image .’ (with the dot at the end)
react-image is our image name
To check if the image was created successfully, you should run the following command:
‘docker image ls.’
Was the image created successfully? Great! Let’s run our new container:
‘docker run -d -p 3000:3000 — name react-app react-image’
react-app is our container name
react-image is our image name
-p 3000:3000 is a mapping between the NodeJs port in our local machine and the container port that the user should put in the URL: http://localhost:3000
To check if the container was created successfully, you should run the following command:
‘docker ps’
Have you changed something in your code? Kill the container, and build it again. How to kill?
‘docker rm react-app -f’
react-app is our container name
Advanced Powershell command:
Let’s open the command line as a bash mode with this command:
‘docker exec -it react-app bash’
GET THE CONTAINER’S FOLDERS: ‘ls’
GET INTO FOLDERS (with bash): ‘cd src’
src: is a sample folder. You can choose any other folder from the list.
GET INTO FILE (with bash): ‘cat App.js’
App.js: is a sample file. You can choose any other file from the list.
EXIT FROM THE CONTAINER: ‘exit’
Hot-reload
So far, so good, up until now, we have been discussing how to create an image and running container, and it works well, but, As a frontend developer, you’re looking for the significant ‘dev-time’ feature called ‘Hot-reload.’ What do you need to do to get this?
How to get the Hot-reload mechanism when you’re working with Docker Desktop:
First approach:
‘docker run -e WATCHPACK_POLLING=true -d -p 3000:3000 — name react-app react-image’
${pwd} = root folder
This command means ‘${pwd}\src:/app/src’ we’re mapping the react project folder with the container folder that we defined in the docker file, for example: ‘/app’
In Windows, we need to add ‘-e’ for the environment tag after the ‘run’:
WATCHPACK_POLLING=true
Second approach:
If it still doesn’t work, remove this -e value and change the package.json
From => “start”: “react-scripts start”
To => “start”: “WATCHPACK_POLLING=true react-scripts start”,
And then enter this command:
‘docker run -v ${pwd}\src:/app/src -d -p 3000:3000 — name react-app react-image’
Bind mounts by default is a two-way binding, so if you create a file from the container itself, it’ll be created in the local folder machine, also For example, command: ‘touch hello’ => create a new file in the container To prevent this issue, we need to create our local container as a ReadOnly We’ll add the ‘:ro’ command like that:
‘docker run -v ${pwd}\src:/app/src:ro -d -p 3000:3000 — name react-app react-image’
OR
‘docker run -e WATCHPACK_POLLING=true -d -p 3000:3000 — name react-app react-image’
Environment variables
The first option — Based on the Dockerfile:
Let’s add this row to our Dockerfile
‘ENV REACT_APP_ID=91d56457–609d-49o2-a140–520b6017d73d’
Basically, it works, but it isn’t a good practice
The second option — Based on .env file:
Create ‘.env’ file (under the root folder)
In the ‘run’ command, add the path to the .env file:
‘docker run -e WATCHPACK_POLLING=true — env-file ./.env -v ${pwd}\src:/app/src -d -p 3000:3000 — name react-app react-image’
Build React App
In the end, as developers, we’re looking for a flexible development environment on the one hand. But on the other hand, if our local machine simulates a real Dev or Stage environment, it’ll be a big advantage for us.
If so, based on our Dockerfile, we can set an ARG variable as a part of the build command. In this scenario, we could work with or without React build folder.
Here is a simple Docker file:
Here is the BUILD command line:
‘docker build — build-arg BUILD_JS=true -t react-image .’
Let’s explain:
- Define an ARG called BUILD_JS (this arg will get his value from the command)
- COPY . . copy all our directories before the build executions. Otherwise, we’ll get an error (index.html not found)
- If statement: If our BUILD_JS ARG is equal to true, then run the ‘npm run build’ command
Here is the BUILD command line:
‘docker run -e WATCHPACK_POLLING=true — env-file ./.env -v ${pwd}\src:/app/src -d -p 3000:80 — name react-sc-app react-sc-image’
Hopefully, this article will help you when planning to deal with React JS applications and Docker Desktop as a part of complete AKS solutions.
Feel free to reach me for any questions or more insights about this article
Tal Orlinsky R&D Manager @ JusteatTakeaway
—
Just Eat Takeaway.com is hiring! Want to come work with us? Apply today.
