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 tohttps://example.org/some/base/url/*
(base:/some/base/url/
).
To change the Base URL we:
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.
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.
Use import.meta.env.BASE_URL
when referencing static assets living in public/
. Example: /examples/base-url/renderer/_default.page.server.jsx.
Example:
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: