svelte-kit-scss

svelte-kit-scss Starter Kit

This starter kit features Svelte and SCSS

Table of Contents

• svelte-kit-scss Starter Kit
  • Table of Contents
  • Overview
    • Tech Stack
    • Included Tooling
    • Architecture Decisions
  • Getting Started
    • CLI (Recommended)
    • Manual
    • Environment Variables
  • Commands
  • Demo Implementation
  • Live Demo

Overview

Tech Stack

• Svelte v3.x
• SvelteKit v1.x - svelte app builder
• Sass - Styling language

Included Tooling

• TypeScript - Type checking
• Storybook - Component library
• ESLint - Code linting
• Prettier - Code formatting
• Vite - Bundler
• Vitest - Unit Test Framework

Architecture Decisions

For this kit, we maintained the Sveltekit Project Structure and we do recommend it. For the src/lib/components folder, each component is co-located with its tests and stories. This structure makes it easy to find all the code and functionality related to a specific component. Due to Sveltekit's preference for data fetching from the route page, the components are primarily simple view components.

• Storybook

  Storybook was introduced because it is really a great tool for testing components in isolation and good for documentation.

• Styling

  Svelte comes with sass support. Sass is one of the most mature, stable, and powerful professional-grade CSS extension languages, it quickly allows us to design robust components.

• Example Components

  In this svelte-kit-scss/src/lib/components directory, you will find the Counter and Greeting directory.

  The Counter directory contains the following files:

  • Counter.spec.ts
  • Counter.svelte
  • Counter.stories.ts

  The Greeting directory contains the following files:

  • Greeting.spec.ts
  • Greeting.svelte
  • Greeting.stories.ts

Getting Started

CLI (Recommended)

npm create @this-dot/starter --kit svelte-kit-scss

or

yarn create @this-dot/starter --kit svelte-kit-scss

• Follow the prompts to select the svelte-kit-scss starter kit and name your new project.
• cd into your project directory and run npm.
• Run npm run dev to start the development server.
• Open your browser to http://localhost:5137 to see the included example code running.

Manual

Note: The command below clones the entire repository, including other starter kits.

git clone https://github.com/thisdot/starter.dev.git

• Copy and rename the starters/svelte-kit-scss directory to the name of your new project.
• cd into your project directory and run npm install.
• Run npm run dev to start the development server.
• Open your browser to http://localhost:5137 to see the included example code running.

Environment Variables

First, start by copying the contents of .env.example to .env.

cp .env.example .env

Commands

• npm run dev - Starts the development server.
• npm run test - Runs the unit tests.
• npm run test:e2e - Runs the playwright e2e tests.
• npm run storybook - Starts the Storybook UI.
• npm run format - Formats code with prettier for the entire project.
• npm run build - Builds the project for production.
• npm run start - Starts the dev server new tab.

Demo Implementation

Repository

The demo application tries to implement some of GitHub's pages and functionality. It uses the OAuth credentials in GitHub to authenticate users with their GitHub accounts and uses svelte's fetch api to fetch data from the GitHub API. Check out the link above to learn more or check out the demo!

Live Demo

This demo app gets deployed to Netlify on changes to the main branch.

https://svelte-kit-scss.starter.dev