sven
is a minimal static site generator for svelte. It aims to implement the following use-case:
If you have a more advanced use-case you may want to evaluate one of the following:
Created a new index.svelte
file in a pages
directory:
<main>Home</home>
sven
requires both svelte
and rollup
as peer dependencies.
$ yarn add svelte rollup rollup-config-sven -D
After you've installed the dependencies, you can run the build with:
$ npx rollup -c node:sven
You should now have a public
directory containing your static files!
Check out the example for a more advanced example.
sven
is built on rollup, and uses the following strategy:
sven
uses the filesystem to define routing. All svelte components found in the
Each svelte component is treated as an individual app. An entrypoint is dynamically generated as a virtual module at compile-time and used as the rollup input.
This is processed by a variety of rollup plugins that perform the following steps for each detected route:
This leaves you with a deployable static site in the
Any CSS or Javascript that is parsed from the svelte component is emitted as a chunk into <assetDir>/<pagesDir>
under the path of the route.
Example:
admin/dashboard.svelte -> <assetDir>/<pagesDir>/admin/dashboard.[hash].css
admin/dashboard.svelte -> <assetDir>/<pagesDir>/admin/dashboard.[hash].js
Svelte itself is also treated as an external module so that it can be cached across routes. It is generated into <assetDir>/<pagesDir>/svelte.[hash].js
and linked in all resulting HTML files.
You can modify the sven
configuration with a sven.config.js
.
You can view the default config here.
module.exports = {
/**
* Set the output directory
*/
outDir: 'public',
/**
* Set the asset directory.
* All css and js files are put here
*/
assetDir: 'assets',
/**
* Set the pages directory.
* All .svelte files in this directory are used as individual
* routes
*/
pagesDir: 'pages',
/**
* Set the static assets directory.
* Files in this directory are copied to the <outDir>
*/
staticDir: 'static',
/**
* Enables clean urls.
* Nested routes will use their name as a directory name and
* will have an index.html created inside.
*
* Example:
*
* about.svelte -> about/index.html
*/
cleanUrls: true,
/**
* Sets a list of paths to be bundled under a common.[hash].css file
*/
commonStyles: ['styles/common.css'],
/**
* Enables production optimizations
*/
production: process.env.NODE_ENV === "production" || !process.env.ROLLUP_WATCH,
/**
* Enables source map generation
*/
sourceMaps: !production,
/**
* This object is passed directly into the rollup-plugin-svelte function
*/
svelteConfig: {
emitCss: true
}
}
Install dependencies:
$ yarn
Run in development mode:
$ yarn dev
Build:
$ yarn build