When building web applications, developers often face a common problem: “It works on my computer but not on someone else’s.” This happens because every computer has different settings, tools, or versions installed. Docker helps solve this problem.
Docker lets you package your full stack app into a container. This container works the same way on every computer. If you are learning web development through full stack developer classes, learning Docker is a smart step. It helps you run your apps smoothly and share them easily with others.
In this blog, you will learn what Docker is, why it’s useful, and how to dockerize a full stack app step-by-step using simple words and examples.
What is Docker?
Docker is a tool that permits developers make, ship, and run applications in containers. A container is like a small box that has everything your app needs: code, settings, libraries, and tools.
Think of it like this:
- Without Docker: You build a project and it works only on your laptop.
- With Docker: You build a project and it works on any laptop, server, or cloud.
This is very useful when you’re building apps with a front end, back end, and database – in other words, full stack apps.
Why Use Docker for Full Stack Apps?
Here’s why Docker is great for full stack developers:
- You can run your front end, back end, and database together.
- It saves time by avoiding setup issues.
- Your app works the same on all machines.
- It makes deployment easy.
- It’s used in real jobs and companies.
Once you learn Docker, it becomes much easier to manage projects, especially when working with teams or deploying to the cloud.
Basic Terms You Should Know
Before we start, let’s look at some basic Docker terms:
- Dockerfile: A file that tells Docker how to build your app.
- Image: A blueprint of your app that Docker uses to create containers.
- Container: A running instance of the image.
- Docker Hub: A place to share Docker images.
Now let’s get started.
Step-by-Step: Dockerize a Full Stack App
We will create a simple full stack app with:
- Front end: React
- Back end: Node.js with Express
- Database: MongoDB
This guide works for other setups too, like Angular or Vue with Python or Django.
Step 1: Create the Project Structure
Make a folder with three parts:
my-app/
client/ –> React app
server/ –> Node.js app
docker-compose.yml
Create the React app inside client using:
npx create-react-app client
Create a basic Express app inside server:
mkdir server
cd server
npm init -y
npm install express
Inside server, create a file called index.js:
const express = require(‘express’);
const app = express();
const PORT = 5000;
app.get(‘/’, (req, res) => {
res.send(‘Hello from server!’);
});
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
Step 2: Create Dockerfiles
We will now create Dockerfiles to tell Docker how to build our app.
Dockerfile for Server (Node.js)
Inside the server folder, create a file named Dockerfile:
FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5000
CMD [“node”, “index.js”]
This tells Docker to:
- Use the Node image
- Set the working directory
- Install dependencies
- Run the server on port 5000
Dockerfile for Client (React)
Inside the client folder, create a Dockerfile:
FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [“npm”, “start”]
This runs the React app on port 3000.
Step 3: Add a MongoDB Service
We don’t need a Dockerfile for MongoDB. Docker already has an image for it.
Step 4: Create docker-compose.yml
Now we’ll use Docker Compose to run all parts of the app together.
In the root folder (my-app), create a file called docker-compose.yml:
version: ‘3’
services:
client:
build: ./client
ports:
– ‘3000:3000’
depends_on:
– server
server:
build: ./server
ports:
– ‘5000:5000’
depends_on:
– mongo
environment:
– MONGO_URL=mongodb://mongo:27017/mydb
mongo:
image: mongo
ports:
– ‘27017:27017’
This file does the following:
- Builds and runs the React app on port 3000
- Builds and runs the Node.js server on port 5000
- Runs MongoDB using the default image on port 27017
Step 5: Run the App
Now it’s time to run everything using one command:
docker-compose up
Docker will:
- Build the images
- Create containers
- Run React, Node.js, and MongoDB
You can now unlock your browser and visit:
- http://localhost:3000 – React app
- http://localhost:5000 – Node API
Everything works together in containers!
Common Commands
Here are some basic Docker commands you’ll use:
- docker build . – Builds a Docker image
- docker run image-name – Runs a container
- docker ps – Shows running containers
- docker stop container-id – Stops a container
- docker-compose up – Runs all services
- docker-compose down – Stops all services
Tips for Beginners
- Always check your ports and make sure they don’t conflict.
- Keep your Dockerfiles simple.
- Use .dockerignore to avoid copying unnecessary files.
- Break your app into clear parts: client, server, database.
- Practice with small apps before moving to big projects.
Benefits of Docker in Real Life
Once you know how to use Docker, you can:
- Share your app with others easily
- Deploy to the cloud with fewer errors
- Work better in teams
- Speed up development
Many companies use Docker every day. Learning it will help you get better job opportunities and become a more confident full stack developer.
Project Ideas to Practice
Here are a few projects you can dockerize:
- To-Do List App – React front end with Node/Mongo back end
- Blog Website – Full stack app with user login
- Weather App – API in the back end, user dashboard in the front end
- Chat App – Real-time messaging with Docker containers
Use Docker Compose to run all parts together.
Conclusion
Docker is a assertive tool that makes it easier to build, run, and share your full stack apps. By learning how to dockerize a project, you can avoid many common problems and make your development process smooth and reliable.
In this blog, you learned what Docker is, how to create Dockerfiles, how to use Docker Compose, and how to run a full stack app using containers. These are real-world skills that full stack developers need.
If you want to go deeper and practice more, joining a full stack course can help you build real projects, get expert guidance, and prepare for job opportunities in the tech industry.
Start small, build simple apps, and keep improving your Docker skills. Soon, you’ll be ready to deploy full stack projects like a pro!
Business Name: ExcelR – Full Stack Developer And Business Analyst Course in Bangalore
Address: 10, 3rd floor, Safeway Plaza, 27th Main Rd, Old Madiwala, Jay Bheema Nagar, 1st Stage, BTM 1st Stage, Bengaluru, Karnataka 560068
Phone: 7353006061
Business Email: enquiry@excelr.com