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
- Vite
- Zod
- 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-reactandzod(zod version should match the peer dependency version exactly)npm i -S docker-react [email protected]
-
Create environment variable schema (currently only Zod supported but the future others will be available)
// env.schema.js const { z } = require('zod'); const envSchema = z.object({ VITE_API_URL: z.string().uri().required(), }); module.exports = envSchema;
-
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 -d public" }Note if you are using a
.envfile the current recommended way is to use node directly.{ "init-local": "node --env-file=.env ./node_modules/.bin/docker-react prep -s ./env.schema.js -d public" }There is a pending feature request for npx commands to support loading .env files directly, once it's implemented these docs will be updated accordingly. npm/cli#7069
-
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