Deploy a Static / React App
- Build your React or other static site locally and serve the compiled files from a small NGINX image.
- This keeps build-time dependencies off the CapRover host.
- The example uses a Vite-style
distdirectory; replace it withbuildif that is what your project produces.
-
Run
npm ci && npm run buildin your project. Check thatdist/index.htmlexists. -
Create a
Dockerfilein the project root:FROM nginx:stable-alpineCOPY dist/ /usr/share/nginx/html/ -
Create a file named
captain-definitionalongside it containing{"schemaVersion":2,"dockerfilePath":"./Dockerfile"}. -
Package the Dockerfile, definition, and built output from the project root, then deploy the archive:
tar -cf deploy.tar captain-definition Dockerfile distcaprover deploy --tarFile ./deploy.tarCreate the CapRover web app first, and select it when the CLI prompts you. You can instead upload
deploy.tarfrom its Deployment tab. Set the container HTTP port to80. -
Visit the app's HTTP address, then enable HTTPS and verify the public domain. Rebuild and repackage the output for each new deployment.
- The ordinary CLI Git deployment uses
git archiveand omits uncommitted or Git-ignored files. - Since compiled output is commonly ignored, use the tar workflow above instead of
caprover deploywithout--tarFile.
For client-side routes such as /settings, put the following in nginx.conf at the project root so a browser refresh loads the app:
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / { try_files $uri $uri/ /index.html; }
}
Add COPY nginx.conf /etc/nginx/conf.d/default.conf to the Dockerfile, then include nginx.conf in the tar -cf command above. Rebuild and redeploy. Do not put private secrets in build-time variables: compiled JavaScript is public. If the app has an API, deploy it separately and point the frontend to its HTTPS URL.