Optimise your React.js app’s docker image

Docker is a magical tool to orchestrate your App, your application will work the same way in all machines as your localhost, but dockerizing your application might create a fat docker image related to your app’s different layers, that’s why we’ll see in the coming sections a quick way to optimise your React.js application docker image size.

There are many ways to optimise your application docker image size, one of them is to use the build files and run the app with an Nginx server, so what’s Nginx 🤔

Nginx :

Nginx is a web server that can be used to serve web content, it can also be used as load balancer or a proxy server. In our use-case we’ll use it to serve web content.

Let’s get back to our Docker image :

Now we’ve checked quickly what’s Nginx, it’s time to get back to our docker image, so the first thing is to build your React.js app, if you’re using npm :

npm run build

and if you’re using yarn :

yarn build

This command will generate your app’s build folder in your root project folder. Once it’s done, we can proceed the optimisation with our Dockerfile as below :

As in the “gist” script as above, we used light image of nginx, we copied the build files (html and js files), we exposed the port 80 (so be sure to make this port available), then as the last step we started nginx.

I used this way to go from 1.5 GiB to 43Mb locally, and from 571.03 Mb to 17.04 Mb in AWS ECR registry.

That’s all, your comments are most welcome. Keep shining.