DEV Community

Cover image for DFF: Docker for Frontend Folks
Anadee
Anadee

Posted on

DFF: Docker for Frontend Folks

#docker #frontend #webdev

This blog is written specifically for frontend engineers who are curious about Docker but feel it’s too DevOps-y, too backend, or too complicated.

If you’ve ever heard:

“It works on my machine.”

Docker exists to kill that sentence.

While you can always Google the definition of Docker, I’ll break it down simply.

At its core, Docker lets you ship your app with its environment so it runs the same everywhere.

Think of it like this:

Docker = a runnable zip file

Not just your code, but:

  • Node version
  • Dependencies
  • Build output
  • Web server
  • Environment assumptions

All packed into a container.

Docker Concept

The Problem Docker Solves

Normally, running an app means:

  • Install Node
  • Match versions
  • Install dependencies
  • Configure ports
  • Pray nothing breaks

With Docker:

  • You build once
  • You run anywhere
  • No setup questions

Docker Basics

1. Build an Image

An image is just a blueprint. It contains everything needed to run an app.

docker build -t my-app .
Enter fullscreen mode Exit fullscreen mode

After running this command:

  • Docker reads instructions from the Dockerfile
  • Creates a Docker image
  • Tags (-t) it as my-app

2. Run a Container

A container is a live, running instance of your app.

docker run -d -p 8080:80 my-app
Enter fullscreen mode Exit fullscreen mode

What happens:

  • A container is created from the image
  • App runs in the background (-d → detached mode)
  • Port 8080 on your machine maps to 80 inside the container

Image vs Container

Dockerizing a React App

Let’s go through a minimal, beginner-friendly example.

No DevOps jargon — just Dockerizing a React app the easy way.

Step 1: Build the React App 

npm run build
Enter fullscreen mode Exit fullscreen mode

This creates a /build folder with static assets.

Step 2: Create a Dockerfile

Mental model:

  • Build happens outside
  • Docker only serves the output

A minimal Dockerfile:

FROM nginx:alpine
COPY build /usr/share/nginx/html
EXPOSE 80
Enter fullscreen mode Exit fullscreen mode

That’s it.

No Node.

No npm.

Just static files served by Nginx.

Note: This setup works best for simple SPA-style React apps and may need tweaks for client-side routing. The goal here is to understand Docker basics, not cover every edge case.

Step 3: Build & Run 

docker build -t my-react-app .
docker run -d -p 8080:80 my-react-app
Enter fullscreen mode Exit fullscreen mode

Now visit:

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

🎉 Your React app is running inside Docker.

Why This Matters

Once dockerized, your app runs identically on:

  • Your laptop
  • EC2
  • DigitalOcean
  • Kubernetes

No more “Node version mismatch” bugs.

Final Thoughts

A server is just a computer.

A container is just a process.

Docker is just packaging.

Once this clicks, cloud stops being scary.

If this gets a good response, I’m planning to write about demystifying cloud for frontend engineers next.

Top comments (0)