SvelteKit Starter Template

A Minimal SvelteKit Starter Template with TypeScript, Tailwind CSS, and pre-configured with ESLint, Prettier, and Husky.

Features

  • āš” SvelteKit - Cybernetically enhanced web apps
  • šŸŽØ Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development
  • šŸ“¦ TypeScript - A typed superset of JavaScript that compiles to plain JavaScript
  • šŸ“ ESLint - The pluggable linting utility for JavaScript and JSX
  • šŸ›  Prettier - An opinionated code formatter
  • šŸ¶ Husky - A tool that makes Git hooks easy
  • šŸš« lint-staged - Run linters against staged git files
  • šŸ“„ commitlint - Lint commit messages
  • šŸ“¦ bun - A JavaScript runtime w/ Fast, disk space efficient package manager

Getting Started

Install degit globally

bun i -g degit || pnpm i -g degit || yarn global add degit || npm i -g degit

Create a new project from this template

degit rajput-hemant/sveltekit-template <project-name>
cd <project-name>

Install dependencies

bun i || pnpm i || yarn || npm i

Initialize a new git repository (Optional):

git init
git add .
git commit --no-verify -m "init"

Available Scripts

In the project directory, you can run:

Script Description
dev Runs the app in the development mode.
build Builds the app for production.
start Runs the built app in the production mode.
preview Builds and serves the app in the production mode.
lint Runs next lint on the project.
check Runs SvelteKit checks.
check:watch Runs SvelteKit checks in watch mode.
fmt:check Checks if the code is formatted with Prettier.
fmt:write Formats the code with Prettier.
prepare Installs husky git hooks.

Folder Structure

.
ā”œā”€ā”€ public
ā”‚Ā Ā  ā””ā”€ā”€ favicon.png
ā”œā”€ā”€ src
ā”‚Ā Ā  ā”œā”€ā”€ components
ā”‚Ā Ā  ā”‚Ā Ā  ā””ā”€ā”€ tailwind-indicator.svelte
ā”‚Ā Ā  ā”œā”€ā”€ lib
ā”‚Ā Ā  ā”‚Ā Ā  ā””ā”€ā”€ utils.ts
ā”‚Ā Ā  ā”œā”€ā”€ routes
ā”‚Ā Ā  ā”‚Ā Ā  ā”œā”€ā”€ +layout.svelte
ā”‚Ā Ā  ā”‚Ā Ā  ā””ā”€ā”€ +page.svelte
ā”‚Ā Ā  ā”œā”€ā”€ types
ā”‚Ā Ā  ā”‚   ā””ā”€ā”€ reset.d.ts
ā”‚Ā Ā  ā”œā”€ā”€ app.css
ā”‚Ā Ā  ā”œā”€ā”€ app.d.ts
ā”‚Ā Ā  ā””ā”€ā”€ app.html
ā”œā”€ā”€ bun.lockb
ā”œā”€ā”€ LICENSE
ā”œā”€ā”€ package.json
ā”œā”€ā”€ postcss.config.js
ā”œā”€ā”€ README.md
ā”œā”€ā”€ renovate.json
ā”œā”€ā”€ svelte.config.js
ā”œā”€ā”€ tailwind.config.js
ā”œā”€ā”€ tsconfig.json
ā””ā”€ā”€ vite.config.ts

After Installation Checklist

  • Update package.json with your project details.
  • Update README.md with your project details.
  • Update LICENSE with your name and year.

Switching Package Manager

This template uses bun as the default package manager. If you want to use pnpm, npm or yarn, you need to remove the bun.lockb file and run pnpm i, npm i or yarn to generate the lock file for the respective package manager.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributors:

Note: It may take up to 24h for the contrib.rocks plugin to update because it's refreshed once a day.

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes