How to Containerize a Full-Stack App (Part 1)-Setting Up the Local Development Environment.

Series Navigation:

• 📍 Part 1: Setting up locally (You are here)
• ➡️ Part 2: Frontend Multi-Stage Docker Builds
• ➡️ Part 3: Containerizing the Backend & MySQL

Video

In modern web development, Docker has become the standard for ensuring your application runs consistently across dev, test, and production environments. In this post, we are going to focus specifically on how to containerize a full-stack application built with React, Express.js, and MySQL.

In this tutorial, I will guide you through the end-to-end process of containerizing this stack. This is Part 1, so here we will just set up our full-stack app locally. In the upcoming blog post, I will explain the remaining details.

Here is what we will cover:

1. Prerequisites: Who is this for? (Frontend, Backend, and DevOps developers).
2. Setup: Installing Docker Desktop on our machine.
3. Setting up the Database: Setting up the Mysql Database.
4. The Baseline: Running our full-stack app locally before containerizing.
5. Conclusion: Summary and final thoughts.

Let’s get started.

1. Prerequisites

Before we dive in, let’s make sure this guide is right for you. This tutorial is designed to be flexible: whether you want to master the entire full-stack containerization process or need a solution for a specific part, you can leverage the sections that matter to you.

Who is this for?

• Frontend Developers: You will learn how to serve your React app efficiently without relying on npm start in production.

• Backend Developers: You will learn how to containerize your backend for production, ensuring your API and database run reliably together on any server.

• DevOps Enthusiasts: You will gain hands-on experience packaging web applications and using Docker Compose to run them locally—the essential first step before managing them in a cloud environment.

⚠️ Important Note:
This guide is not for absolute beginners. We assume you already have a working knowledge of React and Node.js. I'm not covering how to write the application code itself, but rather how to package and ship it effectively.

What you need:

• A basic understanding of React and Express.js.
• Familiarity with the command line.
• A code editor (VS Code recommended).

2. Setup: Installing Docker Desktop on our machine

To work with containers, we need the Docker engine running on our computer. The easiest and most standard way to do this is via Docker Desktop.

1. Download: Go to the official Docker website for Mac, for Windows, for Linux and download the installer for your OS (Windows, Mac, or Linux).
2. Install: Run the installer and follow the on-screen instructions.
3. Start the App: Once installed, open the "Docker Desktop" application. (Important: Docker commands won't work unless this app is running in the background!)
4. Verify: Open your terminal (or command prompt) and run the following command to make sure everything is connected:

docker --version
# Output Example: Docker version 29.0.1, build eedd969

If you see a version number, you are ready to go!

3.Setting up the Database

To run our backend, we need a MySQL database. Instead of installing the heavy MySQL server software directly on your OS, we will use Docker to spin up a MySQL container.

Run this command in your terminal:

docker run --name mysql-container \
  -e MYSQL_ROOT_PASSWORD=myrootpassword \
  -e MYSQL_DATABASE=my_testing_db \
  -p 3306:3306 \
  -d mysql:8.0

Now, go to Docker Desktop and verify that your MySQL container is running successfully

⚠️ Note:
Please save this password and db name as well because we need them later.
Also, if the above command failed. Then try with a different port number. For example, 3307.

docker run --name mysql-container \
-e MYSQL_ROOT_PASSWORD=myrootpassword \
-e MYSQL_DATABASE=my_testing_db \
-p 3306:3306 \
-d mysql:8.0

What Happens When You Run This Command

1. Docker downloads the mysql:8.0 image (if not present).
2. Creates a new container named mysql-container.
3. Starts the MySQL server inside it.
4. Initialises the database my_testing_db (first run only).
5. Sets the root user password to whatever you provided.
6. Exposes MySQL on your machine's port 3306.

• docker run: Tells Docker to create and start a new container from a specified image.
• --name mysql-container: Gives the container a custom name: mysql-container. So we can find it easily. If omitted, Docker assigns a random name.
• -e MYSQL_ROOT_PASSWORD=myrootpassword: Sets the root password (we'll need this for our backend). The official MySQL image requires the MYSQL_ROOT_PASSWORD environment variable to be set.
• -e MYSQL_DATABASE=my_testing_db: This will set the database with name my_testing_db. This env variable is optional. It creates a database on container creation.
• -p 3306:3306: Exposes the database port so our local Node.js app can connect to it.
• -d mysql:8.0: Image name.

4. The Baseline: Running our full-stack app locally before containerizing

Before we start writing Dockerfiles, we need to understand what we are actually containerizing. In this section, we will get the application running on our machine "the old-fashioned way" (mostly) to ensure the code works.

In this section, we will:

• Fork and Clone the starter repository.
• Set up the Database.
• Run the Application to confirm that everything talks to each other.

4.1 Fork and Clone the Repository

I have prepared a starter repository that contains a basic React frontend and an Express backend.

1. Fork the repository to your own GitHub account.

Go to repo: Repo Link

Click on Fork

Once forked, clone it.

1. Clone it to your local machine:

# Clone the repository
git clone https://github.com/YOUR_GITHUB_USERNAME/devops-todo-starter-app.git

# Move into the project directory
cd devops-todo-starter-app

Once you cloned it, open it in VS Code or any IDE.

Note: There are three branches present for each blog post. Make sure you are in the main branch.

You will be able to see two folders: backend, frontend and a README.md file.

4.2 Running the Application

Now that our database is running, let's start the application. Go to your IDE where you open the project.

Go to the backend directory and create a file .env.

Copy content from .env-example. And paste it in .env.

Now replace DB_PASSWORD='<DB_PASSWORD>' with DB_PASSWORD=myrootpassword. And ALLOWED_ORIGIN=http://localhost:4501 with ALLOWED_ORIGIN=http://localhost:8080.

Before proceeding, make sure you are using Node.js version ">=20.0.0". Currently I'm using the LTS version, which is v24.13.0.

Open the terminal and run

node -v

Once you have a compatible node version, start the backend server.

Open a terminal and go to the **backend **directory

Install dependencies

cd backend
npm install

Run the migration

npm run migrate

Once migrated, you will see below the O/P

Run dev server

npm run dev

If everything goes fine, you will see below the O/P

Now, in the browser, open URL http://localhost:5500/api/todos

You will be able to see dummy todos in the browser

Open a new terminal and go to the frontend directory

Install dependencies

cd frontend
npm install

Setup Env Variable:

Go to the frontend directory and create a file .env.

Copy content from .env-example. And paste it in .env.

Start dev server

npm run dev

Open your browser to http://localhost:8080.

If you see data loading from the API, congratulations!🎉. Your baseline environment is set up perfectly.

5. Conclusion

I hope you successfully set up the app locally and enjoyed the process. In the next part, we will learn how to containerize our frontend. Stay tune. Please post your queries if you faced any issues.