Preact preset for the vite bundler
npm install @preact/preset-viteAn all in one preset for writing Preact apps with the vite bundler.
Features:
- Sets up Hot Module Replacement via prefresh
- Enables Preact Devtools bridge during development
- Aliases React to preact/compat
> If you want to look into testing Preact with Vitest Browser mode check out vitest-browser-preact
First intall the preset package from npm:
``bash`
npm install --save-dev @preact/preset-viteor
yarn add -D @preact/preset-vite
Enhance your vite config with the Preact preset plugin in your vite.config.ts or vite.config.js:
`js
import { defineConfig } from "vite";
import preact from "@preact/preset-vite";
export default defineConfig({
plugins: [preact()]
});
`
Options can be passed to our preset plugin via the first argument:
`js`
export default defineConfig({
plugins: [
preact({ devtoolsInProd: true })
]
});
| Option | Type | Default | Description |
|---|---|---|---|
| devtoolsInProd | boolean | false | Inject devtools bridge in production bundle instead of only in development mode |devToolsEnabled
| | boolean | true | Inject devtools bridge |prefreshEnabled
| | boolean | true | Inject Prefresh for HMR |reactAliasesEnabled
| | boolean | true | Aliases react, react-dom to preact/compat |babel
| | object | | See Babel configuration |prerender
| | object | | See Prerendering configuration |
#### Babel configuration
The babel option lets you add plugins, presets, and other configuration to the Babel transformation performed on each JSX/TSX file.
`js`
preact({
babel: {
presets: [...],
// Your plugins run before any built-in transform (eg: Fast Refresh)
plugins: [...],
// Use .babelrc files
babelrc: true,
// Use babel.config.js files
configFile: true,
}
})
#### Prerendering configuration
| Option | Type | Default | Description |
|---|---|---|---|
| enabled | boolean | false | Enables prerendering |renderTarget
| | string | "body" | Query selector for where to insert prerender result in your HTML template |prerenderScript
| | string | undefined | Absolute path to script containing exported prerender() function. If not provided, will try to find the prerender script in the scripts listed in your HTML entrypoint |additionalPrerenderRoutes
| | string[] | undefined | Prerendering will crawl your site automatically, but you'd like to prerender some pages that may not be found (such as a /404 page), use this option to specify them |previewMiddlewareEnabled
| | boolean | false | Vite's preview server as of v5 will not use our prerendered HTML documents automatically. This option enables a middleware that will correct this, allowing you to test the result of prerendering locally |previewMiddlewareFallback
| | string | /index.html | Fallback path to be used when an HTML document cannot be found via the preview middleware, e.g., /404 or /not-found will be used when the user requests /some-path-that-does-not-exist |
To prerender your app, you'll need to do these things:
1. Enable prerendering in the plugin options
2. Specify your render target, if you want the HTML to be inserted anywhere other than the document.body. This location likely should match render(), i.e., render( -> '#app'
4. Create and export a function from a script. You could add this to your app entrypoint or create a completely separate file for it, either will work. See below for a usage exampleprerender()
5. Specify where your function is by either a) adding a prerender attribute to the script tag that contains it in your entry HTML (
data: { url: data.url },
// Optionally configure and add elements to the
of
// the prerendered HTML document
head: {
// Sets the "lang" attribute:
lang: 'en',
// Sets the title for the current page:
title: 'My cool page',
// Sets any additional elements you want injected into the :
//
//
elements: new Set([
{ type: 'link', props: { rel: 'stylesheet', href: 'foo.css' } },
{ type: 'meta', props: { property: 'og:title', content: 'Social media title' } }
])
}
};
}
``MIT, see the license file.