Building React applications using multi-part Docker containers

For web development building and deploying client side JavaScript applications can be difficult using your current tooling. This article will explain how to simplify the build and deployment of JavaScript client applications using Docker and multi-part containers.

Creating and deploying JavaScript applications used to be a complicated process. Working at a predominately a Java software house our build infrastructure was for building Java applications. So a natural tool to use to build client side JavaScript applications was Gradle using a node/yarn plugin. This would download the version of node required then have to ability to invoke the build. The output from the build, a collection of JavaScript bundles, would then be hosted in a lightweight Java Web Server, like Jetty. This seemed like a good approach to deploying applications but the build would be slow and the resources to deploy the application weren’t efficient in terms of resources.

Using a container can greatly simplify the build but it was difficult as you would need a container to build bundles and another container for the server to host the bundles.

Multi-part containers make this easier as they allow this to be defined in one file and have simple syntax to use the output from one part in the other part of the container.

# Stage 1 - the build process
FROM node:9.11 as build-deps
COPY . /app
WORKDIR /app/
RUN cd /app && \
    yarn install && \
    yarn build
# Stage 2 - the production environment
FROM andyianriley/static-express-server:latest
COPY --from=build-deps /app/build /server/static
EXPOSE 8080
CMD ["yarn", "start"]

Here you can see the code is built using a basic node image. The output from this build is then referenced in the second part of the dockerfile. The second part of the container is using a express server as a base image to serve the static JavaScript bundles.

The source for a sample react application using this build can be viewed at https://github.com/andyianriley/multi-part-build-react-app.

Follow me on twitter @andyianriley
or see andyianriley @ linkedin.