Base URL

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

base

To change the Base URL we:

  1. Set vite.config.js#base. 
    // vite.config.js
export default {
  base: '/some-base/'
}
  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.
<!-- view-source:https://my-website.com/some-base/ -->

<!-- Note how our website is served at https://my-website.com/some-base/ and
     how the asset URLs are prepended with the Base URL /some-base/ -->

<html>
  <head>
    <link href="/some-base/logo.svg" rel="icon">
    <link href="/some-base/style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <nav>
      <a href="/some-base/">Landing Page</a>
      <a href="/some-base/about">About Page</a>
    </nav>
    <script src="/some-base/script.js" type="module"></script>
  </body>
</html>

Example:

baseAssets

We can change the Base URL only of our assets by using the baseAssets configuration. The Base URL of our page URLs is left unchanged.

The most common use case for using baseAssets is when deploying assets to a CDN.

// vite.config.js

import { ssr } from 'vite-plugin-ssr/plugin'

export default {
  plugins: [
    ssr({
      baseAssets: 'https://cdn.example.org/my-website-assets/'
    })
  ]
}

Note how the Base URL of our page URLs isn't changed: our app is still served at https://my-website.com/* (the Base URL is still /).

<!-- view-source:https://my-website.com/ -->

<html>
  <head>
    <!-- Note how the Base URL is 'https://cdn.example.org/my-website-assets/' -->
    <link
      href="https://cdn.example.org/my-website-assets/logo.svg"
      rel="icon"
    >
    <link
      href="https://cdn.example.org/my-website-assets/style.css"
      rel="stylesheet"
      type="text/css"
    >
  </head>
  <body>
    <nav>
      <!-- Note how the Base URL is '/' -->
      <a href="/">Landing Page</a>
      <a href="/about">About Page</a>
    </nav>
    <!-- Note how the Base URL is 'https://cdn.example.org/my-website-assets/' -->
    <script src="https://cdn.example.org/my-website-assets/script.js" type="module">
  </body>
</html>

We can use process.env.BASE_ASSETS and import.meta.env.BASE_ASSETS to access the baseAssets value in our code.

Example:

baseServer

We can do both:

  • Deploy our static assets to a CDN using the baseAssets configuration.
  • Change the Base URL of our server using the baseServer configuration.
// vite.config.js

import { ssr } from 'vite-plugin-ssr/plugin'

export default {
  plugins: [
    ssr({
      baseAssets: 'https://cdn.example.org/my-website-assets/',
      baseServer: '/some-base/'
    })
  ]
}
<!-- view-source:https://my-website.com/ -->

<html>
  <head>
    <!-- Note how the Base URL is 'https://cdn.example.org/my-website-assets/' -->
    <link
      href="https://cdn.example.org/my-website-assets/logo.svg"
      rel="icon"
    >
    <link
      href="https://cdn.example.org/my-website-assets/style.css"
      rel="stylesheet"
      type="text/css"
    >
  </head>
  <body>
    <nav>
      <!-- Note how the Base URL is '/some-base/' -->
      <a href="/some-base/">Landing Page</a>
      <a href="/some-base/about">About Page</a>
    </nav>
    <!-- Note how the Base URL is 'https://cdn.example.org/my-website-assets/' -->
    <script src="https://cdn.example.org/my-website-assets/script.js" type="module">
  </body>
</html>

We can use process.env.BASE_SERVER and import.meta.env.BASE_SERVER to access the baseServer value in our code.

Example: