Svelte Tricks #2 - Using Svelte Adders to save time when creating a new project

Published Apr 26, 2022

I think everyone has the issue at some point: creating a new project (or two or three) and spending some time to fetch the various dependencies you need.

So you get a smart idea, you set a github (or gitlab or anything git really) repository to serve as your own personal template.

But then as time goes on, you need to handle Sveltekit changing versions and encountering random small breaks (like a recent change in the svelte.config.js that removes the target tag). So now you need to update your template, update the dependencies and on and on and on it goes until you give up on it.

Turns out, we’ve now got a pretty nifty addition to the Svelte tooling: Adders!

Adders are a community project to help Svelte enjoyers who either:

• Want a ready to go template
• Have an existing project and want one single addition

Without further ado, let’s see a few commands:

# Create a new project with nifty prompts to pick and choose what you want
npm init @svelte-add/kit@latest

# Already know what you want? just pass it in
npm init --yes @svelte-add/kit@latest -- --with tailwindcss

Some parting words: these adders expect you to be using Sveltekit and the Vite bundler. I know that some projects “require” webpack or rollup (looking at you web3) and in that case you sadly won’t be able to use this nifty tool.