skills.rest
shafibabar
shafibabarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-dockerfile

Generate multi-stage Dockerfiles and nginx configs for Vite React micro-frontends.

1|Updated Jun 20, 2026
Search Tags:#devops#security#react#docker#vite#nginx#microfrontend
One-click install
npx skills add https://github.com/shafibabar/SDLC-Artifact-Factory --skill react-dockerfile
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-dockerfile
Source: https://github.com/shafibabar/SDLC-Artifact-Factory/tree/main/skills/react-dockerfile
Command: npx skills add https://github.com/shafibabar/SDLC-Artifact-Factory --skill react-dockerfile

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the environment-drift and security issues inherent in containerizing Vite/React micro-frontends by enforcing a strict, multi-stage build process that separates build-time toolchains from runtime static assets.

Core Features & Use Cases

  • Multi-Stage Hardening: Ensures Node, source code, and dev dependencies never reach the production image, minimizing attack surface.
  • Runtime Configuration: Implements window.APP_CONFIG injection to allow the same container image to be promoted across environments without rebuilding.
  • Production Readiness: Configures nginx for non-root execution, proper caching strategies, and CORS support for micro-frontend federation.

Quick Start

Use the react-dockerfile skill to generate a production-ready Dockerfile and nginx configuration for the current React application.

Frequently Asked Questions about react-dockerfile

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a secure Docker build for a Vite React application?▼

Secure Docker builds for Vite React applications use multi-stage builds to isolate Node.js toolchains and dev dependencies from production runtime static assets, ensuring source code never reaches the final image.

How do I inject runtime configuration into a React Docker container without rebuilding?▼

Runtime configuration injection for React Docker containers uses window.__APP_CONFIG__ entrypoint scripts to dynamically substitute environment variables, allowing the same immutable container image to be promoted across CI/CD environments without rebuilding.

How do I configure nginx for React micro-frontend deployments?▼

Configuring nginx for React micro-frontend deployments involves setting up non-root execution, static asset caching strategies, and CORS support to enable independent service deployability and micro-frontend federation.

What's the best way to minimize the attack surface of a React Docker image?▼

Minimizing the attack surface of a React Docker image requires multi-stage hardening that strips Node, source code, and dev dependencies from the production layer, leaving only static assets served by a non-root nginx runtime.

Does this Docker build process support build-once-promote-anywhere CI/CD pipelines?▼

Yes, the build-once-promote-anywhere CI/CD pattern is supported by combining immutable container artifacts with runtime configuration injection, allowing vulnerability scanning on a single image that is promoted across environments.

How do I serve Vite micro-frontend static assets with proper caching in Docker?▼

Serving Vite micro-frontend static assets in Docker requires an nginx configuration that applies proper caching strategies for immutable static files and enables CORS headers for independent service deployability.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
ailabs-393ailabs-393
438

docker-containerization

Generate Dockerfiles and docker-compose configurations for containerized applications.

Community
Advanced
ryan-nguyen-01ryan-nguyen-01
4

skill-arch-microservices

Design resilient microservices architectures with service boundaries and communication patterns.

Community
Advanced
ehtbantonehtbanton

nginx-config-builder

Generate NGINX configuration files for static serving, reverse proxies, load balancing, and SSL termination.

Community
Intermediate