linogarciavallejo / docker-compose-poc

Docker Compose PoC for a React, NodeJs and MySQL application

Docker Compose: React, Node.js, MySQL

Docker offers a solution with its lightweight containers, enabling the isolation of services from our infrastructure and facilitating the rapid delivery of software. In this repository, I'm demoing the process of dockerizing an example application that utilizes React, Node.js Express, and MySQL, utilizing Docker Compose.

The Usuarios app (Users in Spanish) is a proof of concept (POC) which implements a simple CRUD system that requires three Docker containers:

• React for UI
• Node.js Express for API
• MySQL for database

Versions utilized:

• React 18.2
• Node.js 18.16
• MySQL 5.7
• Docker 24.0.2
• Docker Compose 2.18.1
• Nginx 1.25.0
• React Testing Library 14.0.0

Steps outlined:

• Create SQL Schema file for MySQL including seed data.
• Create Dockerfile for MySQL
• Setup Nodejs App working with MySQL database.
• Create Dockerfile for Nodejs App.
• Setup React App.
• Create Dockerfile for React App.
• Write Docker Compose configurations in YAML file.
• Set Environment variables in .env file for Docker Compose
• Run Docker Compose

Environment variables:

MYSQLDB_USER=root
MYSQLDB_ROOT_PASSWORD=misha
MYSQLDB_DATABASE=usuarios
MYSQLDB_LOCAL_PORT=3307
MYSQLDB_DOCKER_PORT=3306

NODE_LOCAL_PORT=6868
NODE_DOCKER_PORT=8080

CLIENT_ORIGIN=http://127.0.0.1:8081
CLIENT_API_BASE_URL=http://127.0.0.1:6868/api

REACT_LOCAL_PORT=8081
REACT_DOCKER_PORT=80

REACT_APP_API_BASE_URL=http://localhost:6868/api

Build the POC:

It's quite easy to run the POC through the command line:

docker-compose up -d --build

The --build option is for building Docker images before starting containers.

You can also watch in your terminal what's happening behind the scenes if you use the command:

docker-compose up --build

Stop the POC:

Stopping all the running containers is very simple with a single command:

docker-compose down

If you prefer to stop and remove all containers, networks, and all images used by any service defined in the docker-compose.yml file, use the command:

docker-compose down --rmi all

You're ready to run the POC:

You will be able to see the React frontend app:

You can play with the NodeJS backend API either through the browser or with Postman:

And you can see the Docker containers and images as well: