Configuration#

Public Base Path#

Just set base in vite.config.ts like:

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/base-path',
})

And pass it to routerOptions:

// main.ts
import { ViteReactSSG } from 'vite-react-ssg'
import { routes } from './App'
import './index.css'

export const createRoot = ViteReactSSG(
  {
    routes,
    // pass your BASE_URL
    basename: import.meta.env.BASE_URL,
  },
)

Vite React SSG will give it to the react-router's basename.

See:

• react-router's create-browser-router
• vite config base

Example

ssgOptions#

You can pass options to Vite SSG in the ssgOptions field of your vite.config.js

// vite.config.js

export default {
  plugins: [],
  ssgOptions: {
    script: 'async',
  },
}

script#

type#

'sync' | 'async' | 'defer' | 'async defer'

default 'sync'

Set the scripts' loading mode. Only works for type="module".

format#

type#

'esm' | 'cjs'

default 'esm'

Build format.

entry#

type#

string

default 'src/main.ts'

The path of the main entry file (relative to the project root).

mock#

type#

boolean

default false

Mock browser global variables (window, document, etc...) from SSG.

formatting#

type#

'minify' | 'prettify' | 'none'

default 'none'

Apply formatter to the generated index file.

It will cause Hydration Failed.

mode#

type#

string

Vite environmeng mode.

dirStyle#

type#

'flat' | 'nested'

default 'flat'

Directory style of the output directory.

flat: /foo -> /foo.html nested: /foo -> /foo/index.html

includeAllRoutes#

type#

boolean

default false

Generate for all routes, including dynamic routes. If enabled, you will need to configGure your serve manually to handle dynamic routes properly.

crittersOptions#

type#

CrittersOptions | false

default {}

Options for the critters packages.

@see https://github.com/GoogleChromeLabs/critters

onBeforePageRender#

type#

(route: string, indexHTML: string, appCtx: ViteReactSSGContext<true>) => Promise<string | null | undefined> | string | null | undefined

Callback to be called before every page render.

It can be used to transform the project's index.html file before passing it to the renderer.

To do so, you can change the 'index.html' file contents (passed in through the indexHTML parameter), and return it. The returned value will then be passed to renderer.

onPageRendered#

type#

(route: string, renderedHTML: string, appCtx: ViteReactSSGContext<true>) => Promise<string | null | undefined> | string | null | undefined

Callback to be called on every rendered page.

It can be used to transform the current route's rendered HTML.

To do so, you can transform the route's rendered HTML (passed in through the renderedHTML parameter), and return it. The returned value will be used as the HTML of the route.

onFinished#

type#

() => Promise<void>

rootContainerId#

type#

string

default 'root'

The application's root container id.

concurrency#

type#

number

default 20

The size of the SSG processing queue.

Extend Vite#

We have inherited some configuration options from Vite.

Https#

type#

boolean | ServerOptions

default undefined

If you set https to true in Vite, we will by default use devcert to generate a local HTTPS service for you. Of course, if you pass in your own custom https parameters, we will also help you pass them through to the Express server.