Arkar

SvelteKit in production 🚀

May 17, 2023Arkar

A community website that I have been contributing to migrate to SvelteKit + Sanity.

On this page

SvelteKit in production❤️

Recently, I have been working on contributing to SIIT to migrate their old create-react-app website to a newer version of the web today for faster and seamless content updates.

It was a cool website at the time, it was also my very first production website with React in 2018, using create-react-app (big mistake) lots of class components and a custom server with express.js to generate SSR page.

I proposed SvelteKit to the team and they loved it. As for UI, I planned to use tailwindcss and carbon design system as they also have a great UI library for svelte as well which granted me faster UI development process.

Data migration

For faster and seamless content updates, we planned to use Sanity.io . The real challenge was to transfer old data, REST APIs to PortableText in the smoothest way.

The old website was using WYSIWYG format with Strapi . I don't want to have long copy pasting process for a long list of articles.

Luckily Sanity have a blockTools which has nice features that allow you to change html strings to portable blocks.

const {JSDOM} = require('jsdom')
const {htmlToBlocks} = require('@sanity/block-tools')

const blocks = htmlToBlocks('<html><body><h1>Hello world!</h1><body></html>', blockContentType, {
  parseHtml: (html) => new JSDOM(html).window.document,
})

I built a simple web server that would get the data from REST API endpoint, parse through all the html tags into Portable Text Strings.

One edge case was the images, in Sanity, you will have to upload images to assert directory first and then reference them in the document.

What I ended up doing was download all the images from body first with their names save them locally in order and then run another process to upload back to Sanity.

Then save all the uploaded reference id and map them back in the portable text.

I would be able to upload a lot of article at once, if I had use better approach with request queues. But even without the most optimize code but I was able to migrate data efficiently without any loss. You can check out at my Github.

Github : HTML Strings to PortableText

Shipped 🚀 : https://shaniit.org/

Next

I haven't work on the peak optimization on the site yet. Will do it eventually in the future. If you are excited to work on SvelteKit and looking for good first issue to contribute to feel free to reach out. We would love you to be part of the community.