Deploy a React.js SPA
Static-build a React app, ship the dist/ tree to your node, and serve it over HTTPS with cache-control headers and client-side routing that survives a hard refresh.
What you'll build
- A production React build served by Nginx from /app/dist
- Long-cache headers on hashed assets, no-cache on index.html
- Deep links and refreshes that never 404 (SPA fallback)
Before you begin
- A registered node
- A React app whose build outputs a static dist/ (Vite, CRA, etc.)
- The build command and output directory
Set the server and source
Open Development → Deploy → React.js. Steps 1–2 are identical to other wizards: target node + SSH key, then the Git repo and branch.
Deploy React — Application source
Choose a static production build
Step 3 — pick Production build mode and name the app. The pipeline runs npm run build and serves the resulting dist/ as static files. There is no Node process at runtime — just Nginx.
Deploy React — React configuration
Fix SPA routing and caching
Step 4 sets ports and env. The wizard provisions an Nginx config that solves the two classic SPA problems automatically — but it’s worth knowing what it does:
location / {
root /app/dist;
try_files $uri $uri/ /index.html; # deep links never 404
}
location /index.html { add_header Cache-Control "no-cache"; }
location ~* \.[0-9a-f]{8,}\.(js|css|woff2)$ { # hashed assets
add_header Cache-Control "public, max-age=31536000, immutable";
}Why this matters
try_files … /index.html is what lets /users/42 work on a hard refresh. Without it, the server looks for a file that doesn’t exist and returns 404.Deploy and verify
Allocate resources in step 5 (a SPA needs very little) and deploy.
- Clone repository25%
- npm install50%
- npm run build → dist/80%
- Sync dist/ + reload Nginx100%
Verify the SPA fallback by visiting a deep link directly and hard-refreshing — it should render, not 404:
$ curl -I https://dashboard-spa.<your-node-domain>/users/42HTTP/2 200cache-control: no-cacheShipped
Your SPA is on HTTPS with correct caching. Next up: deploy the API it talks to.Nice work — you're done!
You completed Deploy a React.js SPA. Keep the momentum going with the next walkthrough, or jump back to the full catalog.