Creating the Perfect SvelteKit Template Project

The perfect way to utilize GitHub template repos

Why Use GitHub Template Repos?

As a freelance web developer, I searched for a while to find a way to quickly spin up new web projects. Most of my clients require fully custom web applications, so it became apparent pretty quickly that I needed to speed up the startup process on a new project. Sure, I could write a script that scaffolds out a new project, but when I found out about GitHub template repos, it was obvious that for me and my work, it was the way to go. If you are unfamiliar, you can check out GitHub's documentation on the feature here. Essentially, you can create a repository as you normally would, with all the source code for your project, and then mark the repository as a template. You and others can then go to that repo, and create a new repository that is a copy of that repo you made. This means you set up the perfect project template once, update it in one place, and use it as many times as you want.

Why Use SvelteKit?

SvelteKit is an open-source meta-framework that uses Svelte and Vite to allow developers to create web applications quickly and efficiently, with an excellent developer experience, and enough built-in features to make it powerful, but still light and flexible. Svelte places immense focus on the "HTML first, JavaScript if needed" approach to web development, which by default means we are sending smaller bundles to the client. SvelteKit is an open-source project and is backed by a very responsive core group of maintainers. It is also supported directly by Vercel, which makes deploying your apps as simple as possible (which we'll get to later). This makes SvelteKit a fantastic choice for freelance web developers.

Getting Our Template Started

We will start by creating a brand new SvelteKit app locally (for this, you'll need node and npm installed on your machine). Run the following command in your terminal.

npm create svelte@latest name-of-your-app

I named my app sveltekit-template, but feel free to be more original.

You will then be walked through a short setup cli. When asked about a Svelte app template, we'll choose 'Skeleton project'. Next, we'll decide to use type checking with JavaScript with JSDoc comments implementation (which is recommended by the project creators if you are needing type checking). For the additional options choices, I use prettier for code formatting but feel free to use your discretion here.

To finish our initial setup, we'll run the following commands in our terminal.

cd name-of-your-app
npm install
git init && git add -A && git commit -m "Initial Commit"
npm run dev -- --open

If we have successfully set up this project, you should now have a barebones SvelteKit app running on localhost:5173. We will not be going into depth on how to develop in SvelteKit in this post, because that is for another post (stay tuned for that one).

Adding TailwindCSS

Regardless of the continued debate on tech Twitter about the usefulness of Tailwind, I truly enjoy the experience of using it in my projects. Style configurations are easy to set up, and the utility classes are easy to remember, easy to use, and allow me to style components quicker than any other CSS-based tool I have used. You can learn more about TailwindCSS here!

To start configuring Tailwind in our template, start by running the following in your terminal, from the root directory of your project.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will install a few packages we will need and creates two new files in our project root.

We will next need to edit the svelte.config.js file, found at the root of your project.

import adapter from '@sveltejs/adapter-auto';
/* add this --> */ import { vitePreprocess } from '@sveltejs/kit/vite' 

/** @type {import('@sveltejs/kit').Config} */

const config = {
    kit: {
        adapter: adapter()
    },
    /* add this --> */ preprocess: vitePreprocess()
};

export default config;

Next, we will update the tailwind.config.js file, adding our file types to the content property.

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html, js, svelte, ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

We are almost ready to use Tailwind! The last thing to do before we test it out, we need to create a new file called app.css in the /src directory. Add the following code to that file.

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

We are ready to test our configuration! Create a file called +layout.svelte in the /src/routes directory. Add the following code to that file.

<script>
    import "../app.css"
</script>

<div>
    <h3 class="text-blue-600">This should be blue!</h3>
</div>

<slot />

Now, we can go ahead and run our app! Run the following command, and go to localhost:5173.

npm run dev

If the text we added at the top of the page is now blue, you have correctly set up TailwindCSS! Important to note, due to how CSS is handled in SvelteKit, we only have to import the app.css file in the layout. All pages you create that use that layout (which will be all new pages by default) will automatically have tailwind imported through that layout files import statement.

Final Tweaks To The Template

The last thing I did before turning this project into a GitHub template repo, was just make a few tweaks to SvelteKit to make it even friendlier to use.

First, inside the /src/lib directory, I deleted the index.js file they put there as a placeholder. I then added a components directory and a services directory there. I placed README.md files in these directories so git would pick them up.

Finally, I updated the svelte.config.js and the jsconfig.json files to handle my preferred alias overwrites.

/* svelte.config.js */

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
import path from 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),
        alias: {
            '@comps': path.resolve('./src/lib/components'),
            '@lib': path.resolve('./src/lib'),
            '@services': path.resolve('./src/lib/services')
        }
    },
    preprocess: vitePreprocess()
};

export default config;
/* jsconfig.json */

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "baseUrl": ".",
        "paths": {
            "@comps": ["src/lib/components"],
            "@lib": ["src/lib"],
            "@services": ["src/lib/services"]
        }
    }
}

These updates will allow you to use the alias tooling SvelteKit provides to import components and other files throughout your app.

So, if we are importing a button component into one of our pages, we could import the following

import Button from '@comps/button/button.svelte'

instead of

import Button from '../../../lib/components/button/button.svelte'

Turning This Project Into A GitHub Template Repo

Go ahead and commit all of our changes to your local Git repo, and then add this whole repo to GitHub as you normally would. Finally, you can go into your repo on GitHub, go into the settings for this specific repository, and you can check the 'Template Repository' option near the top of the general settings tab.

You've done it! You officially have a fantastic template to use for new web projects, utilizing modern tools like SvelteKit and TailwindCSS.

To test it out, go create a new repo from GitHub's website. Near the top, you'll see a dropdown labeled 'Repository Template', which defaults to no template. If you did everything correctly, if you click on that dropdown, you should see the name of your template repo as an option. Select that, give your new project a name, and click 'Create Repository.' You now have a brand new repo, with its source code, that is an exact match of our template. Now all you have to do is clone that new project locally, run npm install in the directory locally, and all the setup we have done on the template is already done for you.

Summary

Thanks for following along! I appreciate the read, and hopefully, you gained some value from walking through this with me. I use this particular template whenever a freelance client needs a custom website because I can spin it up in literal minutes, and start development right away. And using tools like SvelteKit and TailwindCSS helped me create really beautiful and performant websites quicker than with any other tools I have used. I highly recommend giving this stack a try in your next web project!

Link to my GitHub SvelteKit + TailwindCSS Template Repo