Production-ready Dockerfiles for React, Angular, Vue, Next.js, Remix, TanStack Start, Analog, and Nuxt — built for:
- 🛠 Production — Small, fast, predictable images for real-world deployment.
- 🔒 Security — Non-root users, pinned base image tags, and Docker-recommended hardening.
- ⚡ Efficient builds — Multi-stage builds and layer ordering for faster rebuilds and reliable CI/CD.
Author: Kristiyan Velkov — Docker Captain, author of the official Docker guides for React.js, Angular, Vue.js, Node.js, and more.
| Framework | Version | Directory | Port |
|---|---|---|---|
| ✅ React.js | v19.2.3 | react.js |
8080 |
| ✅ Next.js | v16.1.1 | next.js |
3000 |
| ✅ Remix.js | React Router v7.10 | remix.js/ |
3000 |
| ✅ TanStack Start | v1.132 | tanstack-start/ |
3000 |
| ✅ Angular | v21 | angular/ |
8080 |
| ✅ Analog.js | v2.2 (Angular 21) | analog.js |
3000 |
| ✅ Vue.js | v3.5 | vue.js |
8080 |
| ✅ Nuxt.js | v4.2 | nuxt.js |
3000 |
Clone the repo and go to the framework folder you need:
git clone https://github.com/kristiyan-velkov/frontend-production-dockerfiles.git
cd frontend-production-dockerfiles/<framework>Each project includes a compose.yml file. To build and run with Docker Compose, navigate to the framework folder, then:
docker compose up --buildTo run in the background (detached):
docker compose up --build -dTo stop and remove containers:
docker compose downTo use the commands in the table below, you need Docker Desktop and either:
- Task — for Taskfile commands.
or if you prefer Make:
- Make — for Makefile commands.
| Taskfile Command | Makefile Command | Description |
|---|---|---|
task |
make |
Show available commands. |
task build |
make build |
Build the Docker image. |
task run |
make run |
Run the Docker container. |
task build-run |
make build-run |
Build and run the Docker container. |
task stop |
make stop |
Stop the Docker container. |
task restart |
make restart |
Restart the Docker container. |
task logs |
make logs |
Show logs from the Docker container. |
task clean |
make clean |
Remove Docker image and container. |
task clean-container |
make clean-container |
Remove only the Docker container. |
task clean-image |
make clean-image |
Remove only the Docker image. |
The following variables are defined in the Taskfile and Makefile and can be customized if needed:
| Variable | Description |
|---|---|
IMAGE_NAME |
The name of the Docker image. |
CONTAINER_NAME |
The name of the Docker container. |
HOST_PORT |
The port on the host machine that the container will map to. |
CONTAINER_PORT |
The port inside the Docker container where the application is served. |
DOCKERFILE |
The Dockerfile to use. |
NODE_VERSION |
The version of Node.js used in the base image. Can be updated for easier migrations. |
NGINX_VERSION |
The version of Nginx used for static file serving (SPA applications). |
Contributions are always welcome, whether it's reporting issues, improving documentation, fixing bugs, or adding new features. This project is for everyone! 💙
As a front-end developer, author of the official Docker front-end guides, book author, and technical speaker, I’ve repeatedly seen the same problems across teams and projects: over-engineered Dockerfiles, inefficient caching, insecure images running as root, bloated production builds, and documentation copied without understanding the trade-offs.
This repository exists to address those issues by providing clear, production-ready Dockerfiles that reflect how front-end applications are actually built, shipped, and maintained in real environments.
The goal: bridge the gap between front-end developers and DevOps by offering practical, trustworthy Docker setups that can be used directly, understood easily, and adapted with confiden.
If you find this useful, consider giving the repo a ⭐️ star — it helps others discover it.
If you'd like to support me further, you can donate via:
Your support helps me continue creating valuable content for the community. Thank you!
If you'd like to connect, feel free to reach out via: