Dockerized ReactJS in Development and Production Settings

This document is a guide for creating a react application in production and development environments inside a docker container.

Pre-requisites

1. Node
2. Docker

Check if Node and Docker is installed

1. Check if Node is installed

   1
    $ node --version
   

2. Check if Docker and docker-compose is installed

   1
    $ docker --version && docker-compose --version
   

Create Initial React App

1. Navigate to project directory, or create one if it does not exist.

   1
    $ mkdir todo_client && cd todo_client
   

2. Create react application using create-react-app command. Do not forget the period (.)

   1
    $ npx create-react-app .
   

3. Verify if react app is working. Press ctrl+C to stop running server.

   1
    $ npm run start
   

Create Dockerfiles and docker-compose.yml files

1. Create development and production Dockerfiles

   1
    $ touch Dockerfile.dev && touch Dockerfile.prod
   

2. Edit Dockerfile.dev with the following content:

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
    # Build development
    FROM node:21-alpine
   
    WORKDIR /code/
   
    COPY public/ /code/public
    COPY src/ /code/src
    COPY package.json /code/
   
    RUN npm install
   
    CMD ["npm", "start"]
   

   

3. Edit Dockerfile.prod with the following content:

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
    # Build production
    FROM node:21-alpine
   
    WORKDIR /code/
   
    COPY public/ /code/public
    COPY src/ /code/src
    COPY package.json /code/
   
    RUN npm install
   
    RUN npm run build
    RUN npm install -g serve
   

   

4. Create development and production docker-compose.yml files

   1
    $ touch docker-compose-dev.yml && touch docker-compose-prod.yml
   

5. Edit docker-compose-dev.yml with the following content:

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
    version: '3.8'
   
    services:
      react-app:
        build:
          context: .
          dockerfile: ./Dockerfile.dev
        image: react-dev:latest
        container_name: <project_name>-dev_react
        restart: always
        env_file: .env
        volumes:
          - .:/code
        ports:
          - 3000:3000
        stdin_open: true
        tty: true
   

   

6. Edit docker-compose-prod.yml with the following content:

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
    version: '3.8'
   
    services:
      react-app:
        build:
          context: .
          dockerfile: ./Dockerfile.prod
        image: react-prod:latest
        container_name: todo-prod_react
        restart: always
        command: serve -s build
        env_file: .env
        ports:
          - 3000:3000
        stdin_open: true
        tty: true
   

   

7. Create .dockerignore and .env file

   1
    $ touch .dockerignore && touch .env
   

   

8. Edit .dockerignore file:

    **/node_modules/**
    Dockerfile.dev
    Dockerfile.prod
    .git
    .gitignore
    .dockerignore
    .env
   

   

Build development environment

1. Navigate to the project root directory containing the docker-compose-dev.yml file, and run command:

   1
    $ docker-compose -f docker-compose-dev.yml up --build
   

2. If already container is already built, run container

   1
    $ docker-compose -f docker-compose-dev.yml up
   

3. Navigate to localhost:3000 in your browser to view running application in development mode.

Build production environment

1. Navigate to the project root directory containing the docker-compose-prod.yml file, and run command:

   1
    $ docker-compose -f docker-compose-prod.yml up --build
   

2. If already container is already built, run container

   1
    $ docker-compose -f docker-compose-prod.yml up
   

3. Navigate to localhost:3000 in your browser to view running application in production mode.

Usefull Code Snippets

1
2
3
4
5
6
7
8
9
# Check running containers
$ docker ps

# Enter running container
$ docker exec -it <container_name> bash  # if bash
$ docker exec -it <container_name> /bin/sh  # if shell

# Attach to a container running a server
$ docker attach <id_of_container>

• Previous
  Migrate Existing Wordpress Website to a Docker Container
• Next
  Secure File Transfer Protocol (SFTP) Basic Terminal Commands