⚠
vite-plugin-ssr has been renamed Vike, see migration guide.

Base URL

What is the Base URL? The Base URL (aka Public Path) configures the URL root of our website. For example, instead of serving our app at https://example.org/* (the Base URL is /), we can serve our website at https://example.org/some-base/* by setting the Base URL to /some-base/.

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: