Launch your next Svelte app using Headless UI.
Svelte Headless UI Starter is a template designed to make it easier and faster to build libre Svelte apps using Headless UI. The starter intends to remain as close as possible to the default experience one might achieve using npm init svelte@next
and then building a minimalist app skeleton with Headless UI.
View the online demo to see what you can expect.
- ποΈ SvelteKit cybernetically enhanced routing
- π¨ Svelte for developing fast, lightweight apps
- π¨ Tailwind CSS with Forms and Typography plugins
- π§ͺ Headless UI for a sophisticated, accessible UI
- π Prettier with Tailwind automatic class sorting
- π© Unplugin Icons to access to all IcΓ΄nes icons
- β‘οΈ Cssnano for production stylesheet compression
- β‘οΈ Service Worker dynamic resource caching
- βοΈ Fontsource self-hosted web font integration
- π Playwright browser testing framework
- π¦ Changesets to manage versioning and changelogs
- π Basic SEO with large social sharing cards
- π Vercel deployments functional out of the box
- π OAuth via GitHub, extendible to other providers
- βοΈ Supabase integration for dynamic navigation
- π· Gravitar support for non-logged in users
- π AGPL-licensed free (as in freedom) software
The application structure is as follows:
βββ src
β βββ environment
β βββ hooks
β βββ lib
β β βββ core
β β β βββ services
β β β βββ auth
β β β βββ http
β β β βββ supabase
β β βββ data
β β βββ models
β β β βββ classes
β β β βββ interfaces
β β β βββ types
β β βββ shared
β β β βββ components
β β β β βββ auth
β β β β βββ calendar
β β β β βββ form
β β β β βββ meta
β β β β βββ navigation
β β β βββ layouts
β β βββ utils
β βββ routes
β βββ account
β βββ api
β βββ auth
β βββ user
βββ static
βββ tests
Once you've created a project and installed dependencies with pnpm install
, start a development server:
pnpm run dev
# or start the server and open the app in a new browser tab
pnpm run dev -- --open
Use the approach that best suits your personal preferences and preferred work style. If you would like to add emojis to your commit messages, see Emojify Conventional Commits with Git for one approach.
To add a changeset run pnpm changeset
and follow the prompts. If this is your first time adding a changeset, run pnpm changeset init
to create the .changeset
folder and commit it to the repository.
To create a production version of your app:
pnpm run build
You can preview the production build with npm run preview
.
To create a new version run pnpm changeset version
and follow the prompts.
To publish a new version run pnpm changeset publish
to generate a CHANGELOG
, followed by git push --follow-tags
. Assumes you have logged into NPM and have a git remote configured.
Supported deployment environments include Vercel, Cloudflare and Netlify. Other environments may be included in the future. See adapter-auto for most current list of supported environments. Instructions for Vercel and Cloudflare included below.
To deploy your app to Vercel run vercel
for testing or vercel --prod
for production. Assumes you've signed-up for and authenticated with Vercel from the Vercel CLI. No additional configuration is required. If you wish to create a Continuous Integration (CI) setup with a git repo connected to Vercel, consult the Vercel docs.
Cloudflare is a little more involved and deployments blocked until sk-auth/issues/42 is resolved. The referenced issue has an open pull request in case you wish to fork until the package is updated with a fix.
Start by updating the adapter used in svelte.config.js
and change the import for adapter-auto
to adapter-cloudflare
. The Cloudflare adapter is already included with adapter-auto
, though you may wish to pnpm add -D adapter-cloudflare
to be more explicit and then remove adapter-auto
from the project.
You can get a CI setup running without any additional configuration described in the Cloudflare Docs for Svelte. Reference the engines
property in package.json
for the minimum Node version required to build the project.
For CLI-based deployments use the wrangler publish
command. Assumes you've signed-up for and logged into your Cloudflare account using Wrangler CLI, and that a wrangler.toml
has been created within the project. See Wrangler Configuration and here for additional help.
Svelte Headless UI Starter - Launch your next Svelte app using Headless UI.
Copyright (C) 2022 VHS <vhsdev@tutanota.com> (https://vhs.codeberg.page)
Svelte Headless UI Starter is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.