CLI & base image to deploy React applications with docker containers.
- Configuration
- Command-line arguments
- Configuration file
- Lightweight nginx docker container
- CLI
- Runtime environment variable injection & validation
- Javascript
- HTML
- Hash file for cache invalidation
- Application initialization
-
index.htmlfile modification -
Dockerfilegeneration - Schema and types generation
-
- Runtime environment variable injection & validation
- Support for serving at a path
- Create React App
- Vite
- React Static
- Joi
- Yup
- Example projects
- Cookbook for proxying the container with cloudflare
- Cookbook for handling "in-the-wild" chunks
- Research plugin possibilities with the supported tooling
- Server side rendering
-
Install
docker-reactandjoinpm i -S docker-react joi
-
Create environment variable schema (currently only Joi supported but the future others will be available)
// env.schema.js const Joi = require('joi'); module.exports = Joi.object() .keys({ VITE_API_URL: Joi.string().uri().required(), }) .required();
-
Add env import to your
index.htmlhead (in a future version this will be generated for you)<head> ... <script src="/window.env.js"></script> </head>
-
Create
Dockerfile(in a future version this will be generated for you). NOTEdocker-reactimage version version must match your installed npm version of docker-react.FROM demery/docker-react:vX.X.X COPY env.schema.js ./env.schema.js COPY build /usr/share/nginx/html
-
Create
.dockerignorenode_modules -
Update npm scripts (add the
init-localcommand and run it before your local dev scripts){ "dev": "npm run init-local && vite", "init-local": "npx docker-react prep -s ./env.schema.js -e local -d public" } -
Replace all references to environment variables with
window.env, eg.process.env=>window.env(for create-react-app and others)import.meta.env=>window.env(for vite)
Note: This instructions are to be performed in the consuming application.
# Perform a local production build (using whichever command)
npm run build
# Build a local image tagged with local
docker build -t my-app:local .
# Run local build using the env file
docker run -p 3000:80 --env-file=.env --name=my-app my-app:localThe app should now be available at http://localhost:3000
# Cleanup
docker rm my-app && docker image rm my-app:local