SvelteKit as PWA on GitHub pages or your own server
Tags: svelte, sveltekit, webdev
Published: 2023-08-23 19:54:10

## What you can expect

I needed something to jump-start development and couldn't find the right kind of starter package to actually save time, so here is a sveltekit boilerplate fulfilling the following needs:

- Tailwind installed & set up
- [Flowbite Svelte](https://flowbite-svelte.com/) because it's awesome
- Color generator for CI adaptations
- GitHub action to deploy to GitHub pages during review cycles
- Zero configuration PWA support

{% details summary %} 
[Installation via npx](#installation-via-npx)
[Installation via GitHub template](#installation-via-github-template)
[About colors](#about-colors)
[Deploying on GitHub pages](#deploying-on-github-pages)
[PWA pitfalls](#pwa-pitfalls)
{% enddetails %}

## Installation via npx

It doesn't get any faster than that. Be up & running in approx. 30 seconds when installing via npx (the command is available if you have npm installed)

`npx svelte-flowbite-boilerplate@latest <project-name>`

The command checks whether you have yarn installed, and falls back to npm if not. Either way, just follow the instructions given to you after installation and you are ready to develop.

### Pros
This is by far the fastest way to start developing.

### Cons
This will not create a GIT repository. 

## Installation via GitHub template

Use the "use template" button at the [repo](https://github.com/sroehrl/svelte-flowbite-boilerplate) to create your own copy of the repository and check your project out from there. 

### Pros
You can directly work in GitHub's VSCode environment on the fly. 

### Cons
The process takes slightly longer.

## About colors
As mentioned, the package comes with a color palette generator. In order to use it, open "src/lib/colors.js" and change/add colors as you please.
Note that some named colors of flowbite-svelte can be overwritten like that as well (e.g. primary, red, etc.).

When serving the project, you can navigate to /docs to see your colors rendered.


![Rendered colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7c8ub4fn9fpbywjurali.png)

## Deploying on GitHub pages
Whether you want to make use of free hosting, or to show your team/clients your work in progress: you can choose to deploy your project on GitHub pages by simply going to your repo's settings and activating the pages using GitHub actions. The script is already set up and ready to be used.

An example of that can be seen at the repository itself:
[gh-page of svelte-flowbite-boilerplate](https://sroehrl.github.io/svelte-flowbite-boilerplate)

## PWA pitfalls

The PWA runs out of the box, but some things aren't automated yet. To adjust everything to your needs, (re-)visit the manifest.json and the icons in the folder "/static"

{% collapsible note! %} 
You might encounter issues if you are reusing this repo as the webworker get's confused when running another app on the same localhost port. Clear your browser's site data if that occurs. 
{% endcollapsible %}

## That's it to get you started

If you need details as you aren't familiar with one of the tools used, please use the links provided in the docs. You will find that the people at flowbite-svelte did a great job of making your process as easy as it gets.
Lastly, if you like this boilerplate, please be so kind and star the repository.


{% embed https://github.com/sroehrl/svelte-flowbite-boilerplate %}