Dockerize full stack React app

Say you have finished your React project and you want to run it but you don't want to do it locally, what should you do? Your codebase is on github - great! We need to find a different way to publish the project remotely. This is useful if someone wanted to run the service from their machine, here comes Docker - arguably the most useful tool ever created haha jk. We just need to fetch the docker container, run it and we have our service ready .

This is the structure of my app

my-app
|_server
|__client

We need to create separate Dockerfile for client and server app. I also used a postgresql database hence we need to set it up.

In the client, create a file called Dockerfile

FROM node:16

WORKDIR /usr/app

COPY package*.json ./

RUN npm ci -qy
RUN npm run build

COPY . .

EXPOSE 3000

Next step is to build the image and push it to Dockerhub.
Run the following commands

docker build . -t username/my-app-react
docker push username/my-app-react

Navigate to server folder, create another Dockerfile with the following content

FROM node:16
WORKDIR /usr/src/app

COPY package*.json ./

RUN npm ci --only=production
COPY . .
EXPOSE 8800
CMD [ "node", "server.js" ]

Repeat the step to build and push the image

docker build . -t username/my-app-api
docker push username/my-app-api

Now we need a docker-compose file to define and tell docker to launch all the necessary services for our full stack app, including the database.

Navigate to the root directory, in my case it was the server folder, create a docker-compose.yml file, add the following

version: '3.8'
services:
  pgdatabase:
    image: postgres:14.1-alpine
    restart: unless-stopped
    env_file: ./.env.development
    ports:
      - '5432:5432'
    volumes: 
      - db:/var/lib/postgresql/data
  backend:
    depends_on:
      - pgdatabase
    image: "username/my-app-api"
    env_file:
        "./.env.development"
    build:
      context: ./
      dockerfile: ./Dockerfile
    ports:
      - "8800:8800"
  frontend:
    depends_on:
      - backend
    image: "username/my-app-react"
    env_file:
        "./social-app-client/.env"
    build:
      context: ./client
      dockerfile: ./Dockerfile
    ports:
      - "3000:3000"
    links:
      - "backend:be"
volumes: 
  db:

From the server folder, start up docker-compose