Build and deploy

npm run build turns your components into plain HTML, CSS and JavaScript files in dist/. Any static host can serve them: Firebase Hosting, Netlify, or an ordinary cPanel account.

npm run build
npm run preview          # check the built site on your computer

# Firebase Hosting
npm install -g firebase-tools
firebase login
firebase init hosting    # public directory: dist, single-page app: yes
firebase deploy

Environment variables

// .env.local (never commit this file)
VITE_API_URL=https://api.example.com

// in a component
const api = import.meta.env.VITE_API_URL;

Vite copies every VITE_ variable into the built JavaScript, where anyone can read it with the browser's developer tools. Only put public values there, such as an API address. Secret keys belong on a server.

🔬 Try it: a key in a website →

Routing on the host

With React Router, a page such as /jobs exists only in JavaScript. The host must send index.html for every path, or refreshing /jobs gives a 404. firebase init asks about this; on cPanel, add a rewrite rule:

# .htaccess for a React app on cPanel (Apache)
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

Before you go live

• Run npm run build and fix every warning.
• Test the built site with npm run preview, not only the dev server.
• Open it on a phone with a slow connection.
• Set a real page title and description.
• Remove console.log calls that print user data.