defineConfig
Edit this pageThe defineConfig helper is from @solidjs/start/config and is used within app.config.ts.
It takes a configuration object with settings for SolidStart, Vite, and Nitro.
Configuring Vite
SolidStart supports most Vite options, including plugins via the vite option:
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({ vite: { // vite options plugins: [], },});The vite option can also be a function that can be customized for each Vinxi router.
In SolidStart, 3 routers are used:
server- server-side routingclient- for the client-side routingserver-function- server functions.
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({ vite({ router }) { if (router === "server") { } else if (router === "client") { } else if (router === "server-function") { } return { plugins: [] }; },});Serialization
SolidStart serializes server function payloads so they can move between server and client. You can configure the serializer mode to balance performance, payload size, and Content Security Policy (CSP) constraints.
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({ serialization: { mode: "json", },});Modes
json: UsesJSON.parseon the client. This is the safest option for strict CSP because it avoidseval. Payloads can be slightly larger.js: Uses Seroval's JS serializer for smaller payloads and better performance, but it relies onevalduring client-side deserialization and requiresunsafe-evalin CSP.
Defaults
- SolidStart v1 defaults to
jsfor backwards compatibility. - SolidStart v2 defaults to
jsonfor CSP compatibility.
Supported types (default)
SolidStart enables Seroval plus a default set of web platform plugins. These plugins add support for:
AbortSignal,CustomEvent,DOMException,EventFormData,Headers,ReadableStreamRequest,ResponseURL,URLSearchParams
Seroval supports additional value types. The compatibility list is broader than what SolidStart enables by default, so treat it as a superset. See the full list in the Seroval compatibility docs.
Configuring Nitro
SolidStart uses Nitro to run on a number of platforms.
The server option exposes some Nitro options including the build and deployment presets.
An overview of all available presets is available in the Deploy section of the Nitro documentation.
Some common ones include:
Servers
- Node.js Server (
node) (Default) - Deno Server (
deno_server) - Bun Server (
bun)
Providers
- Netlify Functions and Edge (
netlify,netlify-edge) - Vercel Functions and Edge (
vercel,vercel-edge) - AWS Lambda and Lambda@Edge (
aws_lambda) - Cloudflare Workers and Pages (
cloudflare,cloudflare_pages,cloudflare_module) - Deno Deploy (
deno_deploy)
Static site generation
By passing no arguments, the default will be the Node preset.
Other presets may be automatically detected by the provider, however, if not, they must be added to the configuration within the server-preset option.
For example, using Netlify Edge would look like the following:
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({ server: { preset: "netlify_edge", },});Special note
SolidStart uses async local storage. Netlify, Vercel, and Deno support this out of the box but if you're using Cloudflare you will need to specify the following:
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({ server: { preset: "cloudflare_module", rollupConfig: { external: ["__STATIC_CONTENT_MANIFEST", "node:async_hooks"], }, },});Within wrangler.toml you will need to enable node compatibility:
compatibility_flags = [ "nodejs_compat" ]Parameters
| Property | Type | Default | Description |
|---|---|---|---|
| ssr | boolean | true | Toggle between client and server rendering. |
| solid | object | Configuration object for vite-plugin-solid | |
| extensions | string[] | ["js", "jsx", "ts", "tsx"] | Array of file extensions to be treated as routes. |
| server | object | Nitro server config options | |
| serialization | object | Serialization settings for server function payloads. | |
| appRoot | string | "./src" | The path to the root of the application. |
| routeDir | string | "./routes" | The path to where the routes are located. |
| middleware | string | The path to an optional middleware file. | |
| devOverlay | boolean | true | Toggle the dev overlay. |
| experimental.islands | boolean | false | Enable "islands" mode. |
| vite | ViteConfig or ({ router })=>ViteConfig | Vite config object. Can be configured for each router which has the string value "server", "client" or "server-function"` |