Minimalist boilerplate designed to be a barebones frontend start to almost any web application, but especially a Single Page Application (SPA) and Progressive Web App (PWA)
If you're building an application in Svelte 3 but Sapper is not suited for your needs, this may save you a few hours to days of development time. See how it looks and behaves at https://svelte-minimal.netlify.app/
- SPA: Runs as a Single Page App
- PWA: Incorporates service-worker and web manifest
- Mobile and Desktop ready
- Automated build:
npm run build
compiles and moves everything to/public
- Painless development:
npm run frontend
opens a local server with hot module replacement (HMR) - Not opinionated: so barebones that you can easily modify, add or remove almost anything without breaking it
- 100 Score in Lighthouse! (Well, not hard, tbh, given how minimalist this really is. But still! A good start)
- Have basic knowledge of Svelte 3 and frontend application development in general
- Put static files (e.g. images, fonts, html files) in
/static
and any of its subdirectories - Develop in
/src
directory:.svelte
,.ts/.js
,.scss/.css
npm run frontend
will crank up a local server so you can see your changes immediately- Files you want associated with the project but not tracked by git can be put in
/RAW
The tech stack uses Typescript, SASS and Webpack by default, but it's not necessary to use them. It will require a bit of work to jettison them though. This section is not a complete guide to doing that, but does have some general advice. If you manage it and want to share how, let me know
To jettison Webpack:
- You will need some other bundler, like Rollup
To jettison Typescript:
- Type
npx tsc --listEmittedFiles
into the console. The listed files (Likely onlymain.js
) are the javascript versions of the Typescript files - Inside the
.svelte
files change<script lang="ts">
to<script>
- Following error messages and such, remove Typescript specific language (e.g. change
let main: HTMLElement
tolet main
) - Modify your bundler as necessary
- Good luck! Consider using it, though, if you can
To jettison SASS:
- Type
npx sass .src/styles:.src/styles
and delete any.scss
files - Modify your bundler as necessary
Make sure node is installed. Clone from the repository
npm install
then
npm run frontend
npm run build
and now your project is in /public
Some people and resources made this go much more quickly. If you contribute, you also will be listed here!
- rixo over at svelte-loader-hot is kind and responsive, and his pioneering work on this made the hot loading part of this possible now rather than next year
- routing in Svelte 3 is as-yet a bit immature, and this article by codechips helped speed me along the path
- VisionMedia created the router pagejs that just worked out of the box
- Icons are from https://material.io/resources/icons/