Fullstack nodejs reactjs with docker compose

If you have developed an application back to front and want to make automatic deployments, if you are struggling with this part, here I might answer your questions, at least some of them.

To have automatic deployment and secure communication in a seamless way between the backend and the frontend, you can do so with many options and alternatives, one of these is using docker compose, I use it in demos so it can be easily explained.

I made a repository that has all the code explained here so I don't make you bored and just go through the important bits of the code that does the magic, the url to the repository goes here Demo

For the application you can have any kind of frameworks used, but at the end you have a communication between both backend and frontend, this communication if done using RESTful APIs then using http protocol you can transfer data in between, in our case the backend is listening to some endpoints and the frontend is using axios package to send those requests.

Your project directory could be like the following:

Both backend and frontend should contain Dockerfile build and run steps as follows

backend/Dockerfile

FROM node:16.17.0-alpine

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install
# If you are building your code for production
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 9000
CMD [ "npm", "start" ]

frontend/Dockerfile

FROM node:16.17.0-alpine

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install
# If you are building your code for production
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 3000
CMD [ "npm", "start" ]

docker-compose.yml

version: '3.4'
services:
  backend:
    build: ./backend
    container_name: backend
    environment:
      - PORT=9000
    ports:
      - '9000:9000'
    expose:
      - '9000'
    networks:
      - integration
  frontend:
    build: ./frontend
    container_name: frontend
    environment:
      - REACT_APP_BACKEND_URL=http://localhost:9000
    ports:
      - '3000:3000'
    expose:
      - '3000'
    networks:
      - integration
networks:
  integration:
    driver: bridge

To explain what is going on, the dockerfiles builds an image for your code, like a template that can be run at any time and on any platform, the docker-compose makes use of these dockerfiles as follows:

• services: is the services you have, as you can have many, like backend and frontend, each service has the follows

1. build: path to the dockerfile
2. container_name: name of the container to be created
3. environment: environment variables passed into the container
4. expose: port to be exposed to the outside of the container created
5. networks: what network to be used, as docker compose to secure connection between containers, can be taught to create a bridge between containers to communicate through.

• networks: this is how we tell docker compose to create a network bridge to allow the containers to communicate through