Deploying React AppsEntry 10 of 11

Deploying Under a Sub-Path

Configuring the app to run at a path like example.com/my-app/ instead of the domain root.

Notes

  • Two settings must match:
    • The asset base so the browser requests /my-app/assets/....
    • The router basename so routes resolve under /my-app.
  • Common for GitHub Pages and apps hosted alongside others on one domain.

What / Why / When

What

Non-root deployment.

Why

Without it, assets 404 and routes don't match.

When

The app isn't served from /.

Code compare

React
// vite.config.tsexport default defineConfig({  plugins: [react()],  base: "/my-app/",});
React
// App.tsxconst router = createBrowserRouter(routes, { basename: "/my-app" });
Angular
ng build --base-href /my-app/

The <base href> tag covers both assets and the router.

Quick reference

SettingReactAngular
Assetsbase in vite.config.ts--base-href
RoutercreateBrowserRouter(routes, { basename })Same <base href>