Beginner's Guide to Docker

Omkar ManteOmkar Mante
5 min read

Docker has evolved into an essential tool for modern software development, enabling uniform environments, simplified deployment methods, and application separation. Whether you're a front-end developer or a full stack engineer, Docker can greatly ease your process. In this blog, we'll go over what Docker is, what problems it solves, why you should use it in today's development landscape, and fundamental Docker commands, such as how to construct a Docker file for React development.

What is Docker?

Docker is a platform that allows developers to automate the deployment of applications in lightweight, portable containers. These containers include everything needed to run an application—code, runtime, system tools, libraries, and settings—ensuring the application behaves the same regardless of where it's run.

In simpler terms, Docker packages your app into a neat container that can be shipped and run anywhere, from your local machine to a production server.

Problems that Docker Solves

Prior to Docker, developers faced various issues when migrating programs between environments (such as development, testing, and production):

  • "it works on my machine" : problem occurs when applications function differently in different contexts due to changes in operating systems, configurations, or dependencies.

  • Environment setup and configuration: Creating a development environment can be time-consuming, error-prone, and inconsistent, especially in teams where each developer must reproduce the same setup.

  • Dependency conflicts: If you worked on various projects that required different versions of the same dependencies (for example, Node.js), handling them locally was difficult and frequently resulted in disputes.

  • Complex deployments: Application deployment was a time-consuming operation that involved moving data, setting up servers, installing dependencies, and customizing the environment.

Docker addresses these issues by packaging apps and their dependencies into containers, resulting in consistent behavior across all environments. Docker allows you to:

  • Create consistent environments for every stage of the development cycle.

  • Minimize conflicts by isolating applications in separate containers.

  • Simplify the deployment process by bundling everything an app needs to run.

Why Should You Use Docker in Today’s World?

In today's fast-paced development world, Docker offers several advantages that make it an essential tool:

  1. Portability: Docker containers can run on any machine that has Docker installed, regardless of the underlying OS. This means you can build an application on your local machine and deploy it to a cloud server without worrying about compatibility issues.

  2. Efficiency: Docker is lightweight compared to virtual machines. It allows you to run multiple isolated applications on the same host without consuming a lot of resources, making it perfect for both development and production environments.

  3. Version Control for Environments: With Docker, you can define your environment setup in a Dockerfile. This makes it easy to share your setup with others, ensuring that all team members and environments (development, testing, production) are identical.

  4. Rapid Deployment: Docker allows you to package your application and dependencies into a single container, making the deployment process faster and less error-prone.

  5. Scalability: Docker is compatible with orchestration tools like Kubernetes, enabling easy horizontal scaling for high-traffic applications.

Basic Docker Commands

To get started with Docker, you'll need to be familiar with a few basic commands. Here's a quick overview:

  1. docker run : Run a container from a Docker image.

     docker run hello-world
    
  2. docker ps : List running containers.

     docker ps
    
  3. docker images : List available Docker images on your machine.

     docker images
    
  4. docker build : Build a Docker image from a Dockerfile. here ‘.‘ means docker file in current folder.

     docker build -t my-app .
    
  5. docker stop : Stop a running container.

     docker stop container_id
    
  6. docker rm : Remove a stopped container.

     docker rm container_id
    
  7. docker rmi : Remove a Docker image.

     docker rmi image_id
    
  8. docker-compose up : Start services defined in a docker-compose.yml file.

     docker-compose up
    

Dockerfile for React Development

To containerize a React application, you’ll need to create a Dockerfile that specifies how to build and run your app inside a Docker container.

Here’s an example Dockerfile for a React app:

# Step 1: Build the React app
FROM node:16 AS build

WORKDIR /app

# Install dependencies
COPY package*.json ./

RUN npm install

# Copy app source code
COPY . .

# Build the app for production
RUN npm run build

# Step 2: Serve the built React app using a lightweight web server
FROM nginx:alpine

# Copy the build output to the default nginx public folder
COPY --from=build /app/build /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Start nginx
CMD ["nginx", "-g", "daemon off;"]

Explanation:

  1. FROM node:16 AS build: Use Node.js as the base image to build the React app.

  2. WORKDIR /app: Set the working directory inside the container to /app.

  3. Copy package.json : Copy the package.json and package-lock.json files to the container

  4. RUN npm install: Install the app dependencies.

  5. COPY . .: Copy the rest of the application code to the container.

  6. RUN npm run build: Build the React app for production.

  7. FROM nginx: Use a lightweight Nginx web server to serve the built app.

  8. COPY --from=build /app/build /usr/share/nginx/html: Copy the build output from the first stage to the Nginx directory.

  9. EXPOSE 80: Expose port 80 for the web server.

  10. CMD ["nginx", "-g", "daemon off;"]: Run Nginx in the foreground.

Building and Running the Docker Container

  1. Build the Docker image:

     docker build -t react-app .
    
  2. Run the container:

     docker run -d -p 80:80 react-app
    

Now, your React app is running inside a Docker container, and you can access it via “ http://localhost “

Conclusion

Docker simplifies application development by providing consistent, portable environments and efficient resource management. Whether you're a front-end React developer or a full stack engineer, Docker can significantly improve your workflow, from local development to production deployment.

By using Docker, you'll be able to create reliable applications that run anywhere, reduce "works on my machine" issues, and streamline the deployment process. For React developers, the example Dockerfile demonstrates how easy it is to containerize and serve a React application using Docker.

Happy Dockerizing!

1
Subscribe to my newsletter

Read articles from Omkar Mante directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Omkar Mante
Omkar Mante