How to deploy a React (Vite) app with a free HTTPS link

A React app built with Vite compiles to plain static files: HTML, JavaScript and CSS. Hosting it is easy once you know three gotchas: the build folder, client-side routes, and environment variables.

Step 1: Check that it builds

Before deploying anything, make sure a production build works on your machine:

npm install
npm run build
npm run preview   # serves dist/ at http://localhost:4173

If npm run build fails locally, it will fail on any host. TypeScript and ESLint errors are the usual cause.

Step 2: Get the base path right

A blank white page after deploying almost always means the browser can't load your JavaScript files. If your app is served from the root of a domain (like https://my-app.shipzo.tech/), keep the default:

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/',          // change only if the app lives in a sub-folder
})

Step 3: Client-side routing (React Router)

With React Router, a URL like /dashboard exists only in JavaScript. When someone refreshes that page, the server looks for a file called dashboard, finds nothing, and returns 404. The fix is a fallback: any path that isn't a real file serves index.html. With nginx, that's:

location / {
  try_files $uri $uri/ /index.html;
}

Shipzo adds exactly this configuration automatically when it detects a Vite or Create React App project, so deep links and refreshes just work.

Step 4: Environment variables

Vite only exposes variables that start with VITE_, and it replaces them when the app is built:

const api = import.meta.env.VITE_API_URL

• Add VITE_API_URL=https://my-api.shipzo.tech in your project's Settings → Environment variables, then redeploy. Shipzo writes VITE_, REACT_APP_ and NEXT_PUBLIC_ variables into the build automatically, but changing a variable doesn't update an app that's already built.
• Anything in a VITE_ variable ends up in the public JavaScript bundle. Never put secret keys there. Keep secrets in a backend.

Step 5: Push and deploy

git add .
git commit -m "Ready to deploy"
git push

1. Create a free Shipzo account → New deployment.
2. Paste the repo link and press Deploy.

Shipzo installs your dependencies (including dev dependencies, which Vite needs to build), runs npm run build, finds the output folder (dist/, build/ or out/), and serves it with nginx and HTTPS. Every later git push redeploys automatically.

Common errors and fixes

Frequently asked questions