DEV Community

Cover image for 🚀 Beginner’s Guide: Dockerize an App and Push It to Docker Hub
dev dev
dev dev

Posted on

🚀 Beginner’s Guide: Dockerize an App and Push It to Docker Hub

#webdev #devops #beginners #tutorial
If you’re new to Docker and want a hands-on, practical example, this guide is for you.

🐳 What Is Docker?

Docker is a tool that allows you to package an application and everything it needs to run (code, dependencies, libraries, and configuration) into a single unit called a container.

Think of a container like a box 📦:

  • Inside the box: your app + Node.js + all dependencies
  • Outside the box: any machine (laptop, server, cloud)

If Docker is installed, the app will run the same way everywhere.

🤔 Why Do We Use Docker?

Before Docker, developers often heard this problem:

❌ “It works on my machine, but not on yours!”

Docker solves this by creating consistent environments.

✅ 1. Consistency Across Environments With Docker:

  • Same app runs on local machine
  • Same app runs on testing
  • Same app runs on production

No environment mismatch.

In this post, we will:

  1. Clone a sample app from GitHub
  2. Understand the project structure
  3. Create a Dockerfile and .dockerignore
  4. Build and run Docker images locally
  5. Push the image to Docker Hub
  6. Pull the image from Docker Hub and run it

🧰 Prerequisites

Before we start, make sure you have:

  • Git installed
  • Docker installed and running
  • A Docker Hub account (free)

Verify git installation:

git -v
Enter fullscreen mode Exit fullscreen mode

Verify Docker installation:

docker --version
Enter fullscreen mode Exit fullscreen mode

📦 Step 1: Clone the GitHub Repository

We’ll use Docker’s official getting-started app, which is perfect for beginners.

git clone https://github.com/docker/getting-started-app.git
cd getting-started-app
Enter fullscreen mode Exit fullscreen mode

This is a simple Node.js application that we’ll containerize.

📁 Step 2: Understand the Project Structure

Inside the project, you’ll see files like:

getting-started-app/
├── spec/
├── src/
├── package.json
├── package-lock.json
└── README.md
Enter fullscreen mode Exit fullscreen mode

This is a Node.js application.
To run it inside a container, we need a Dockerfile.

🐳 Step 3: Create a Dockerfile and .dockerignore

📄 Create a Dockerfile 

touch Dockerfile
# or
code Dockerfile
Enter fullscreen mode Exit fullscreen mode

Add the following content:

docker file code

📄 Create a .dockerignore File

touch .dockerignore
#or
code .dockerignore
Enter fullscreen mode Exit fullscreen mode

Add the following:

node_modules
npm-debug.log
Dockerfile
.git
.gitignore

✅ Why .dockerignore is important:

  • Prevents unnecessary files from being copied
  • Reduces image size
  • Speeds up Docker builds

🏗️ Step 4: Build the Docker Image Locally

Build the Docker image:

docker build -t getting-started-app .
Enter fullscreen mode Exit fullscreen mode

Verify the image:

docker images
Enter fullscreen mode Exit fullscreen mode

▶️ Step 5: Run the Docker Image Locally

Run the container:

docker run -d -p 3000:3000 getting-started-app
Enter fullscreen mode Exit fullscreen mode

Open your browser:

http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Out Put PNG

🎉 Your app is running inside a Docker container!

🔐 Step 6: Login to Docker Hub 

docker login
Enter fullscreen mode Exit fullscreen mode

Enter your Docker Hub credentials.

🏷️ Step 7: Tag the Docker Image 

docker tag getting-started-app your-dockerhub-username/getting-started-app:latest
Enter fullscreen mode Exit fullscreen mode

☁️ Step 8: Push the Image to Docker Hub 

docker push your-dockerhub-username/getting-started-app:latest
Enter fullscreen mode Exit fullscreen mode

Your image is now available on Docker Hub 🚀

📥 Step 9: Pull the Image from Docker Hub 

docker pull your-dockerhub-username/getting-started-app:latest
Enter fullscreen mode Exit fullscreen mode

▶️ Step 10: Run the Image Pulled from Docker Hub 

docker run -d -p 3000:3000 your-dockerhub-username/getting-started-app:latest
Enter fullscreen mode Exit fullscreen mode

Visit: http://localhost:3000

✅ The app is now running from Docker Hub.

Top comments (0)