Running React app inside a Docker container

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:

1. 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.