Base URL

What is the Base URL? Changing the Base URL (aka Public Base Path) is about changing the URL root of our app. For example, instead of deploying our app to https://example.org/* (i.e. base: '/'), we can set base: '/some/base/url/' and deploy our app to https://example.org/some/base/url/*.

To change the Base URL we:

1. Set Vite's base config:

   // vite.config.js
   
   const isProduction = process.env['NODE_ENV'] === 'production'
   const base = isProduction ? '/some/base/url/' : '/'
   
   export default {
     base
   };

2. Pass base to createPageRenderer():

   // server.js
   const express = require('express')
   const { createPageRenderer } = require('vite-plugin-ssr')
   const vite = require('vite')
   
   startServer()
   
   async function startServer() {
     const app = express()
   
     const isProduction = process.env['NODE_ENV'] === 'production'
     const base = isProduction ? '/some/base/url/' : '/'
     const renderPage = createPageRenderer({ base, /* ... */ })
   
     /* ... */
   }

   We can skip this if we pre-render and don't use a Node.js server in production.

3. Use the import.meta.env.BASE_URL value injected by Vite to construct a <Link> component that prepends the Base URL.

Example:

• /examples/base-url/renderer/Link.jsx (see the <Link> component built on top of import.meta.env.BASE_URL)
• /examples/base-url/server/index.js (see the base option passed to vite and vite-plugin-ssr)
• /examples/base-url/package.json (see the build scripts)

We can set base to 'https://another-origin.example.org/' (for cross-origin deployments) or to './' (for embedded deployments at multiple paths).

See also:

• Vite Docs - Public Base Path