Finally, I migrated my website to SvelteKit after using Sapper for some time
The process was not hard at all since I used their migration guide
So after using Sapper for some time, I decided to move my website to SvelteKit. I remember saying that I would not move to SvelteKit till they hit version 1 but the framework looks too promising. It had features which I needed and those features weren't in Sapper.
Migration Process
The whole process took about an hour or two. I created a new SvelteKit project and copied the files from my Sapper website to my new SvelteKit folder whiles making the necessary changes.
Some of the changes are;
-
_layout.svelteand_error.sveltewere renamed to__layout.svelteand__error.svelte - The
preloadfunction was changed toload -
fetchon the server now runs without using thenode-fetchmodule -
sapper:prefetchwas changed tosveltekit:prefetch - Files which were stored under
src/node_modulescan now be placed in thelibfolder and referenced like this$lib/path/to/folder. The$libalias prevents the../../../nonsense. - Oh! and regex routes are no longer supported 😄
So that's some of the stuff I changed, the list is more than this but I just decided to limit it to the few important ones
Improving Page Load Time
In order to get a good score on Google Page Insights, you website must load incredibly fast. My old website which was made with Sapper was scoring 45%😲. Yeah, the score is really bad. But when I migrated to SvelteKit, am scoring 100%.
Sapper version of my website's score on Page insights
SvelteKit version of my website's score on Page insights
I also made some adjustments which helped me to score 100% on Page Insights.
Here are some of the adjustments I made:
- I removed Font Awesome JavaScript file from my website.
The reason was that, the loading of that JavaScript file was increasing the page load time, What I did instead was to download SVG copies of the icons I needed and turned them into Svelte components so I will load them when I needed them.
- Adding the
loading=lazyattribute to images
Adding this attribute to my image elements helped to reduce the page load time. What the attribute does is that, it does not load the image until the image is in view. This helps to reduce the number of requests made on page load.
- Minifying the rendered HTML
SvelteKit has a feature called hooks. This is a JavaScript file which is run when requests are made to the server. By intercepting the results being sent back to the browser, I am able to minify the contents thereby reducing the size of the HTML page which has to be downloaded. You can read more about it here.
Adding Offline Support
SvelteKit does not come with a service-worker file like Sapper but it does provide a way for you to add a service-worker to your website. If you create a file named service-worker.js inside your src/ directory, Vite will automatically register that file as a service-worker and provide you access to the service-worker module.
Inside that file, I store all the built files and the static files in a cache. The cache is named with a timestamp so that on each build, a new cache is added and the old one deleted. Also, the service-worker also intercept fetch requests made by the browser and caches the requests. This is to ensure that if the user goes offline, those files will still be available to the user.
This feature is really cool because even if a user visits only the homepage of my website and the user goes offline, the user can browse through most pages of the website and read all the blog posts even if the user has not visited those pages yet😎. Yeah! all thanks to service-workers
Making My Website A P.W.A
So after adding a service-worker to my website, I decided to turn it into a P.W.A (Progressive Web App) . The only thing which I needed to add was a manifest.json file to the <head> element of my website. Inside the manifest.json file, I placed the following code inside
{
"name": "Kudadam Website",
"short_name": "Kudadam",
"start_url": "/",
"scope": "/",
"description": "Lucretius' personal website",
"display": "standalone",
"background_color": "white",
"theme_color":"tomato",
"orientation":"portrait-primary",
"icons": [
{
"src":"https://kudadam.sirv.com/logo/logo.png?h=72&w=72",
"type":"image/png",
"sizes":"72x72"
},
{
"src":"https://kudadam.sirv.com/logo/logo.png?h=96&w=96",
"type":"image/png",
"sizes":"96x96"
},
{
"src":"https://kudadam.sirv.com/logo/logo.png?h=128&w=128",
"type":"image/png",
"sizes":"128x128"
},
{
"src":"https://kudadam.sirv.com/logo/logo.png?h=192&w=192",
"type":"image/png",
"sizes":"192x192"
},
{
"src":"https://kudadam.sirv.com/logo/logo.png?h=144&w=144",
"type":"image/png",
"sizes":"144x144"
},
{
"src":"https://kudadam.sirv.com/logo/logo.png?h=512&w=512",
"type":"image/png",
"sizes":"512x512"
}
],
"shortcuts": [
{
"name": "Blog Posts",
"short_name": "Blog",
"description" : "Read Lucretius' Blog Posts",
"url":"/blog",
"icons": [
{
"src":"https://kudadam.sirv.com/logo/logo_blog.png?h=512&w=512",
"type":"image/png",
"sizes":"512x512"
}
]
},
{
"name": "Web Tools",
"short_name": "Tools",
"description": "Use the web tools on the website",
"url":"/toolz",
"icons": [
{
"src": "https://kudadam.sirv.com/logo/logo_toolz.png?h=512&w=512",
"type": "image/png",
"sizes": "512x512"
}
]
}
]
}
So the code above is what makes my website a progressive web app, If you are using the Chrome browser on your mobile device, you can install it like any other ordinary app and you can even share the app.
Adding a newsletter to the website
So for the very first time in my entire my life of blogging, I decided to add a newsletter to my website. I use sendinblue to store my subscribers and also, they provide an API which enables me to send emails. With sendinblue, I can store an unlimited number of contacts and can only send 300 emails per day.
Though I have never used newsletters before, am learning much. On my website, the newsletter subscription form is placed in the footer component of the website and it's available on all the pages so that the user will see it and not miss it.
If you have not already subscribed, you should really do so because I will be sending useful contents to you.
Adding Comments to Blog Posts
The first version of my website used Disqus for it's comment system but after I found out that they were injecting other scripts into my page, I decided to opt out.
At first I decided to create my own comment system then I realized it would be much work maintaining a website and a comment system so finally I decided to settle on Utterances, a lightweight comments widget built on Github issues. What Utterances does is that, it stores each comment as a Github issue on the repository where the website is hosted. Utterances is really cool but there are some limitations;
Some of the limitations are;
The person commenting must have a Github account
You can use Utterances on a private repository (repo)
You can not nest comments
Well, that is some of the limitations of Utterances, apart from these, the comment system is good just like the others. I use it on my website so if you want to try it out, please comment on this blog post down below.
Fellas, that's all there is to say about my new redesign, Will be waiting to see your name in the subscriber's list.
The GitHub repo is at https://www.github.com/biah/www.kudadam.com.
lubiah
/
kudadamold
My personal website which is created with SvelteKit and TailwindCSS
Kudadam.com
_My personal website made with SvelteKit and TailwindCSS
Top comments (3)
I wonder what features did you need that weren't in Sapper? From my perspective, Sapper is more stable and mature for now, with service-worker and manifest out of the box.
Well, Sapper didn't support layout resets. I really needed that feature.
Also Sveltekit is faster than Sapper due to Vite
awesome article, I learned more than I thought I would