Dockerizing a React Project

React+Docker

What is Docker?

Docker is often compared to a virtual machine because of its ability to create a separate virtual instance of your project. Docker is more efficient than a virtual machine because read-only code, such as, supporting systems files (Operating System, Infrastructure code) are shared between each virtualization (in Docker it’s called a container) instance as opposed to having all those supporting files within each separate virtual instance when using the traditional virtual machine method.

Dockerize

To get the benefits of Docker you have to dockerize your project which involves adding some necessary Docker files to get your project to be built on any machine that has Docker installed.

Dockerfile.dev for Development

To specify a Dockerfile that you want Docker to use to build and run the project locally, or in development mode, you can name it

Dockerfile.dev
Dockerfile.dev
  1. get node:13.12.0.-alpine and set it as the base
  2. then set the working directory to /app then create an environment with everything in node_modules folder.
  3. then copy everything in package.json and package-lock.json to the working directory.
  4. then install npm dependencies and install react-script on lines 14 and 16
  5. then add the app to the directory
  6. finally run npm start in the command terminal
docker-compose.yml
docker-compose build
docker-compose up

Dockerfile for Production and Deployment

More often projects are dockerized for deployment purposes. Lots of servers use Docker to serve applications because Docker is really efficient and it saves them lots of space while serving lots of apps.

Dockerfile
Dockerfile
docker build .

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store