First of all, I'm pretty excited since it's my first blog post ever... I hope you would like it
Lately I got a full stack home assignment which was included NodeJS micro services in the backend and React for the front-end.
I created a really nice project using Create React App.
If you don't know Create React App, It's creating in less then 20 seconds React App the works Simply by running the following command
npx create-react-app webapp
Ok, once I got my project, I coded my stuff, which was pretty straight forward using the basic templated. Then I wonder, what will be the easiest way to serve this page.
Remember that I need to submit this home assignment.
Since I already have micro-services I had docker-compose file for the rest of the services, so I was looking how to dockerized my React project.
I'm happy to tell you that it's really easy.
Let's say my project name is webapp.
Create two files under the project root folder
Copy the content into your files accordingly
Lines 1 - 6 are building the image:
- Creating working dir
- Copy all the files besides the one in the
- Installing react-scripts which is using for serving the project
- Running yarn insatll - Get the dependencis
- Yarn run build - Build the project in optimized way
Lines 8-12 are the one used to serve the project.
Note the at we are serving this project in port
Let's build this image just run on the
docker build -t react-webapp .
And run our container
docker run -it -p 8000:80 react-webapp
Once the container is running, you can open http://localhost:8000 and you'll be able to access the React app running inside the Docker container.
For docker-compose you can copy
Now you got a dockerized UI solution in less then 3 minutes.