Base URL

What is the Base URL? Changing the Base URL (aka "Public Base Path") is about changing the URL pathname root from / to /some/base/url/: for example, instead of deploying our app to https://example.org/* (the Base URL is /) we can change the Base URL to /some/base/url/ and deploy it to https://example.org/some/base/url/* instead.

To change the Base URL we:

  1. Set vite.config.js#base. 
    // vite.config.js
export default {
  base: '/some/base/url/'
}
  2. Use import.meta.env.BASE_URL to construct a <Link> component that prepends the Base URL. Example: /examples/base-url/components/Link.jsx.
  3. Use import.meta.env.BASE_URL for referencing static assets living in public/. Example: /examples/base-url/renderer/_default.page.server.jsx.

Example: /examples/base-url/.

CDN

If we want to deploy our static assets to a CDN, then we set the vite.config.js#base value to the assets' CDN URL root.

// vite.config.js
export default {
  base: 'https://cdn.example.org/my-website-assets/'
}

If vite.config.js#base is an absolute URL (a URL that starts with http:// or https://), then vite-plugin-ssr applies the Base URL only to our assets (and not to our page URLs). Because using a CDN means that we server-side render our pages on a separate sever with a different URL.

Example: /examples/base-url-cdn/.

See also