Configuration

Configuration for the Turbo Vite plugin is slightly different from normal Vite configuration, the reason being is that we need to know certain paths at runtime when running SSR, so we build the coniguration for you, but you CAN override it.

Standard Configuration

The standard configuration option is the simplest way to setup the framework, the following options can be passed to the Vite plugin initialisation.

Option	Value	Default	Description
environment	string	production	The environment to launch the web app in, production will cause SSR to start, whereas development will start the Vite dev server.
root	string	<process.cwd()>/web	The root path of the web app.
plugins	Plugin[]	[]	The Vite plugins to pass to the Vite config.
basePath	string	/	The base path of the web app, same as base option in the Vite config file.
buildOutput	string	<process.cwd()>/web/dist	The path to build the web app to, for client/server bundles these are compiled into each folder with the respective name in this folder.
serverOptions	ServerOptions	{middlewareMode: 'ssr', {hmr: {port: <httpPort + 1>}}}	The options to pass to the Vite server, this is for the server section in the normal vite config.
disableAutoRouting	boolean	false	Disable the automatic routing of the SSR web application, this means you will need to create your own controller to route this (see the SSR Routing).
disableCompile	boolean	false	Disable the automatic compilation of the web app, this means you will need to manually compile the web app for production, but can be used if you don't want to keep re-compiling the app for development.
routerPath	string	<process.cwd()>/web/src/router/index.ts	The path to the router file, this is the file that will be used to route the SSR web application in auto routing mode.
customViteConfig	Func<(ssr: boolean) => UserConfig>	undefined	A function can be given that will return the Vite config for your apps if you want complete control, but please be aware of custom configuration, see the section below: "Manual Vite Configuration".

Manual Vite configuration

If you plan to have a more customised Vite configuration, either from a file and you plan to pass it in, or just in general, you can provide a custom vite config instead, using the customViteConfig method, this will expect the a JS object (that looks exactly like the one from vite.config.ts).

There are some small caveats and requirements though to make sure SSR works correctly, the reason it's a function is because we have an SSR and a non-SSR version that has to be given. The SSR version will of course build the output for the server and the non-ssr will build the client bundle.

For our use case, we will need to ensure the following is set:

{
	root: '' // The folder in which your web application is located.
	base: '/' // The base path of the web application, normally this is left as /.
	plugins: [] // A list of vite plugins you want to utilise.
	server: {
		middlewareMode: 'ssr', // Required.
		hmr: {
			port: 1234, // You need to set a port that is accessible for the Vite dev server.
		},
	},

	// SSR MODE ONLY
	// You will need some kind of if statement here, see the demo for an example.
	build: {
		ssr: 'ssr', // This should be the path to the entry-server.ts file.
		ssrManifest: true, // Required.
		outDir: '', // A folder for the server output, do not keep the client/server folder the same.
	},

	// NON SSR MODE ONLY
	build: {
		outDir: '', // A folder for the client output, do not keep the client/server folder the same.
	},
}

NOTE You will STILL need to define the other options, as the other options are used by the plugin so that it knows where to find files, when looking for things like the router, and other files, and additionally paths for compilation, so if you want a custom configuration, you will need to define them all as well.