Svelte Headless UI Starter

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.

Demo

View the online demo to see what you can expect.

Highlights

🏗️ 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

Structure

The application structure is as follows:

├── src
│   ├── environment
│   ├── hooks
│   ├── lib
│   │   ├── core
│   │   │   └── services
│   │   │       ├── auth
│   │   │       ├── http
│   │   │       └── supabase
│   │   ├── data
│   │   ├── models
│   │   │   ├── classes
│   │   │   ├── interfaces
│   │   │   └── types
│   │   ├── shared
│   │   │   ├── components
│   │   │   │   ├── auth
│   │   │   │   ├── form
│   │   │   │   ├── meta
│   │   │   │   └── navigation
│   │   │   └── layouts
│   │   └── utils
│   └── routes
│       ├── account
│       └── api
│           ├── auth
│           └── user
├── static
└── tests

Developing

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

Making commits

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.

Adding a changeset

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.

Building

To create a production version of your app:

pnpm run build

You can preview the production build with npm run preview.

Versioning

To create a new version run pnpm changeset version and follow the prompts.

Publishing

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.

Deploying

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.

Vercel

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

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.

Rights

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.

lgs / svelte-headlessui-starter