Motivation
As developers we’re supposed to be lazy. Especially too lazy to create a new build setup for every project we start. That’s why there’re a lot of tools out there that help us with preconfigured build setups we can extend if really needed. With node we have a very powerful tool on hand to do so. How we can start two simple projects will be shown in this post. What build tool are we using?
In this small guide we will be using ViteJS
We’re using Vite, because it’s one of the fastest build tools out there. It’s relatively easy to configure additional behavior and you can extend it with some of the existing Rollup plugins.
Start a basic Svelte project
When should I?
If we’re talking about a “basic” svelte project, then we’re talking about one without an router. Svelte will be only used for templating. So you don’t have to worry about additional complexity or you can build your own router if needed. If you want to create a landing page and you definitely don’t need a router, this might be the way to go. This is also a viable option, if you want to use svelte, for example, inside an electron application.
How do I?
Nowadays it’s as easy as calling a single command:
bash
Here you will get a few question on how you environment should look like. For a svelte project you should go with, of course, svelte. TypeScript is also quite handy. As you could see when running this command you can choose different types of frameworks/compilers. So if you need to create one of those mentioned, you now know how you can setup those as well.
Start a Svelte project with router
When Should I?
If you need a router you can always build your own. But why should you? You’re lazy and don’t want to worry about all the annoying edge cases out there like window.history. Noone likes that. Svelte has two official routers. The first one is called Sapper. It works, but it has been replaced with SvelteKit. SvelteKit should be the way to go, because it’s being actively developed.
How do I?
Starting a SvelteKit project is as easy as it is creating a routerless Svelte application.
bash
After you have configured your environment, by answering a few questions, you’re ready to go. SvelteKit utilizes ViteJS as well, so you can easily port a basic Svelte application to SvelteKit. With SvelteKit as router, you have almost no page transition time if utilized correctly. This Website is build with SvelteKit, so if you, for example, shortly hover over any link in the header you will see a few activities under your network tab in your browsers dev tools. If you click, the page will have already loaded and the browser only needs to render. It’s a great experience.
Wrapping Up
As you could see these days it can be easy to start a new project, even easier to start a Svelte one.
The greatest thing is, that Svelte has a very active community. So any questions regarding Svelte can be asked on their Discord. Otherwise, of course either GitHub or Stackoverflow may be places you can get help to solve difficulties you may have.