DEV Community: Joshua Okoro

Deploying a FullStack application to the cloud using Docker Compose Part 1

Joshua Okoro — Fri, 20 Jun 2025 16:05:14 +0000

Docker Compose facilitates the definition and management of multi-container Docker applications. It makes it easier to run these interconnected services, including a database, frontend, and backend API, by enabling their joint launch and control. Code that describes each service and its dependencies is written in a docker-compose.yml; once specified, a single docker-compose command can launch all services, simplifying the coordination of testing and development environments.

I personally prefer Compose because it is faster, simpler, and more repeatable than manually launching and joining containers, as it means your containers will always run with the same setup as specified in the docker-compose.yml. Also, Compose automatically sets up a Docker network so that your containers may talk to one another, and it controls your Docker storage volumes, automatically reattaching them upon the replacement or restart of a service.

I'll be explaining the steps I took to containerize my full-stack application using Docker Compose

1. CLONE AND SET-UP THE PROJECT'S REPOSITORY
First, clone the repository from GitHub by running this command

git clone https://github.com/ehisakhile/Dream-Vacation-App.git
cd Dream-Vacation-App/

Then open the project in VScode (if that's your preferred IDE)

code .

2. SETUP THE BACKEND AND FRONTEND

MySQL SetUp
Login to your MySQL via the command line

mysql -u root -p

Create the Database

CREATE DATABASE dreamvacations;

Backend SetUp
Change the directory to the backend folder and install all dependencies:

cd backend
npm install

Next, create an environment (.env) file in the backend directory with the following content:

PORT=3001
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=yourdbpassword
DB_NAME=dreamvacations
COUNTRIES_API_BASE_URL=https://restcountries.com/v3.1

Start the server

npm start

Frontend SetUp
Change directory into the frontend folder and install dependencies:

cd ../frontend
npm install

This should be in the .env file for the frontend directory:

PORT=3000
REACT_APP_API_URL=http://localhost:3001

Handle the legacy OpenSSL support by running this command:

export NODE_OPTIONS=--openssl-legacy-provider

After all that is completed, start the frontend:

npm start

Once that is successful, you should be able to access the frontend with the link
http://localhost/3000and the backend
http://localhost/3001/api/destinations
3. DOCKERIZE THE APPLICATION
For this part we will be setting up docker files for the individual directories and docker-compose in the root directory.

Create a file named docker-compose.yml in the root of your project, not inside backend or frontend.

Also create an init.sql file in the root directory (for MySQL database schema)

Docker-Compose file

services:
  # MySQL Database
  mysql:
    image: mysql:8.0
    container_name: dream-vacation-mysql
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: yourdbrootpassword
      MYSQL_DATABASE: dreamvacations
      MYSQL_USER: dreamuser
      MYSQL_PASSWORD: yourdbpassword
    ports:
      - "3307:3306"
    volumes:
      - mysql_data:/var/lib/mysql
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql
    networks:
      - dream-vacation-network
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
      timeout: 20s
      retries: 10

  # Backend Service
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    container_name: dream-vacation-backend
    restart: unless-stopped
    ports:
      - "3001:3001"
    environment:
      - PORT=3001
      - DB_HOST=mysql
      - DB_PORT=3306
      - DB_USER=root
      - DB_PASSWORD=yourdbpassword
      - DB_NAME=dreamvacations
      - COUNTRIES_API_BASE_URL=https://restcountries.com/v3.1
    depends_on:
      mysql:
        condition: service_healthy
    networks:
      - dream-vacation-network
    volumes:
      - ./backend:/app
      - /app/node_modules

  # Frontend Service
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: dream-vacation-frontend
    restart: unless-stopped
    ports:
      - "3000:3000"
    environment:
      - PORT=3000
      - REACT_APP_API_URL=http://localhost:3001
      - NODE_OPTIONS=--openssl-legacy-provider
    depends_on:
      - backend
    networks:
      - dream-vacation-network
    volumes:
      - ./frontend:/app
      - /app/node_modules
    stdin_open: true
    tty: true

volumes:
  mysql_data:

networks:
  dream-vacation-network:
    driver: bridge

The docker compose file defines the specifications for the Frontend, Backend API and MySQL. The Backend runs on port 3001, connected to MySQL. The Frontend will run on port 3000 with full API access. All services communicate via the Docker network.

Data is stored in Docker volumes so it persists even after a restart.

init.sql file

-- Initialize the dreamvacations database
USE dreamvacations;

-- Create the destinations table
CREATE TABLE IF NOT EXISTS destinations (
  id INT AUTO_INCREMENT PRIMARY KEY,
  country VARCHAR(255) NOT NULL,
  capital VARCHAR(255),
  population BIGINT,
  region VARCHAR(255)
);

Next, we create separate DockerFile and .dockerignore files inside the /backend and /frontend directories

Backend DockerFile in backend/DockerFile

# Use Node.js 18 LTS as base image
FROM node:18-alpine

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json (if available)
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Expose the port the app runs on
EXPOSE 3001

# Command to run the application
CMD ["npm", "start"]

.dockerignore file in backend/.dockerignore

node_modules
npm-debug.log
.git
.gitignore
README.md
.env
.nyc_output
coverage
.cache
.DS_Store
.log

Frontend DockerFile in frontend/DockerFile

# Use Node.js 18 LTS as base image
FROM node:18-alpine

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json (if available)
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Set the NODE_OPTIONS environment variable for legacy OpenSSL provider
ENV NODE_OPTIONS=--openssl-legacy-provider

# Expose the port the app runs on
EXPOSE 3000

# Command to run the application
CMD ["npm", "start"]

.dockerignore file in frontend/.dockerignore

node_modules
npm-debug.log
.git
.gitignore
README.md
.env
.nyc_output
coverage
.cache
.DS_Store
*.log

Now we can proceed to build and run the application from docker

docker-compose up --build

Once it builds and runs successfully you can access the
frontend: http://localhost/3000
backend: http://localhost/3001/api/destinations

Conclusion
Utilising Docker Compose provides a powerful and streamlined approach to deploying full-stack applications, offering significant advantages over traditional deployment methods. This is evident in how containerization simplifies the complex orchestration of multiple services - from frontend frameworks and backend APIs to databases and caching layers - into a single, manageable configuration file.

The declarative nature of Docker Compose allows for the definition of the entire application stack as code, ensuring consistency across development, staging, and production environments. This approach eliminates the common "it works on my machine" problem while providing reproducible deployments that can be version-controlled and easily rolled back when needed.

The major benefits of this approach include simplified dependency management, where each service runs in its own isolated container with its specific requirements; scaling capabilities through service replication; and enhanced portability across different cloud providers. The networking and volume management features of Docker Compose further enable secure inter-service communication and persistent data storage without complex configuration overhead.

For part 2, I'll be deploying the application on AWS cloud infrastructure with Amazon RDS for MySQL.

Mantle: The ideal Blockchain for the Metaverse?

Joshua Okoro — Thu, 08 Jun 2023 00:13:58 +0000

The Mantle Network avails innovation on unprecedented technology to offer exceptional infrastructure for decentralized computing, digital identity as well as data privacy.

Overview of the Mantle Network infrastructure

The Mantle blockchain is an EVM compatible layer-2 chain that has a lot of unique offerings from added security, to secure distributed storage functionalities, to lower cost transactions leveraging optimistic rollups the use cases are unprecedented. Among other things, Mantle offers a virtualization layer that allows developers to build applications that are not just limited to EVM compatible chains but other non-compatible chains as far as they support smart contracts, this feature is one of the key requirements for cross-chain gaming and the Metaverse. In this article, we will explore the strengths of the mantle network in delivering a robust Metaverse experience.

If you are not very familiar with what the Metaverse is all about you can check this carousel or this article.

Mantle is ideal for the metaverse for the following reasons:

1. SmartHashes - Digital Fingerprints Packed with Insights.
The Mantle chain derives and compares in-depth analytics without needing access to the underlying data itself. This innovation called SmartHashes are able to capture significantly greater amounts of metadata compared to standard hashing methods. Thereby availing Metaverse and gaming protocols to share important information and business insights without exposing the valuable data beneath.

Utilizing SmartHashing for information sharing primarily eradicates unnecessary data duplication that occurs in traditional digital information transfer. Data duplication and repeated replication of datasets are one of the most significant areas that expose protocols to cybersecurity risks. Leveraging this feature in the metaverse will revolutionize the technology by a great deal.

2. Cross cloud Computing
Mantle offers one of the most robust data protection mechanisms for the metaverse. It achieves this by data sharding to fragment and store data across multiple data storage units. Mantle safely stores data across both physical on-premise data servers and secure cloud platforms in order to prevent an intruder from tampering with protocols' data stored on it as well as preventing ransom ware from corrupting the data and thereby making its utility for the Metaverse a high prospect.

Only permissioned users have the ability to derive insights or reassemble the data stored on Mantle. It is important to note that Mantle doesn't store all data on the blockchain because it will affect the scalability and cost but takes an innovative approach using insight-packed smarthashes, not compromising on security of all data.

3 Blockchain agnostic
Mantle offers interoperable blockchain functionalities to its users to deploy once and use on various chains that support smart contracts. Leveraging its virtualization layer there is no need write contracts for various chains to launch your protocols. In addition mantle comes with a bridge functionality for sending transactions across chains.

4 Modular Rollups
Mantle utilizes the modular blockchain architecture which is the separation of one or more of the core blockchain functions - Execution, Consensus, Data Availability, Settlement this provides a means for each of them to be upgraded, customised and scaled independently of the others. In simple terms what this means is that it separates the resources in order to optimize network efficiency as each layer specializes in a particular task.

Mantle integrates EigenLayer to offer even further functionalities to the modular architecture with optimistic rollups to create a unique three function modular blockchain, EigenLayer handles data availability, Ethereum handles settlement and consensus while Mantle handles execution.

Conclusion
There are various reasons why Mantle is the ideal chain for the Metaverse such as how it approaches the blockchain trilemma, robust data infrastructure, low cost for transactions and being community owned. With the growing community of contributors, developers and Ecosystem fund of $200 million, the future holds so much for the Mantle Ecosystem. To start building on mantle do checkout the official website and read the documentation.