TIL: How to fix `structuredClone` to work on Netlify SvelteKit Site

TIL: How to fix structuredClone to work on Netlify SvelteKit Site Recently I was working on my SvelteKit site and added some code like so to my hook.server.ts: try { if (event.locals.pb.authStore.isValid) { await event.locals.pb.collection("users").authRefresh(); event.locals.user = structuredClone(event.locals.pb?.authStore.model); } } catch (err) { console.log("failed to refresh auth", err); event.locals.user = undefined; event.locals.pb.authStore.clear(); } I needed to add the structuredClone function so that only POJO (plain old javascript objects) would get stored in the event. ...

TIL: How to Autofocus on Inputs in Svelte

TIL: How to Autofocus on Inputs in Svelte In this post, I will show you how you can autofocus on input that is in a child component. So in my use case, I want the user to click a button to add a “collection” and then it will show the input and immediately focus on it. Which looks something like this: So how can we do this? Let’s say we have a child component called Input. ...

How Can We Update GitLab CI on the Status of the Netlify Deploy Part I

In this post, I will show you how you can update your GitLab CI pipeline with the status of your Netlify deploys. As it is quite nice to have everything in one place if our CI pipeline passed or failed. I have spoken about this in a previous article, how you might go about setting up merge request preview environments with Netlify. This can be set up to also leave comments as shown above, and notify us if our website deployed successfully. ...

TIL: How Includes, Extends work with TS Config (with SvelteKit)

TIL: How Includes, Extends work with TS Config (with SvelteKit) I have recently been creating an app with SvelteKit and Typescript. I noticed all of a sudden Typescript and VS Code not playing nice with each other. It wouldn’t show me the types of variables that I knew it was showing me before. So I started to investigate and work out what was wrong. I was getting locals with a type any: ...

How to Autosort our SvelteKit Imports

In this post, we will go over how we can auto-sort our imports in our svelte files. To do this we will be using eslint and the eslint-import-plugin plugin. If you’re anything like me you like have ordered imports, rather than random imports that can be hard to make sense of. In Python we have isort in golang we have goimports. In JavaScript we can use eslint with the above plugin. ...

How to add Have I Been Pwned to Your Registration Flow in SvelteKit

In this post, I will go over how you can use the have I been pwned (hibp) API to improve UX 1 in our registration flow in our SvelteKit app. When the user signs up we can check if that password has been compromised in a previous data breach (on another site). Then we can prompt the user to enter another password. This will help avoid users using simple & common passwords like password11. ...

How to Remote Debug your SvelteKit on an Android Device in Firefox

In this post, we will go over how you can test your SvelteKit app on your Android device in Firefox. If you’re like me you are building an app that you want users to use on both normal PCs (laptops, Desktop) and their smartphones. But the question arises how can we debug our app on a smartphone? One way to achieve this is to use Firefox and remote debugging, you will need to connect your smartphone via USB to your device running the SvelteKit app i. ...

How to Setup OAuth2 with SvelteKit and Pocketbase

Hi everyone, I’ve been building a new bookmarking app, using SvelteKit and PocketBase. PocketBase, is an open-source backend, that we need to self-host 1. It is written in Golang, think of it similar to Firebase or Supabase. PocketBase will handle authentication for us, creating new users, and storing the password securely. You know things all apps need, that we don’t want to spend a lot of times building ourselces. To learn more about authentication with SvelteKit I recommend checking out the web there are some fantastic tutorials available 2. ...

TIL: How to Deploy a SvelteKit site on Netlify

TIL: How to Deploy a SvelteKit site on Netlify So you have a SvelteKit site you want to deploy to Netlify how can we do that? First, go about setting up a site like normal! In my case, I am going to import an existing site from Gitlab. Netlify In the build settings we want the following settings: Branch Adjust the branch to whatever your main branch is i.e. the branch you want to deploy from. ...