Base URL

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

To change the Base URL we:

1. Add the base config to both vite.config.js#base and createPageRenderer({ base }). Example: /examples/base-url/vite.config.js and /examples/base-url/server/server.js.

2. 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/components/Link.jsx.

3. Use import.meta.env.BASE_URL when 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 while server-side rendering our pages on a separate sever, then we need to change the base URL only of our static assets but not the base URL of our SSR server.

We can use createPageRenderer({ baseAssets: 'http://some-cdn.com/my-static-assets/' }) which will change the base URL only of our static assets.

Example:

• /examples/base-url-cdn/

See also

• Vite Docs - Public Base Path