I started converting my AngularJS AddressBook app into React. Since this is part of a larger project to run all the parts of my app in Docker containers with Docker Compose, I needed to look at how I can run my React app in a container.
For development, using the webpack dev server works well locally. Running this from within a container though requires doing an ‘npm install’ and a ‘npm run build’ inside the container, which probably doesn’t make sense to run every time, as with all the npm dependencies from create-react-app this take some time to run.
The other option is to build the app locally and then just build a container with the webpack output, and serve it with an HTTP server like nginx.
Let’s take a look at each of these options.
The easiest and simplest approach is to build the app locally first, as you normally would:
npm install npm run build
A Dockerfile to build the container using the output from ‘npm run build’ then looks like (using an nginx image as a starting point):
FROM nginx COPY build /usr/share/nginx/html
You build this with:
docker build -t addressbook-react-web-nginx .
And then run with:
docker run -it -p 80:80 addressbook-react-web-nginx
Next up, for a comparison, the Dockerfile to push everything into the image and run with ‘npm run start’ inside the container would look like:
FROM node:6.10-alpine RUN mkdir -p /home/web COPY *.html /home/web/ COPY public /home/web/public/ COPY src /home/web/src/ COPY *.json /home/web/ WORKDIR "/home/web" RUN npm install ENTRYPOINT npm run start
This is starting from one of the official node images. It copies in all the source files, runs npm install and then sets the entrypoint for when the container starts to run the webpack dev server.
An improvement on this approach could be to build an intermediate container with the package.json and npm install already run, and then build new images from this incrementally adding just the changed source files. Plenty of options to explore depending on what you need to do.
Next up, modify my previous docker compose file to include one of these new images containing my React app and now I’ve got all the pieces ready to go.