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

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

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).

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

• Typescript - JS preprocessor
• tslib - TS runtime library

• Pug - HTML template engine

• Autoprefixer - CSS vendor prefixing

• PostCSS - CSS transformations

• TailwindCSS - CSS framework

• Tailwind Plugins (optional)

• tailwindcss/typography - prose styling

• tailwindcss/forms - form styling

• Prettier - formatter

• Prettier Plugins

• @prettier/plugin-pug - Pug formatting
  

• prettier-plugin-svelte - Svelte formatting
  

• ESLint - linter

• ESLint Parsers & Plugins

• eslint-config-prettier - compatibility w/ prettier

• typescript-eslint/parser - TS parsing

• typescript-eslint/eslint-plugin - TS

• Playwright - cross-browser testing
• Vitest - unit testing

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

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

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.

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.**

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

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'}".

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>

Syntax to use Svelte Element directives with Pug

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

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'

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.

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.

This starter is optimized for use with Node 18x and PNPM 8x. You can learn more about PNPM here.