Deploy React on Temps
Deploy your React app and Temps serves it as static files — running your build, serving the dist/ or build/ output from the Temps proxy with no container running, and routing all paths through index.html for client-side navigation.
This guide describes how the nightly release channel builds your app, using the Autopack builder. Beta (v0.1.0-beta.56) also builds with Autopack, but some details below may differ. Earlier releases and the stable channel build with Nixpacks and behave differently. To run nightly, see Release channels.
For an overview of self-hosting React, including costs, see Deploy React to your own server. Every framework and the preset it needs is listed under Supported platforms.
Quickstart
From your project root, deploy with your preferred package manager:
npx @temps-sdk/cli up
Temps detects a Vite app from its vite.config.js or vite.config.ts and uses the Vite preset, and an Rsbuild app from rsbuild.config.ts (the Rsbuild preset). The React team deprecated Create React App for new apps in February 2025; existing CRA projects aren't detected from the repository, so choose the React App preset (react-app), with up --preset react-app or under Project → Settings → Build & deploy → Build → Framework.
Both presets install dependencies with the package manager your lockfile points to, so commit your lockfile (for example package-lock.json). They then run its build script (for example npm run build) and serve the output. Your app is live with HTTPS in a few minutes.
What Temps handles automatically
| Feature | How Temps handles it |
|---|---|
| Build | Your package manager's build script |
| Output | Serves dist/ (Vite, or the build.output_dir set in .temps.yaml) or build/ (Create React App) |
| HTTPS | Let's Encrypt certificate, auto-renewed |
| Client-side routing | 404 → index.html fallback configured automatically |
| Cache headers | Hashed assets get long-lived cache headers |
| Preview deployments | Opt-in; once enabled, each branch gets its own preview environment |
Environment variables
Vite environment variables (prefixed VITE_) are embedded at build time:
npx @temps-sdk/cli environments vars set VITE_API_URL "https://api.example.com" -e production
These values are baked into the bundle when it's built. Changing a variable doesn't redeploy the app; deploy again for the new value to take effect. Create React App works the same way with REACT_APP_ variables.
Backend API
If your React app calls a backend API, deploy your backend as a separate Temps project and set VITE_API_URL to its URL. For full-stack apps in a monorepo, set the Root directory in project settings for each app — see Deploy a Project.
Analytics and session replay
Temps includes web analytics and optional session replay for the apps it serves. To track page views, custom events and Web Vitals from a React app, add the React analytics SDK. See Analytics for what is collected and where to find it in the dashboard.
SPA routing
Single-page applications use client-side routing — paths like /about or /dashboard/settings do not correspond to files on disk. The Temps proxy handles this automatically.
When a request arrives for a path that:
- Has no file extension (e.g.
/about, not/about.css) - Does not match any file on disk
…the proxy serves index.html instead, and your client-side router (React Router, Vue Router, etc.) takes over. This works out of the box — you do not need _redirects, vercel.json, or any rewrite rules.
Caching
The Temps proxy sends ETags with static files, so a browser that already has an unchanged file gets 304 Not Modified instead of downloading it again. The proxy doesn't compress static files.
Cache-Control headers are set based on the file path:
| Pattern | Cache-Control | Use case |
|---|---|---|
/assets/*, /static/*, /_next/static/*, .chunk.*, .hash.* | public, max-age=31536000, immutable | Hashed assets that never change |
| Everything else | public, max-age=0, must-revalidate | HTML files and non-hashed resources |
Your hashed JS and CSS bundles are cached for a year, while index.html is always revalidated so new deployments are picked up immediately.
Building a documentation site? See Deploy Docusaurus. The Vue and Angular guides cover the other single-page frameworks.