Svelte Typescript Tailwind Pug Starter Template

A starter template to help you quickly launch a new project with Svelte / Sveltekit, Typescript, TailwindCSS, Pug. I call it the "Skinnypug" stack.  

0. Contents

1. About this Template
2. Dependencies
3. Getting Started
4. About Sveltekit
5. Using Pug with Svelte
6. Folder Shortcuts
7. Editor & Extensions
8. Deploying
9. Engine & Package Manager

1. About This Template

This starter was developed for the Lightning Jar team. It's designed to get one up and running quickly on a new project using the core technologies Svelte, Sveltekit, Typescript, TailwindCSS, Pug + a few other bells and whistles ( see the full breakdown below).

2. Dependencies

A. Frameworks & Build

• Svelte - component framework
• Sveltekit - application framework
• Vite - front-end build tool

B. Scripting / Typescript

• Typescript - JS preprocessor
• tslib - TS runtime library

C. Templating / Pug

• Pug - HTML template engine

D. CSS / TailwindCSS

• Autoprefixer - CSS vendor prefixing

• PostCSS - CSS transformations

• TailwindCSS - CSS framework

• Tailwind Plugins (optional)

• tailwindcss/typography - prose styling

• tailwindcss/forms - form styling

E. Formatting / Prettier

• Prettier - formatter

• Prettier Plugins

• @prettier/plugin-pug - Pug formatting
  

• prettier-plugin-svelte - Svelte formatting
  

F. Linting / ESLint

• ESLint - linter

• ESLint Parsers & Plugins

• eslint-config-prettier - compatibility w/ prettier

• typescript-eslint/parser - TS parsing

• typescript-eslint/eslint-plugin - TS

G. Testing

• Vitest - unit testing

3. Getting Started

A. Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

B. Building

To create a production version of your app:

npm run build

C. Preview

You can preview the production build with npm run preview.

4. About SvelteKit

Sveltekit is a new framework for building web applications. It's built on top of Svelte, which is a component framework for building user interfaces. Sveltekit is a great tool for building modern web applications.

If you get stuck working with SvelteKit you can reach out for help in the SvelteKit Discord chatroom.

5. Using Pug with Svelte

I love Pug, and the first thing I figured out when I started working with Svelte, was how to use Pug inside Svelte files. Thankfully other devs had already solved the technical challenges for me.

This starter uses the svelte-preprocess package.It is a Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript, Pug and much more.

Note: Special syntax is required to write Pug inside Svelte templates. Some basics are included below. You can learn more here.**

A. How to write Svelte's Template Syntax using Pug Mixins

Because some of Svelte's template syntax is invalid in Pug svelte-preprocess provides some pug mixins to represent svelte's {#...}{/...} blocks: +if(), +else(), +elseif(), +each(), +key(), +await(), +then(), +catch(), +html(), +const(), +debug().

ul
    +if('posts && posts.length > 1')
        +each('posts as post')
            li
                a(
                    href="blog/{post.slug}",
                    rel="prefetch") {  post.title  }
        +else
            span No posts :c

B. Svelte Element Attributes and Callbacks Using Pug

Pug encodes everything inside an element attribute to html entities, so attr="{foo && bar}" becomes attr="foo && bar". To prevent this from happening, instead of using the = operator use != which won't encode your attribute value:

button(disabled!="{ foo && bar }")

This is also necessary to pass callbacks:

button(on:click!="{ (e) => doTheThing(e) }")

It is not possible to use template literals for attribute values. You can't write attr=`Hello ${value ? 'Foo' : 'Bar'}`, instead write attr="Hello {value ? 'Foo' : 'Bar'}".

C. Spreading props in Svelte using Pug

To spread props into a pug element, wrap the {...object} expression with quotes ".

This:

button.big(
    disabled,
    type="button",
    {...slide.props}) Send

Becomes:

<button
    class="big"
    type="button"
    disabled
    {...slide.props}
>
    Send
</button>

D. Svelte Element Directives using Pug

Syntax to use Svelte Element directives with Pug

input(bind:value="{ foo }")
input(on:input="{ bar }")

6. Folder Shortcuts

The following shortcuts and corresponding folders come pre-configured in this template:

• $atoms: './src/lib/components/atoms'
• $assets: "./src/lib/assets",
• $components: './src/lib/components'
• $data: '.src/lib/data'
• $lib: './src/lib'
• $molecules: './src/lib/components/molecules'
• $organisms: './src/lib/components/organisms'
• $stores: './src/lib/stores'
• $tools: './src/lib/tools'
• $types: './src/lib/types'
• $utils: './src/lib/utils'

7. Editor & Extensions

If you are using VSCode, we recommend these extensions:

• Svelte for VS Code
• ESLint
• Prettier
• Tailwind CSS Intellisense
• Playwright Test for VSCode

• note: This template includes a .vscode folder with some pre-configured settings for VSCode. Set "editor.formatOnSave": true to activate formatting on save.

• note: Tf you are using the ESLint extension, you will need to set "eslint.experimental.useFlatConfig": true in your VSCode settings, so the extension can read the 'eslint.config.js' file used in this project.

8. Deploying

This starter is optimized for quick deployment of your projects to Vercel using the Vercel for GitHub integration. You can learn more in the Vercel documentation.

This starter uses the Vite adapter for Vercel.

For more universal use, switch back to the Auto adapter by changing the adapter in the svelte.config.js file.

9. Engine & Package Manager

This starter can be used with multiple package managers. It is tested with PNPM, but should work with NPM or Yarn as well. The engine is not set in stone, but the starter is tested with Node 20.0.0.