Bootstrapping a Svelte project

In my last article I mentioned starting on a card game web app using Svelte as a frontend. (By the way, it may sound weird to use an app frontend framework for a game, but I think for a card game it works fine. It's not like I need a physics engine or anything ;)

As I learn more about Svelte, I want to write some articles on some key learnings I have along the way.

What's Svelte?

Most frontend devs are familiar with React and Vue. Svelte is another framework in the same category. Its focus is on reducing boilerplate code, using vanilla js, and speed (by virtue of not having a virtual DOM). Its syntax is heavily borrowed from Vue, with each component looking something like this:

<script>
  /**
   * Programmatic logic about the component, in vanilla JS
   */
  setTimeout(() => {
    alert('Hello world');
  }, 3000);
</script>

<style>
  /**
   * CSS of the component here
   */
  div.example {
    color: #f00;
  }
</style>

<div class="example">
  Hello! Once this component loads, you will see an alert box in 3 seconds.
</div>

How do I start a Svelte project?

Right from the Svelte homepage, you will see a few cli commands that let you start a project from the sveltejs/template. It's a great place to start for a first project. It starts you off with just one Svelte component on one page, with a default rollup config. Rollup is the bundler Svelte suggests, but you can use other bundles if you like.

But once you've started from the template and begin coding, you may quickly come to a question...

How do I do routing?

Because the template starts you off with one page and one component, you'll quickly wonder how best to do routing if you're trying to build a web app of any reasonable size (not just one page).

From what I've gathered, there are a number of options of popular libraries to do routing with, with different goals in mind.

Probably the most feasible one for a bigger web app is Sapper. As their doc mentions, it's heavily inspired by Next.js. Sapper is opinionated and basically gives you a src/routes directory where you put your pages, with each page being a component. (Should be familiar for those who come from React/Next.js) Sapper can easily be configured to be used as a static site generator (JAM stack), or a standard server-side-rendering setup with a nodejs server. When you go with Sapper, you will want to use the sapper-template instead of the sveltejs/template to get started, as their getting started guide mentions.

(Funnily enough, remember that in my first dev.to article I mentioned how one of the secret sauces of dev.to being so fast was because of its use of InstantClick, i.e. preloading links on mouse hover? Sapper comes with this functionality built in as well.)

As you can imagine, Sapper does add a considerable amount of complexity to your Svelte app. If you're a veteran frontend developer coming from React and Next.js, this won't be an issue for you.

What if you wanted to build a simpler app? In my case, I am building a simple card game, with a landing page and a game page. The game page is hash id based for different "game rooms"; and it contains a lot of dynamic interactivity on it.

For this use case, I've found the svelte-spa-router library to be an excellent option. It only supports client-based routing (with a # hash) and does not do server-side-rendering. However, you can easily run a JAM stack setup with the static site generator setup that comes with svelte template. I basically start from the sveltejs/template, add svelte-spa-router as a dependency into my package.json and start from there.

You're in a good place to start coding

With a Svelte project fully set up along with a router library of your choice, you should be ready to start coding away your new app frontend. Enjoy!

Comments

[Mike]

Great article! For routing, also keep an eye on routify.dev/.

[Bigi Lui]

Thanks! Didn't know of this one. The description sounds a lot like Sapper. What's your opinion on Routify and Sapper?

I also checked out your profile. Saw that you've also written a lot of great articles on Svelte and Sapper! Happy to meet other Svelte enthusiasts here.

[Mike]

I agree, the two are similar. I'm keeping a close eye on Routify to see where it goes and may potentially contribute, especially in the area of incremental builds for static sites - something I really think would help Svelte gain more popularity.

At the same time, Rich Harris said at the Svelte Society day last Sunday that Sapper is not dead a good sign :). For now, I continue to use Sapper for my app as it's the official solution to running Svelte apps with routing, PWA support, etc.

Thanks for checking out my posts. I'm also writing a book where I use Svelte and Sapper and walk the reader through end-to-end development of a cloud native web app. Lots to come, but only few evenings and weekends to work on it :)

[Bigi Lui]

Oh wow! I did not know that there was any suspicion that Sapper might be dead. Good to know that it's not, I guess :)