Create-react-app is a command line tool to help easily get a simple reactjs app started and going. It abstract away the learning curve and complexity of setting up so we dont have to deal with webpack, transpiling, and setting up a basic skeleton.
In this post, we will dockerize a basic app generated from
create-react-app using multi stage build provided by docker to create lean node image based on alpine linux.
npm install -g create-react-app create-react-app testapp cd testapp/ npm start
After the project is scaffolded. Take a look at
In the dockerfile above, first we are building an image based on node of 8.5.0 alpine tag. This image is light weight and has what we needed to build the app. Next, it copy our source into the container and then we start running npm install to download the dependencies. Next, it run npm build, npm build will trigger react-scripts build, react-scripts will output a production optimized build to the ‘build’ folder.
Noticed that there is a second
FROM in the dockerfile. This is the multi-stage build feature. What happens here is that the image building process will start fresh on this new image. Then only the resulting
Build folder from the previous
stage is copied into this new
stage. Next, we simply install
serve which is used to serve the build folder.
Docker multi-stage build is an awesome feature to keep production containers lightweight and fast to pull.