Quick steps to setup a new SvelteKit project

svelte-kit-setup.md

Quick steps to setup a new SvelteKit project

In the past I've used GitHub template repo or starter project... however, I don't believe this provides the value I've hoped for.

Templates and starter projects are frozen in time and do not benefit from the improvements to the CLI tools that scaffold and initialize the tools Idepend on. Furthermore, I have to manually handle updates to packages, as at the start of a new project I want my dependencies to be up to date.

I believe Following a simple guide will be just as fast whilst benefiting from the latest improvements to the tools, and having an oportinity to modify, or omit the steps I don't need.

Core App

Initialize SvelteKit

npm create svelte@latest my-app

# 1. Skeleton project, or Library.
# 2. Use TypeScript syntax, or JSDOC if working on a library.
# 3. Select Prettier and any other relevant options.

pnpm add -D prettier-plugin-svelte zod

svelte.config.js - Append or replace the kit value

import adapter from '@sveltejs/adapter-vercel';

const config = {
  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter(),
    alias: { $src: 'src', $lib: 'src/lib' },
    env: {
      publicPrefix: 'PUBLIC_'
    },
    typescript: {
      config: (initial) => ({
        ...initial,
        compilerOptions: {
          ...initial.compilerOptions,
          allowJs: true,
          checkJs: true,
          esModuleInterop: true,
          forceConsistentCasingInFileNames: true,
          resolveJsonModule: true,
          skipLibCheck: true,
          sourceMap: true,
          strict: true
        }
      })
    }
  }
};

export default config;

package.json - Add or replace scripts

{
  "scripts": {
    "build": "vite build --mode production",
    "check:error": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --threshold error",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --output human",
    "dev:prod": "vite dev --mode production",
    "vercel": "npx vercel env pull .env.development && npx vercel env pull .env.production  --environment production",
    "webhook": "npx webhookthing@latest",
    "sync": "svelte-kit sync"
  }
}

Initialize .vscode

mkdir ./.vscode && touch ./.vscode/settings.json && touch ./.vscode/extensions.json

.vscode/extensions.json

{
  "recommendations": [
    "aaron-bond.better-comments",
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "mikestead.dotenv",
    "svelte.svelte-vscode"
  ]
}

.vscode/settings.json

{
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.prettier": true
    }
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.prettier": true,
      "source.organizeImports": true
    }
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  },
  "files.associations": {
    ".css": "postcss"
  },
  "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "explorer.compactFolders": false,
  "files.exclude": {
    "**/.cache": true,
    "**/.DS_Store": true,
    "**/.gitattributes": true,
    "**/*-lock.*": true,
    "**/*.Identifier": true,
    "**/*.map": true,
    "**/.turbo": true,
    "**/node_modules": true,
    "**/tsconfig.tsbuildinfo": true,
    ".eslintcache": true
  },
  "files.watcherExclude": {
    "**/node_modules": true,
    "**/.svelte-kit": true
  },
  "problems.sortOrder": "severity",
  "todo-tree.tree.scanMode": "workspace only"
}

Initialize Tailwind

pnpm add -D tailwindcss postcss autoprefixer @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typography prettier-plugin-tailwindcss tailwind-merge
pnpm dlx tailwindcss init -p

tailwind.config.js

import colors from 'tailwindcss/colors';
import defaultTheme from 'tailwindcss/defaultTheme';
import plugin from 'tailwindcss/plugin';

const font_sans = ['InterVariable', 'Inter', ...defaultTheme.fontFamily.sans];

/** @type {import('tailwindcss').Config} */
export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
		extend: {
			fontFamily: {
				sans: font_sans.toString()
			},
			colors: {
				white: '#fff',
				black: '#000',
				mono: colors.zinc,
				brand: colors.orange
			}
		}
	},

	plugins: [
		require('@tailwindcss/typography'),
		require('@tailwindcss/aspect-ratio'),
		require('@tailwindcss/forms'),

		plugin(function ({ addVariant }) {
			addVariant('hocus', ['&:hover', '&:focus', '&:focus-visible']);
			addVariant('error', ['&:invalid', '&.invalid']);
			addVariant('current', ['&.current']);
			addVariant('resting', ['&:not(.current)']);
		})
	]
};

src/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

src/routes/+layout.svelte

<script lang="ts">
  import '../app.css';
</script>

<slot />

<style lang="postcss">
  :global(html) {
    background-color: theme(colors.indigo.200);
  }
</style>

Initialize lint-staged with husky

pnpm add -D lint-staged
pnpm dlx husky-init && pnpm install

.husky/pre-commit

#add this line to the end of the file
npx lint-staged

package.json - Add lint-staged value

{
  "lint-staged": {
    "*.{js,ts,cjs,mjs,svelte,html,md,mdx,json,css}": "prettier  --write"
  }
}

Final Checks

• Check @fontsource for fonts
• Run pnpm up -i --latest to check for updates
• Frequently used dependencies
  • pnpm add date-fns
  • pnpm add spacetime
  • pnpm add svelte-french-toast
  • pnpm add @inqling/svelte-icons
  • pnpm add svelte-meta-tags
  • lucia
  • drizzle
  • angus-c/just-*