An opinionated PWA ready sveltekit starter project with Clean Architecture.
Overview
The SvelteKit Starter is an opinionated project template designed to create Progressive Web Apps (PWAs) using SvelteKit. It follows the folder structure recommended by Clean Architecture and includes various features and utilities to enhance the development process. With support for HTML templates, tailwindcss, SASS, and more, this starter project provides a strong foundation for building robust and scalable web applications.
Features
- HTML template: Includes a basic SEO support HTML template by Joshua Comeau.
- tailwindcss setup: Provides a pre-configured setup for tailwindcss, a utility-first CSS framework.
- SASS setup: Includes SASS setup for enhanced CSS development capabilities.
- CSS reset: Implements a CSS reset based on Joshua Comeau’s article for consistent styling across different browsers.
- Prettier setup: Includes a pre-configured setup for Prettier, a code formatter, with a tab width of 6 spaces.
- Vitest: Utilizes Vitest for running tests within the SvelteKit project.
- TypeScript support: Enables TypeScript support for the project, enhancing type safety and development experience.
- QR Code for localhost URL: Automatically generates a QR code for the localhost URL of the project and prints it in the terminal using the support of qrcode-terminal.
- Device detection: Provides utilities for detecting the device on which the web application is being accessed.
- Svelte actions: Includes frequently used Svelte actions like clickoutside and pannable for easier and more interactive user interactions.
- More useful actions and utils: Offers additional actions and utilities from the @svelteuidev/composables package to enhance the development process.
- TODO service worker support: Provides support for service workers, enabling offline usage of the application.
Installation
To install the SvelteKit Starter, follow these steps:
- Create a new project using your preferred package manager (npm, pnpm, or yarn):
npm init svelte@next my-app - Navigate to the project directory:
cd my-app - Install the project dependencies:
npm install - Start the development server:
npm run dev
Summary
The SvelteKit Starter project template offers a comprehensive set of features and utilities to facilitate the development of PWAs using SvelteKit. With pre-configured setups for HTML, tailwindcss, SASS, and Prettier, developers can quickly start building their applications with a solid foundation. Additionally, the included device detection, Svelte actions, and utility packages enhance the development experience and enable more interactive user interactions. With support for TypeScript and service worker for offline usage, this starter project provides a robust framework for creating modern web applications.
