sveltekit-adapter-html-like
v1.0.1
Published
SvelteKit adapter for HTML-like template engines such as PHP, Blade, Handlebars, etc.
Maintainers
idlebergReadme
sveltekit-adapter-html-like
Adapter for SvelteKit apps that prerenders your site as static files for template engines such as PHP, Blade, Embedded Ruby (ERB), Handlebars, EJS etc.
This package is a fork of @sveltejs/adapter-static (currently tracking v3.0.10) that adds a couple of extra features:
- tag injection
- string replacement
- minify/prettify output
- custom file extensions
Requires SvelteKit 2 and Node 20.19, 22.13 or 24 and later.
Usage
Install with npm i -D sveltekit-adapter-html-like, then add the adapter to your svelte.config.js:
// svelte.config.js
import adapter from 'sveltekit-adapter-html-like';
export default {
kit: {
adapter: adapter()
}
};Unless you're in SPA mode, every route must be prerenderable. The usual way to achieve this is to add export const prerender = true to your root +layout.js.
Options
pages
Type: string
Default: build
The directory to write prerendered pages to. It defaults to build.
assets
Type: string
Default: the value of pages
The directory to write static assets (the contents of static, plus client-side JS and CSS generated by SvelteKit) to. Ordinarily this should be the same as pages, and it will default to whatever the value of pages is, but in rare circumstances you might need to output pages and assets to separate locations.
fallback
Type: string
Default: undefined
Specify a fallback page for SPA mode, e.g. index.html or 200.html or 404.html.
precompress
Type: boolean
Default: false
If true, precompresses files with brotli and gzip. This will generate .br and .gz files.
Compression runs after the markup has been transformed, so the compressed copies match what the adapter actually writes. Note that SvelteKit only compresses a fixed set of extensions (.html, .js, .css, .json, .svg, .xml, .wasm, .txt, .md, .mdx), so setting a targetExtension such as .php leaves your pages uncompressed — which is usually what you want, since the server executes those rather than serving them as-is. Assets are compressed either way.
injectTo
Type: object
Default: {}
Allows the injection of markup, valid HTML or otherwise, into the <head> or <body>. You can use the same positions as insertAdjacentHTML:
beforebeginafterbeginbeforeendafterend
Example
Let's inject some WordPress tags into the page
adapter({
injectTo: {
head: {
beforeend: ['<?php wp_head(); ?>']
},
body: {
beforeend: ['<?php wp_footer(); ?>']
}
},
targetExtension: '.php'
});replace
Type: array
Default: []
String replacements run on every page
Example
Once again, a WordPress example
adapter({
replace: [
{
from: '<html lang="en">',
to: '<html <?php language_attributes(); ?>>'
// many: true (optional)
}
],
targetExtension: '.php'
});minify
Type: boolean
Default: false
Enable minification of output files. Takes precedence over prettify.
prettify
Type: boolean
Default: true
Format the output with Prettier. Your project's Prettier config is picked up automatically, if there is one. Ignored when minify is enabled.
strict
Type: boolean
Default: true
Fail the build when routes are not prerenderable. See the adapter-static docs.
targetExtension
Type: string
Default: .html
Modifies the extension of the target file, e.g. .php or .hbs
SPA mode
You can use sveltekit-adapter-html-like to create a single-page app or SPA by specifying a fallback page.
In most situations this is not recommended: it harms SEO, tends to slow down perceived performance, and makes your app inaccessible to users if JavaScript fails or is disabled (which happens more often than you probably think).
The fallback page is a blank HTML page that loads your SvelteKit app and navigates to the correct route. For example Surge, a static web host, lets you add a 200.html file that will handle any requests that don't otherwise match. We can create that file like so:
// svelte.config.js
import adapter from 'sveltekit-adapter-html-like';
export default {
kit: {
adapter: adapter({
fallback: '200.html'
})
}
};When operating in SPA mode, only pages that have the prerender option set will be prerendered.
Related
License
This work is licensed under The MIT License