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:
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#
'prettify' | 'none'
default 'none'
Apply formatter to the generated index file.
It will cause Hydration Failed.
mode#
type#
string
Vite environment 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 configure 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.