Svelte is a new component framework that runs at build time, converting your JavaScript components into highly efficient imperative code that surgically updates the DOM. With Storybook you can visualize different states of your UI components and develop them outside of your application.
I developed this boilerplate to understand how both these libraries work within a build environment using Webpack, SCSS and Nunjucks for a website that has a combination of static pages and apps. The static page generation in this boilerpalte is specific to my needs, it can be easily replaced with other templating engines &/or loaders.
- Built with Webpack 4
- ES6 Support via Babel 7
- Nunjucks templates and support for multiple static pages via a custom nunjucks-html-loader forked from nunjucks-html-loader
- SCSS support via sass-loader
- Styling using CSS framework Bulma
- Linting via eslint-loader
- Map component using Leaflet and Svelte
Download or clone the repository and install dependencies.
cd svelte-storybook-nunjucks-boilerplate
npm install
npm run start
npm run build
npm run storybook
npm run build-storybook
This project owes a lot to following projects:
- Killer Storybook Config
- Starter Kit from Financial Times
- Vue components for MapboxGL
- Svelte example
- Stack Overflow
- Svelte and Storybook Docs