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!