Sapper is a framework to build very lightweight and beautiful web apps. It suits a project of any size and if you are familiar with how example React and Vue works this feels already familiar for you.
I was introduced to Sapper and Svelte which Sapper is running on by my friend. At first, I was a little skeptical of its benefits since I already was familiar with Vue.js and Nuxt.js and was very happy to work with them. This was until after a couple of months after the release I spotted a typo on my portfolio page and tried to fix it quickly. This is the moment where the interest for Sapper, Svelte, and the topic for this blog post raised.
With Sapper, I built the template for my new portfolio page in a couple of hours. Of course, writing the actual content took a little more but that is obvious. The boilerplate that “npx degit “sveltejs/sapper-template#webpack” my-portfolio” command generated was so comprehensive and clear that there was no need to read too much documentation to get started which I liked a lot. Also, the amount of hassle and “magic tricks” to get the thing working was absolute zero, it was just working!
To explain a little the code above is responsible for my blog page (https://aaroalhainen.dev/blog) which contains a list or grid (depending on screen size) of my latest Medium articles. I’ll explain why I decided to do my blog this way in another blog post soon but in Sapper, this was an easy and pleasant process.
The idea of this post was to showcase one use case for Sapper. Vue and especially the new Vue 3 is a very powerful tool to build web apps and even though I liked a lot to work with Sapper and Svelte, I’m not going to ditch Vue from my toolbox any time soon if never.😁
If you need to build a static website, like a portfolio or blog, I would suggest that you give Sapper a change!