Here are simple steps on how to create an empty React app, create a production build of the app and run it inside of a Docker container.
Start with creating an new React app:
-
Install create-react-app:
npm install create-react-app --global
2. Create a sample React app:
create-react-app react-docker-app
3. Run the app to make sure all is good:
yarn start
Let’s add a Dockerfile with the following contents to the root folder:
<a href="https://medium.com/media/4fb897a97e4f17c8cb750fbc9111def8/href">https://medium.com/media/4fb897a97e4f17c8cb750fbc9111def8/href</a>
Lines 1–4 are the first stage of the build, where we copy all source code to the container and execute yarn run build to create a production build.
Lines 6–10 are the second stage of the build where we install serve and on line 9 we copy the output from the first stage (from folder /app/build to current folder (/app)). Finally, we run serve to run the app.
To build the image, you can run docker build -t react-docker-app and run it with docker run -dit -p 8080:80 react-docker-app .
At this point, you can navigate to http://localhost:8080 and see the app running there.