Forem: Shivam Meena

Building ContainerKit: GUI for Apple's Container CLI with Tauri and Svelte 5

Shivam Meena — Wed, 11 Mar 2026 17:58:39 +0000

Introduction

I’ve been working on ContainerKit, a desktop application designed to provide a high-performance interface for Apple's container command-line tools. By combining the system-level power of Tauri with the reactivity of Svelte 5, I’m aiming to create a tool that feels like a natural good alternative to what we have today.

Managing containers on macOS has always felt like a trade-off. You either stick to the terminal for speed or install a heavy Electron-based GUI that eats up your RAM. With the recent advancements in Apple's native container support, I saw an opportunity to build something better.

The core philosophy of ContainerKit is Performance through Proximity. Most container GUIs try to do too much by bundling their own engines or virtualization layers. ContainerKit takes a different approach. It acts as a lightweight bridge to the tools already living on your Mac.

By using Tauri, I avoid the overhead of Chromium, and by using Svelte 5 (Runes), I can manage complex, real-time system states with a tiny JS footprint. This allows the app to remain snappy even when streaming massive log files or monitoring dozens of concurrent containers.

Resources

Why Tauri?

Since ContainerKit is designed specifically for macOS, Tauri was the obvious choice. By targeting a single platform, I don’t have to worry about cross-browser inconsistencies or bundling a heavy Chromium instance. I can rely entirely on the high-performance WebKit engine provided by macOS.

This results in a "native-first" feel where the app is incredibly lightweight, starts instantly, and respects system-level constraints out of the box.

Why Svelte?

If you know, you know. If you don't checkout dev.to/theether0.

Learning

Tauri docs need improvement: While introduction and basic is solid, navigating production-level features often requires digging into the source code of official plugins or sometimes it's not mentioned in docs.
System directory & file watcher: Implementing a reliable watcher for macOS system paths was key to ensuring the GUI reacts to CLI changes instantly.
You don't need to know too much Rust to use Tauri: Most of the heavy lifting is handled by Tauri's API and plugins. You only need a basic grasp of Rust to build powerful system-level bridges.

Current Status

ContainerKit is currently in active development. The focus right now is on stabilizing the core "Read" operations—listing containers, inspecting images, and viewing logs—before moving into management features like starting/stopping and volume mounting.

I'm building this as a tool for developers who care about their system resources and want a clean, fast interface for their local container workflow.

Preview

Conclusion

I believe that professional tools should be both powerful and lightweight. ContainerKit is an attempt to bring that balance to the macOS container ecosystem using the best of modern web and systems programming.

This is a project I'm really excited about, and I'll be sharing more technical deep-dives into the Svelte 5 and Tauri integration as I hit major milestones. If you have suggestions or want to see specific features, please put it in the comments and show some love! ❤️

I'm planning to write Definitive Guide to Tauri & Svelte: From Core Concepts to Production-Ready Apps. It will include Basics, missing docs details and some demo apps.

Announcing SvelteKit OG v4: An alternative to @vercel/og for sveltekit

Shivam Meena — Mon, 24 Nov 2025 01:10:39 +0000

Introduction

We're thrilled to announce the official release of @ethercorps/sveltekit-og@v4! This major version represents a complete architectural overhaul focused on delivering uncompromising stability, simplifying the developer API, and providing the tools needed for robust, high-performance image generation across all Javascript runtimes.

This release introduces powerful new features that eliminate manual steps and complex workarounds.

I learnt a lot while fixing @ethercorps/sveltekit-og like wasm issue, runtime issues and developer experience with typescript.

Resources

Core of the v4

With v4, we focused on fixing issues related to runtime and fonts. We are happy with the results and I hope it makes you happy too.

Runtime Stability & Reliability

The core architecture was rebuilt to ensure cross-runtime reliability, resolving subtle issues related to wasm loading. Images now render flawlessly whether you deploy to:

Cloudflare Workers & Pages (@sveltejs/adapter-cloudflare)
- Workers - Preview
- Pages - Preview
Vercel (@sveltejs/adapter-vercel) - Preview
Node.js (@sveltejs/adapter-node) - Clone the example from repo
Netlify (@sveltejs/adapter-netlify) - Preview
Deno - Preview
Bun - Still not supported.

The library now explicitly guides developers toward safer, platform-agnostic patterns, making the setup "rock-solid" out of the box.

Ultimate Font Utilities (v4.2.0 Update)

Loading fonts and managing how to load them remote or locally, It was a pain. The v4.2.0 update introduces multiple fonts utility:

CustomFont: Use this class for local files (read via $app/server/read) or custom remote URLs (read via fetch). Supports lazy loading.

GoogleFont: The easiest way to use remote fonts. It automatically handles fetching the CSS, parsing the .ttf URL, and applying in-memory caching for maximum performance.

resolveFonts: A crucial utility function that transforms your array of font class instances into the final, resolved ArrayBuffer objects required by the underlying Satori engine.

How to use

To get started with @ethercorps/sveltekit-og, checkout -> setup in docs

Basic Example: Here, we will use raw html but we can also use svelte components too.

// + src/routes/og/server.ts

import { ImageResponse } from '@ethercorps/sveltekit-og';
import type { RequestHandler } from '@sveltejs/kit';
import JetbrainsRegular from "$lib/fonts/JetBrainsMono-Regular.ttf?url"
import { GoogleFont, CustomFont, resolveFonts } from '@ethercorps/sveltekit-og/fonts';
import { read } from '$app/server';

const template = `
 <div class="bg-gray-50 flex flex-col w-full h-full justify-center">
    <div class="flex flex-col w-full justify-between p-8">
      <h2 class="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
        <span>Ready to dive in?</span>
        <span class="text-indigo-600">Start your free trial today.</span>
      </h2>
      <div class="flex flex-row items-start">
        <div class="flex rounded-md shadow">
          <button class="flex justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</button>
        </div>
        <div class="ml-3 flex rounded-md shadow">
          <button class="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</button>
        </div>
      </div>
    </div>
  </div>
`;

const jetbrainsMonoBoldURL = 'https://github.com/JetBrains/JetBrainsMono/raw/master/fonts/ttf/JetBrainsMono-Bold.ttf'

const fonts = [
    new CustomFont('JetBrains Mono', () => read(JetbrainsRegular).arrayBuffer(), {weight: 400}),
    new GoogleFont('JetBrains Mono', { weight: 500 }),
    new CustomFont('JetBrains Mono', () => fetch(jetbrainsMonoBoldURL).then((res) => res.arrayBuffer()), { weight: 700 }),
];

export const GET: RequestHandler = async () => {
        // RESOLVE: Convert the class instances to ArrayBuffers
        const resolvedFonts = await resolveFonts([interRegular, interBold]);

    return new ImageResponse(template, {
        height: 400,
        width: 800,
        debug: false,
        fonts: resolvedFonts
    });
};

Preview:

Svelte Component Example:

Svelte component which will be converted to png.

// OG.svelte
<script>
    let { text, spanText } = $props();
</script>

<div class="bg-gray-50 flex w-full h-full items-center justify-center">
    <div class="flex flex-col w-full py-12 px-4  p-8">
        <h2 class="flex flex-col text-3xl sm:text-4xl tracking-tight text-gray-900 text-left">
            <span class="font-bold">{text}</span>
            <span class="text-indigo-600 font-normal mt-4">{spanText}</span>
        </h2>
        <div class="mt-8 flex md:mt-0">
            <div class="flex rounded-md shadow">
                <button
                    class="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white"
                    >Get started</button
                >
            </div>
            <div class="ml-3 flex rounded-md shadow">
                <button
                    class="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600"
                    >Learn more</button
                >
            </div>
        </div>
    </div>
</div>

Sveltekit Api endpoint to generate and serve generated image.

// +server.ts
import OG from './OG.svelte';
import type { RequestHandler } from '@sveltejs/kit';
import { ImageResponse } from '@ethercorps/sveltekit-og';
import { resolveFonts } from '@ethercorps/sveltekit-og/fonts';
import { fonts } from '../../lib/utils/helper.js';

export const GET: RequestHandler = async () => {
    return new ImageResponse(
        OG,
        {
            debug: false,
            height: 600,
            width: 1200,
            fonts: await resolveFonts(fonts)
        },
        { text: 'Ready to dive in?', spanText: 'Start your free trial today.' }
    );
};

resolveFonts(fonts) is important, so always do it and then pass it to image options.

Helper used for clean code.

// src/lib/utils/helper.js
import { GoogleFont, CustomFont } from '@ethercorps/sveltekit-og/fonts';
import { read } from '$app/server';
import JetbrainsRegular from "./JetBrainsMono-Regular.ttf?url"

const jetbrainsMonoBoldURL = 'https://github.com/JetBrains/JetBrainsMono/raw/master/fonts/ttf/JetBrainsMono-Bold.ttf'

export const fonts = [
    new CustomFont('JetBrains Mono', () => read(JetbrainsRegular).arrayBuffer(), {weight: 400}),
    new GoogleFont('JetBrains Mono', { weight: 500 }),
    new CustomFont('JetBrains Mono', () => fetch(jetbrainsMonoBoldURL).then((res) => res.arrayBuffer()), { weight: 700 }),
];

Preview:

Conclusion

We believe this update delivers the most stable and developer-friendly experience for generating OG images in the SvelteKit OG Image generation ecosystem. As always, feel free to report any issues or suggest improvements on our GitHub repository!

Checkout newly released docs at sveltekit-og.dev

This is me writing for you after a long time. If you wanna ask or suggest anything please put it in comment and show some love ❤️.

Cloudflare Based AI Embed System

Shivam Meena — Mon, 15 Apr 2024 08:00:52 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

I have built a chatbot embed for web apps that can be deployed to cloudflare stack. It needs more work currently it's not complete. What I created is similar to sitegpt. Where users visits trains there chatbots and then they can embed it on there websites using an iframe. I wanted to do this for whatsapp but after a bit research they asked for verification and other things.

Demo

Web Link: Botified.chat

My Code

Github: Botified Chat
This time I choose to use complete cloudflare stack with sveltekit and with there recent introduction of platformProxy, I like it somewhat.

Tech Stack:

Metaframework: Sveltekit
Database: Cloudflare D1
ORM: Drizzle
Vector Database: Vectorize
Deployment: Cloudflare Workers

Journey

I started very late around a day ago but i did had this idea what i wanna build. So, I took my weapons and sat for 10 hours and completed as much as possible as i mentioned earlier it's not completed. It doesn't matter it gets rejected or anything. I learnt a lot in last 10 hrs about langchain, cloudflares workers issues, D1 migration handling with prisma and Drizzle. It's was fun to sit foe this long to do my own project. Sometimes, we just do the our 9-5 and forget the chances we get and this was my chance. I'll complete my project now.

Multiple Models and/or Triple Task Types

I have used 2 models:

Embedding: @cf/baai/bge-large-en-v1.5
Chat: @cf/meta/llama-2-7b-chat-int8 They serve there purpose well good enough. I'll be making changes in the project. I don't know it's allowed or not.

Thanks @cloudflaredev and Dev.to for this fun project.

Using Web Browser's Indexed DB in SvelteKit

Shivam Meena — Sat, 02 Sep 2023 10:11:39 +0000

Introduction

This blog post comes from my current project where i don't want a server side DB for user tracking or for any other purposes but still wanted to save things for the user. While doing some basic research I had to choose between localStorage & Indexed DB. Both have their own benefits and drawbacks but for my use case where i have to store data that might go above the localStorage allowed data size. when i started reading more about IndexedDB,I found dexie which is a wrapper around IndexedDB and it have to good api's for querying the IndexedDB. And One more thing, IndexedDB is supported in workers which is the best thing to have when you have client side data management.

Resources

Prerequisites

NodeJs with a package manager pnpm.
New or Existing SvelteKit project
Now install dexie

pnpm i dexie

Setting up Dexie

I'm using Typescript and it's not mandatory to use ts.

Create a db.ts file in lib directory.
As I'm using typescript I have to provide interface for table.

export interface favorite {
    id: string;
    name: string;
    image: string;
    description: string;
    slug: string;
}

So here i created a favorite interface with id, name, image, description and slug. These are going to table columns as well.

After deciding on table columns, we need to create an dexie instance but as we are using we have to do it little bit differently (for js you can directly initiate it).

import Dexie, { type Table } from 'dexie';


export class MyDexieExtension extends Dexie {

    favorite!: Table<favorite>;

    constructor() {
        super('myData.db');
        this.version(1).stores({
            favorite: '&id, name, image, description, slug',
        });
    }
}

Here, I have extended Dexie so we can use typescript autocomplete and things.

favorite!: Table<favorite>; Adds typescript supports for queries.
favorite: '&id, name, image, description, slug', here we have some special characters like & which define primary key and there are other characters like this to make things simple. Please check dexie docs for this.
After creating db what we need to do is query it and dexie have wast api's. Here, I'm going to show some basic one and last one is for svelte lovers.

Note: Use browser specific api after checking for browser or onMount as IndexedDB is only available in browser.


import {db} from "$lib/db"

// Insert query
await db.favorite.add({
id: 'dfghg2334w',
name: 'The Ether',
image: 'url',
description: 'Web Dev'
slug: 'dfghg2334w-the-ether'
})

// Update Query
await db.favorite.put({
id: 'dfghg2334w',
name: 'Shivam Meena'
})

// Delete Query
await db.favorite.delete('dfghg2334w')

As you can see how easy it is to query.

Ok ok, now comes the best part of svelte and dexie. Svelte have best stores in JS world and dexie provide something for us. The liveQuery:

<script>
  import { liveQuery } from "dexie";
  import { db } from "$lib/db";

  let favorites = liveQuery(
    () => db.favorite.toArray()
  );

</script>
<ul>
  {#if $favorites}
    {#each $favorites as favorite (favorite.id)}
      <li>{favorite.name}, {favorite.slug}</li>
    {/each}
  {/if}
</ul>

You get it right, but it's not based on svelte store but on Observable. For more api's please check Dexie API Reference.

Now, I have my app where i don't collect their data on our server. Browser have become something so big as an OS, we can do whatever we want to do.

It's a good approach but saving data in browsers have it's on disadvantages so please understand them before adding them to your project.

Till next article have a great life, learn and respect.

This is me writing for you. If you wanna ask or suggest anything please put it in comment and show some love ❤️.

Power of Blogging with SveDev: Dev.to API & SvelteKit Combo

Shivam Meena — Fri, 03 Feb 2023 06:36:42 +0000

Introduction

Hello readers! As you know, having limited options when it comes to customizing your blog is little bit of headache.
Dev.to is pretty good as writing and showing them to world but it have it's own limits. You can use there user based blog showcase but it's not on your blog but on dev.to and what we want is to showcase on our own blog website. If you really wanna do this. Then, allow us to introduce you to SveDev - A blog template that combines the power of Dev.to API as a CMS and SvelteKit as a frontend. With this setup, you can easily showcase your blog posts to the world while enjoying the flexibility and customization options provided by both tools. So, buckle up and join us as we explore the features of SveDev and why it is the perfect solution for your blog.

SveDev

It's a blog template for the writer who writes on Dev.to and want to have their own blog website without to worry about tech stuff and if you want to customize it you can. We use Dev.to(Forem) Api to interact with SveDev's frontend which uses Svelte and SvelteKit.

Tech Stack

Client: Svelte, Tailwind, DaisyUI

Server: SvelteKit, Dev.to(Forum) Rest API

Full Text Search LyraSearch (Free and OSS)

Deployment

You can use one click deployment for Vercel and Netlify and for Linux and other deployment please check How to use guide.

Demo

Vercel - Vercel Deploy Demo - One Click Deploy
Netlify - Netlify Deploy Demo - How To Deploy Guide

When you use One Click Deploy You can't use meta icon so first change that and deploy it.

How to Deploy

You can deploy SveDev to any platform using SvelteKit adapters. Some of them are made by community and some are officially by the Svelte team.

To deploy SveDev you have to add some environment variables in '.env' or in deployment specific platform's environment values.

1. PUBLIC_SITE_NAME=EtherCorps // Your Blog name
2. DEV_TO_API_KEY=sdfghjktfh // Your dev.to Api key
3. PUBLIC_DEV_TO_USERNAME=theether0 // Your dev.to username

For adapters, you can read SvelteKit Docs and according to that you can change your adapter in svelte.config.js file. Then build your app and deploy.

Features

SveDev have features that everyone needs like theme, blog search and table content for every block (Heading with h2 or ## tag).

SveDev approaches minimal style with lot's of theme where user can have good user experience.

Redis Integration in SvelteKit: A Game-Changer for Session Management

Shivam Meena — Thu, 19 Jan 2023 13:13:29 +0000

Introduction

As you all know SvelteKit released v1.0 last month and we all started to use it in medium size project as of now. But one pain point still exist in SvelteKit which is managing user auth and session. But it's not going to stop us from using SvelteKit. So what we can do is minimize the pain by our own magic and from there i started to make a small package which minimize that pain. Let me introduce new session management library for SvelteKit which is @ethercorps/sveltekit-redis-session and it uses Redis as session manager. We all know how fast Redis is, even Ben Awad himself says use Redis for session management far better than other things. I took that path and got better results, so i extracted it from my project and make this package.

Resources

Prerequisite

SvelteKit project
Redis client library for NodeJS: ioredis

// Install in your project root
pnpm i -D ioredis

Install @ethercorps/sveltekit-redis-session

pnpm i -D @ethercorps/sveltekit-redis-session

This package made with ioredis as primary redis-client for NodeJS which supports async/await.

How to use

I'm using Typescript, you can use JS/TS as per your project.

After creating and installing all the dependencies we can start with our work.

Initializing Redis Session Store

Create a folder in lib directory with the name sever and then add a file sessionManager.ts

server directory inside lib have special meaning in SvelteKit. Any file inside server directory can only used in server side logic which will help us to not import some code to client side.

// lib/server/sessionManager.ts

import { RedisSessionStore } from '@ethercorps/sveltekit-redis-session';
import Redis from 'ioredis';
import { SECRET, REDIS_URL } from '$env/static/private';

// Now we will create new Instance for RedisSessionStore
const options = {
  redisClient: new Redis(REDIS_URL)
  secret: SECRET
} 
// These are the required options to use RedisSessionStore.
export const sessionManager = new RedisSessionStore(options)

SECRET and REDIS_URL are supposed to be .env file.
SECRET is a key that is not supposed to be known by third party.
REDIS_URL looks like this redis://username:password@host:port and if your are running redis on your system REDIS_URL may look like redis://localhost:6379.

All available options for RedisSessionStore

// option default explanation

1. redisClient > No Default > Required and Accepts a Redis Client from `ioredis`.
2. secret > No Default > Required and Accepts a string which is supposed to be a secret key.
3. cookieName > Default: `session` > Its the name of cookie which will be added to browser. Accepts a string can we anything you want.
4. prefix > Default: `sk-session:` > A prefix for all the keys added to redis which helps to get all active session with the same prefix. Accept a string can we anything and make a unique prefix which does not exist in redis.
5. signed > Default: true > Signed cookies mean that every key that is added in cookie going to be signed to check if its assigned by us. Its accepts boolean value.
6. encrypted > Default: false > If you want to encrypt your cookies using `aes-256-cbc` algorithm with secret key. Which makes it more secure from tempering. It accepts boolean value.
7. useTTL > Default: true > Redis have a functionality to delete a key automatically from redis after a given time.
// Given time always going to be your maxAge of cookie more on it in cookies options.
8. renewSessionBeforeExpire > Default: false > If you want to renew user session and cookie before expiring automatically you can use it. This works with `renewBeforeSeconds`.
9. renewBeforeSeconds > Default: 30 * 60 > This will update session and cookie before 30 min if user active at that time.
It used in combination of `renewSessionBeforeExpire`. It accept number which is supposed to be seconds as default is 30 minutes.
10. serializer > Default: `JSON` > This is used to stringify data and parse back to data which is supposed to be saved in redis. It accepts 
`export type Serializer = {
    stringify: Function;
    parse: Function;
};`

11. cookiesOptions > Default: defaultCookiesOption
const defaultExpireSeconds: number = 60 * 60 * 24; // One day in seconds
const defaultCookiesOption: CookieSerializeOptions = {
    path: '/',
    httpOnly: true,
    sameSite: 'strict',
    secure: !dev,
    maxAge: defaultExpireSeconds
}; > It takes any of the parameter accepted by CookieSerializeOptions type from SvelteKit. These options are for setting cookies for the browser.

> In cookiesOptions we have a field `maxAge` which also our time to live(ttl) for redis key expiration time. maxAge accepts time in seconds and which is also in going to be key expire time in redis. //

These are all the options accepted by RedisSessionStore.

// CookieSerializeOptions type of SvelteKit

export interface CookieSerializeOptions {
    domain?: string | undefined;
    encode?(value: string): string;
    expires?: Date | undefined;
    httpOnly?: boolean | undefined;
    maxAge?: number | undefined;
    path?: string | undefined;
    priority?: 'low' | 'medium' | 'high' | undefined;
    sameSite?: true | false | 'lax' | 'strict' | 'none' | undefined;
    secure?: boolean | undefined;
}

// Learn more about cookieSerializationOptions: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/cookie/index.d.ts#L14

All available method on RedisSessionStore

RedisSessionStore have multiple methods but 6 of them are useful to user, which of them 5 are main methods and one supporting methods.

Every method returns { data: any, error: boolean, message: string }

RedisSessionStore's main methods:

createNewSession => Which accepts (cookies, sessionData, key?=''). It adds a new session to Redis and set cookie to cookies method with the name 'session' or options.cookieName. cookies is cookies from requestEvent, sessionData is dict which is for data you want to save in Redis and key is optional if you don't want to set default random key generated from crypto.randomUUID function. It returns { Redis Key without prefix, cookie value } in data.
getSession => Which accepts only cookies which comes from requestEvent. It first validate cookie which is based on your signed or encryption method. It also checks for renewSessionBeforeExpiry condition if valid update the key and cookie expire time to default maxAge time. It returns saved sessionData from Redis which you gave while creating new session.
updateSessionExpiry => Which accepts cookies method from requestEvent. It Validate the cookies then update the expiry to session and cookie. We already handle a basic auto update based on the renewSessionBeforeExpiry option which needs active user request within renewBeforeSeconds time frame. That's why you can use this method to add your own logic when you wanna update cookies. E.g. check user activity, last api request frame and etc. It returns cookie value in data.
delSession => This one also accepts cookies method from requestEvent. It validate the cookie if cookies are not valid it won't gonna delete session and cookie this will return error: true which allows you to handle what to do with invalid cookies in every method. After successful validation it's gonna return unique value that makes Redis key with prefix value.
deleteCookie => It also takes cookies method from requestEvent. This method for just to delete cookie from browser without any validation. For e.g. if you got validation error in any method you can just delete cookies without removing session from Redis which is only possible with valid key. It returns nothing just gonna delete if any error it's gonna console.log it.

Other methods maybe useful for your own logic

_validateCookie => It takes cookies method from requestEvent and validate cookie which is created using createNewSession method from RedisSessionStore. It return Redis key without prefix if no errors else null in data.

Using Methods in our projects Authentication.

Here I'm going to show how you can use them in API's (+server.ts) and same as it you can use in SvelteKit page actions. I'm making some assumptions like you already created user and have email and password fields, You will handle data validation for the data provided by the client.

Here is our sessionManager file's code

import { RedisSessionStore } from '@ethercorps/sveltekit-redis-session';
import Redis from 'ioredis';
import { SECRET, REDIS_URL } from '$env/static/private';
export const sessionManger = new RedisSessionStore({
    redisClient: new Redis(REDIS_URL),
    secret: SECRET,
    prefix: 'redisk-example:', // redis key prefix
    cookieName: 'session', // cookie name in browser
    cookiesOptions: {
        maxAge: 10 * 60 // ten minutes
    }
});

First example shows how you can use createNewSession to login a user in login/+server.ts

// Github: examples/src/routes/api/login/+server.ts

import { fail, json, redirect } from "@sveltejs/kit";
import type { RequestHandler } from './$types';
import { sessionManger } from '$lib/session';

export const POST = (async ({ request, locals, cookies }) => {

  const { email, password } = await request.json();
  if (
    email !== 'shivam@example.com' ||
    password !== 'Shivam@Meena'
  ) {
    return fail(400, {
      data: { email, password },
      message: 'Invalid credentials'
    });
  } // user validation

/* get user data after validation */
  const { data, error, message } = await sessionManger.createNewSession(cookies, {
    email
  }); // creating new session
  if (error) {
    console.log(message);
    return fail(400, {
      data: { email, password },
      message
    });
  } // error check while creating session
  return json({ success: true, message}); // no error return
}) satisfies RequestHandler;

In above example you can see we just passed our cookie from requestEvent and user sessionData for session to createNewSession in Redis and adding cookie to request.

This example shows how you can use getSession in +hooks.server.ts

// Github: examples/src/+hooks.server.ts

import type { Handle } from '@sveltejs/kit';
import { sessionManger } from '$lib/session';
import { redirect } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
    const userSession = await sessionManger.getSession(await event.cookies);
    event.locals = {
        isUserLoggedIn: false,
        user: null
    };
    if (userSession.error) {
        console.log(userSession);
        await sessionManger.deleteCookie(await event.cookies);
        return resolve(event);
    }
    if (userSession && userSession.data) {
        event.locals = {
            isUserLoggedIn: true,
            user: { email: userSession?.data?.email as string }
        };
    }
    return resolve(event);
};

In hooks.server.ts we will get our session against our cookies and it's going to return sessionData inside userSession.data and error i will delete the cookie.

This example shows how you can use delSession method in +logout/server.ts

// Github: examples/src/routes/api/logout/+server.ts

import { json, redirect } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { sessionManger } from '$lib/session';

export const POST = (async ({ request, locals, cookies }) => {
    if (locals && locals.isUserLoggedIn) {
        const { email } = await request.json();
        const deleteData = await sessionManger.delSession(cookies);
        if (deleteData.error) await sessionManger.deleteCookie(cookies);
        return json({ loggedIn: false, message: 'Successfully logged out' });
    }
    throw redirect(302, '/');
}) satisfies RequestHandler;

Here we just passed our cookies and checked for error if found error deleted the cookies applied to request.

In above examples you have seen how we can utilize createNewSession, getSession, delSession and deleteCookie. You can try updateSessionExpiry and _validateCookie in your project and let me know in comments what you did and your logic this will be very helpful for examples.

If anyone wanna suggest and contribute please check official repo for the project.

This is me writing for you. If you wanna ask or suggest anything please put it in comment and show some love ❤️.

Dynamic OG image with SvelteKit and Satori

Shivam Meena — Thu, 20 Oct 2022 15:39:31 +0000

Introduction

We all share links/url to our friends and we always see a beautiful image which is OpenGraph(OG) Image. OG images use to be static images and with time we got puppeteer which uses browser to take screenshot of your web page then you serve it from server. Recently, Vercel dropped a bomb @vercel/og with Satori which doesn't need a browser and you can generate Dynamic OG Images on the fly. As we know with every solution, we got some problems to be solved.

@vercel/og is dependent on Satori. Satori is a new libray that convert HTML and CSS to SVG. Satori only accepts two params those are ReactElement (like JSX) and options. In SvelteKit, we don't have a ReactElement type syntax. Here, we need a html to ReactElement converter and Satori-html is what we need to do that.

Here, I'm going to explain a way to achieve Dynamic OG Images using html syntax. Read to the end, A pretty good surprise for all of You.

Flow to generate SVG

We first need a html template which we need to convert into SVG.
We going to pass that html template to html function from satori-html, this will generate our ReactElement syntax for html template.
Now, we will pass our ReactElement like syntax and options (options are defined in satori readme) to satori and this will return us with a SVG.

Note: SVG are not suppose to be served for OG Images (we use png format in OG Images) where we use SVG to PNG coverter Resvg.

Generate SVG from HTML Template

Create a new SvelteKit Project

pnpm create svelte@next

Then, In routes folder create a route with +server.ts or +server.js. Which will going to serve our OG Image for our shareable link.

// +server.js

import satori from 'satori';
import {Resvg} from '@resvg/resvg-js';
import {html as toReactElement} from 'satori-html';

const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer();

const height = 630;
const width = 1200;

/** @type {import('./$types').RequestHandler} */
export const GET = async () => {
  const html = toReactElement('<div style="color: red;">Hello, World!</div>')
  const svg = await satori(html, {
    fonts: [
      {
        name: 'Inter Latin',
        data: fontData,
        style: 'normal'
      }
    ],
    height,
    width
  });

  const resvg = new Resvg(svg, {
    fitTo: {
      mode: 'width',
      value: width
    }
  });

  const image = resvg.render();

  return new Response(image.asPng(), {
    headers: {
      'content-type': 'image/png'
    }
  });
};

In above code snippet,

First we import our libraries: Satori, Satori-html and @resvg/resvg-js.
Then we are fetching our font and convert it into to arraybuffer.
Then we defined height, width for our svg.
Then we gonna write a Get Api for our endpoint, which will gonna return a response Object with png.
Next we defined our html syntax which is converted to ReactElement syntax using toReactElement (import {html as toReactElement} from 'satori-html').
Now, we gonna pass our html object to satori with required options. This will going to generate a SVG.

Options = {
    fonts: [
      {
        name: 'Inter Latin',
        data: fontData,
        style: 'normal'
      }
    ],
    height,
    width
  }

Now, we have a SVG we gonna use resvg to convert it into PNG. Then we are going to return our response.

const resvg = new Resvg(svg, {
    fitTo: {
      mode: 'width',
      value: width
    }
  });

  const image = resvg.render();

  return new Response(image.asPng(), {
    headers: {
      'content-type': 'image/png'
    }
  });

This is a basic example of using satori in Svelte/SvelteKit. Few days ago, geoffrich released a post [Create dynamic social card images with Svelte components](https://geoffrich.net/posts/svelte-social-image/) which is deep dive into this.

Surprise: @ethercorps/sveltekit-og

This is a library inspired from @vercel/og and similar to it. I released@ethercorps/sveltekit-og
this morning and you can use it with normal html. Here I'm showing you two examples which returns an Image Response.

Example: ImageResponse

import { ImageResponse } from '@ethercorps/sveltekit-og';
import type { RequestHandler } from './$types';

const template = `
 <div tw="bg-gray-50 flex w-full h-full items-center justify-center">
    <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
      <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
        <span>Ready to dive in?</span>
        <span tw="text-indigo-600">Start your free trial today.</span>
      </h2>
      <div tw="mt-8 flex md:mt-0">
        <div tw="flex rounded-md shadow">
          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a>
        </div>
        <div tw="ml-3 flex rounded-md shadow">
          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a>
        </div>
      </div>
    </div>
  </div>
`;
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer();

export const GET: RequestHandler = async () => {
    return new ImageResponse(template, {
        height: 250,
        width: 500,
        fonts: [
            {
                name: 'Inter Latin',
                data: fontData400,
                weight: 400
            }
        ]
    });
};

As you know, satori supports tailwind css too this example shows html template with tailwind css.

In above code snippet, We are importing import { ImageResponse } from '@ethercorps/sveltekit-og'; and then we defined our html template and we passed it to ImageResponse with options and for more read readme.

Example: ComponentToImageResponse

Here, I'm going to use Geoff Rich's Component Code.

+server.ts
import Card from '$lib/Card.svelte';

export const GET: RequestHandler = async () => {
    return new ComponentToImageResponse(Card, {}, {
        height: 250,
        width: 500,
        fonts: [
            {
                name: 'Inter Latin',
                data: fontData400,
                weight: 400
            }
        ]
    });
};

Here, I'm passing Card component and a empty dict {} which going to contain props for our component with options and this will going to return Image Response for your OG meta tag.

This is all you going to need for generating dynamic OG Images for your shareable links.

This is me writing for you. If you wanna ask or suggest anything please put it in comment and show some love ❤️.

In India, after few days we have a festival Deewali or Deepawali. I wish you all a very happy diwali 🪔.

SvelteKit Changes: Cookies and Authentication

Shivam Meena — Wed, 21 Sep 2022 20:41:16 +0000

Introduction

In this article, We going to talk about cookies in sveltekit and learn how to handle authentication with Cookies after sveltekit removed getSession handler from hooks. We are now left with new route system and new cookies method. Here, we going to look into two different possible methods to authenticate a user in sveltekit.

Using parent() function in routes.
Using svelte stores to handle authentication.

Cookies

Cookies is a new method introduced in sveltekit for cookie header. You can use this method to work with cookies in your webapp with least efforts. There are some more methods in cookies those are set, get and delete.

Set Method

This methods sets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get during the current request.

The httpOnly and secure options are true by default, and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option default to lax.

By default, the path of a cookie is the 'directory' of the current pathname. In most cases you should explicitly set path: '/' to make the cookie available throughout your app.

Set method takes three parameters name, value and options, options are optional so it's up to you what you gonna set.

cookies.set('session', user.entityId, {
            path: '/',
            httpOnly: true,
            sameSite: 'strict',
            secure: !dev,
            maxAge: 60 * 60 * 24 * 30
        });

Here, I'm using set method to set my session cookie in Set-Cookie header and defining options as per need.

1. name : session (string)
2. value : user.entityId (string)
3. options: {
            path: '/',
            httpOnly: true,
            sameSite: 'strict',
            secure: !dev,
            maxAge: 60 * 60 * 24 * 30
        }

Get Method

This method is use to get a cookie that was previously set with cookies.set, or from the request headers.

Get method takes two parameters name and options, options are optional.

const session = cookies.get('session');

Here, I'm using get method to access my session value from cookies that we set above using set method.

Delete Method

This method is use to delete a cookie by setting its value to an empty string and setting the expiry date in the past.

Delete method takes two parameters name and options, options are optional.

await cookies.delete('session');

That's all we need to remove a cookie.

Serialize Method

It's same as set method which serialize a cookie name-value pair into a Set-Cookie header string.

Authentication Flow in sveltekit

Here, I'll explain steps to authenticate a user using cookies and session.

Every user authentication starts after you have a register method. So, first make sure to have a user registered in db.
Make a login route which will gonna handle your user authentication. Here we gonna set Cookies named 'session' using set method.
We will update our hooks.server.ts where we going to access cookies and get our session cookie using get method.
We will get our user on the basis of session and going to add data to locals as user.
In +layout.server.js, we going to access our locals data and going to return user data.
We can use that user data to set a store for authentication or use it by parent method.

Local interface that defines event.locals, which can be accessed in hooks (handle, and handleError), server-only load functions, and +server.js files.

Authentication using parent() method

Now we will follow our flow and going to code our authentication flow.

Create a route which will going to handle your login. It should have +page.svelte and +page.server.js. In +page.svelte you going to add your login form which email and password fields. On login it's going to call a form action on +page.server.js for now it's our default action.

// +page.server.ts (inside login route)

import { redirect } from '@sveltejs/kit';
import type { PageServerLoad, Actions } from './$types';
import { customResponse } from '$lib/utils';
import { userRepository } from '$lib/Redis/dbRepository';
import * as bcrypt from 'bcrypt';
import { dev } from '$app/environment';

export const actions = {
    default: async ({ request, cookies }) => {
        const form = await request.formData();
        const email = form.get('email');
        const password = form.get('password');

        if (!email || !password) return customResponse(400, false, 'Email and Password are required');

        if (typeof email !== 'string' || typeof password !== 'string')
            return customResponse(400, false, 'Enter a valid email and password.');

        const user = await userRepository.search().where('email').equals(email).return.first();
        const passwordMatch = user && (await bcrypt.compare(password, user.password));

        if (!user || !passwordMatch)
            return customResponse(400, false, 'You entered the wrong credentials.');
        cookies.set('session', user.entityId, {
            path: '/',
            httpOnly: true,
            sameSite: 'strict',
            secure: !dev,
            maxAge: 60 * 60 * 24 * 30
        });
        // return customResponse(200, true, 'User loggedIn successfully');
        throw redirect(307, '/dashboard');
    }
};

// customResponse function from lib/utils

import { invalid } from '@sveltejs/kit';

export const customResponse = (status: number, success: boolean, message: string, data?: any) => {
    if (success) {
        return {
            success: success,
            message: message,
            info: data
        };
    }
    return invalid(status, {
        success: success,
        message: message,
        info: data
    });
};

Here, I'm validating the user and after validating successfully we are using our set method to set session cookie.

cookies.set('session', user.entityId, {
            path: '/',
            httpOnly: true,
            sameSite: 'strict',
            secure: !dev,
            maxAge: 60 * 60 * 24 * 30
        });

Now we will going to use our hook.server.ts to provide user data to every route whenever we need it.

// hook.server.ts

import type { Handle } from '@sveltejs/kit';
import { userRepository } from './lib/Redis/dbRepository';

// custom redirect from joy of code `https://github.com/JoysOfCode/sveltekit-auth-cookies/blob/migration/src/hooks.ts`
function redirect(location: string, body?: string) {
    return new Response(body, {
        status: 303,
        headers: { location }
    });
}

const unProtectedRoutes: string[] = [
    '/',
    '/login',
    '/createAdmin',
    '/features',
    '/docs',
    '/deployment'
];

export const handle: Handle = async ({ event, resolve }) => {
    const session = event.cookies.get('session');
    if (!session && !unProtectedRoutes.includes(event.url.pathname))
        return redirect('/login', 'No authenticated user.');
    const currentUser = await userRepository.fetch(session as string);

    if (currentUser) {
        event.locals.user = {
            isAuthenticated: true,
            name: currentUser.name,
            email: currentUser.email,
            type: currentUser.user_type,
            active: currentUser.active,
            phone: currentUser.phone
        };
    } else {
        if (!unProtectedRoutes.includes(event.url.pathname)) return redirect('/', 'Not a valid user');
    }

    return resolve(event);
};

Here, We going to access our session cookie using get method const session = event.cookies.get('session');.

After that we need to check if session cookie exist or not and we are adding extra condition for route check because we are going to redirect if user is not loggedIn.

Why we are adding this extra route check conditions? It's because when user is on login route and if user is not authorized we going to redirect him to login page which will create an infinite loop of redirect and our browser don’t like that.

After validation we are going to get our user from database and update our locals

event.locals.user = {
            isAuthenticated: true,
            name: currentUser.name,
            email: currentUser.email,
            type: currentUser.user_type,
            active: currentUser.active,
            phone: currentUser.phone
        };

Now, we going to access our locals in +layout.server.js and going to return our user data from locals to our web app.

// +layout.server.js

export const load = async ({ request, locals, cookies }) => {

    return {
        user: locals.user
    };
};

Here, we are accessing our locals and then returning it to all the pages because it's layout, all the data will be accessible to every page which shared the same layout.

Accessing data in routes is easy because of parent method. We going to use routes page.js's load method to access data from layout.

// +page.js

export const load = async ({ parent }) => {
    const { user } = await parent();
    if (user) {
        user: user
    }
};

This will make your user data accessible to the route. For first time it's going to look complex but after doing once you are going to love it.

Authentication using stores

In stores we going to need a auth.js file to add a store to our project.

Everything will be same as above part except here we are not going to use parent() method. We will set a store and then we are going to access our +layout.server.js data in +layout.js which will going to return our data to +layout.svelte and then we going to set our user data to store.

So follow all the steps till +layout.server.js, and return user data to all pages.
Then we are going to create a store in lib/auth.js

import { writable } from 'svelte/store';
export const user = writable();

This will do our job for store.

Now in +layout.js file we will access the data came from +layout.server.js.

// `+layout.js`

export const load = async function ({ data }) {
    return {
        user: data.user
    };
};

This will return data to our +layout.svelte in our export let data.

// +layout.svelte

<script lang="ts">
  import { user } from "$lib/auth";
  export let data;
  $: $user.set(data.user);
</script>

<slot />

Now we have our store with user info and we can access it anywhere in our client side code.

This is all we need to handle authentication in sveltekit with cookies. We haven’t covered how to manage a protected route. So answer is already somewhere in this article(not accurate but idea to handle it). Do a bit brainstorming for that. I might have missed some part or anything you can ask me to add that in comments.

Resources

Here I'm leaving with you with some resources, I used some of them to write this article

This is me writing for you. If you wanna ask or suggest anything please put it in comment and show some love ❤️.

Sveltekit Changes: Form Actions and Progressive Enhancement

Shivam Meena — Sun, 18 Sep 2022 18:36:30 +0000

Introduction

In this article we gonna learn and talk about SvelteKit form progressive enhancement use action and new form actions. Now in SvelteKit you don't have to worry about form submission handling or how to handle our apps if Javascript is disabled in users browsers. There are a lot of problems related to forms and SvelteKit tried to fix some of them and I think they did the right.

Here we mainly going to focus on use:enhance(Progressive Enhancement) and form actions.Progressive Enhancement includes form response handling, applyResults to client and things related to client. Form actions are mainly for server side thing when you submit a form Form actions comes to play in backend(server side). It includes default actions, named actions, error and redirects.

We are going to start with Form Actions.

Form Actions

Form action is new way to handle forms submitted from client side with post request on server side. This is all going to take place inside +page.server.ts or +page.server.js which exports a function by the name actions. Let me show you with example of default actions.

Default Actions:

// src/routes/login/+page.server.js

/** @type {import('./$types').Actions} */
export const actions = {
  default: async ({ request }) => {
     const form = await request.formData();
     const email = form.get('email');
     const password = form.get('password');
     // do whatever you want to do with email and password
  }
};

// src/routes/login/+page.svelte

<form method="POST">
  <input name="email" type="email">
  <input name="password" type="password">
  <button>Log In</button>
</form>

As you can see in +page.svelte we made a form with post request to submit to server and on +page.server.js we have a exported const actions. This action have default parameter which which is async function and we can get all data from request. Here, If user clicks on Log in button for will be submitted using POST method using Default Action.

Sometimes, We have a form somewhere in the layout and layout doesn’t have Actions to handle form submission using Action. In these cases, we can have a route to that page and we can use that route as action=/url.

For example we have a login form in navbar which is in layout and we need to submit the form using Actions. So here we gonna make a login route (includes action in +page.server.js which default action) and in form we gonna pass that route.

// src/routes/+layout.svelte

<form method="POST" action="/login">
  <!-- content -->
</form>

When using <form>, client-side JavaScript is optional, but you can easily progressively enhance your form interactions with JavaScript to provide the best user experience.

Named Layouts

As we know we might have multiple forms on same page and we need to submit them using actions and default action can we used in one form. Here we gonna take an example if we have register and login forms on same route and we need to submit both. Here, Named routes comes to play these works like default but with a name like me and you.

// src/routes/user/+page.server.js

/** @type {import('./$types').Actions} */
export const actions = {
  login: async (event) => {
    // TODO log the user in
  },
  register: async (event) => {
   // TODO register the user
  }
};

// src/routes/user/+page.svelte
<form method="POST" action="?/login">
  <!-- content -->
</form>

<form method="POST" action="?/register">
  <!-- content -->
</form>

As you can see in +page.server.js we have defined are actions const and inside that we named our functions login and register.

Here, we don't have a default action so how we gonna call them on our form. So basically on forms we can pas a action parameter with the specific named action. As in above code block on both forms i passed action="?/login" for login named action and action="?/register" for register named action. Here ?/ these things something you have seen in URL's where ? means a parameter is passed on to request and /login or /register is the parameters for the actions to be called on server.

As we discussed in default action for form to be in layout page then what we can do in named actions is:

<form method="POST" action="/user?/register">
</form>

We just have to add route with parameters of named layout.

Error handling in Actions

When we add checks for user input and find error we need to return a response so client/user should know what mistake they have made.

import { invalid } from '@sveltejs/kit';

/** @type {import('./$types').Actions} */
export const actions = {
  login: async ({ cookies, request }) => {
    const data = await request.formData();
    const email = data.get('email');
    const password = data.get('password');

    const user = await db.getUser(email);
        if (!user) {
            return invalid(400, { email, missing: true });
        }

        if (user.password !== hash(password)) {
            return invalid(400, { email, incorrect: true });
        }

    cookies.set('sessionid', await db.createSession(user));

    return { success: true };
  }};

// html
<script>
  /** @type {import('./$types').PageData} */
  export let data;
  /** @type {import('./$types').ActionData} */
  export let form;
</script>

{#if form?.success}
  <!-- this message is ephemeral; it exists because the page was rendered in
       response to a form submission. it will vanish if the user reloads -->
  <p>Successfully logged in! Welcome back, {data.user.name}</p>
{/if}

SvelteKit Provides a invlaid function which handle all the error related issues. You just need to pass two parameters to it. Ist is status code of error and IInd is data and it can be anything you need on client side for error handling.

In above code snippet, You can see I'm checking for user exist in db if not I'm returning return invalid(400, { email, missing: true }). That's all we need to handle error in actions. If you have no errors you can just simply return a dictionary just like return { success: true };. This will do the job for errors and success return.

All the errors and success data we return from actions can be accessed using export let form; and using that you can provide users with more interactive UI/UX.

Redirects in Actions

// @errors: 2339 2304
import { invalid, redirect } from '@sveltejs/kit';

/** @type {import('./$types').Actions} */
export const actions = {
    login: async ({ cookies, request, url }) => {
    const data = await request.formData();
    const email = data.get('email');
    const password = data.get('password');

    const user = await db.getUser(email);
    if (!user) {
      return invalid(400, { email, missing: true });
    }

    if (user.password !== hash(password)) {
      return invalid(400, { email, incorrect: true });
    }

    cookies.set('sessionid', await db.createSession(user));

        if (url.searchParams.has('redirectTo')) {
            throw redirect(303, url.searchParams.get('redirectTo'));
        }

    return { success: true };
  }};

In above code snippet,We are looking for a redirect parameter so we can redirect to specified location.

if (url.searchParams.has('redirectTo')) {
            throw redirect(303, url.searchParams.get('redirectTo'));
        }

But what is important here is throw redirect(303, url.searchParams.get('redirectTo')). As you can see redirect function which is responsible for redirecting to a route takes two parameters one is status code for redirect and second is location to be redirected. For example if user is authenticated successfully we need to redirect user to dashboard. So, we can just do

throw redirect(303, '/dashboard')

This will redirect user too dashboard page.

Now we have completely covered Form Actions. We need to learn about Progressive Enhancement.

Progressive Enhancement

Above, we made a /login action that works without client-side JavaScript — not a fetch in sight. That's great, but when JavaScript is available we can progressively enhance our form interactions to provide a better user experience.

And we can achieve that just adding a single use action method from svelte. To progressively enhance a form is to add the use:enhance action:

<script>
    import { enhance } from '$app/forms';

  /** @type {import('./$types').ActionData} */
  export let form;
</script>

<form method="POST" use:enhance>

Just add use:enhance and it will do all browser behaviored things without page reload.It will:

update the form property and invalidate all data on a successful response.
update the form property on a invalid response.
update $page.status on a successful or invalid response.
call goto on a redirect response.
render the nearest +error boundary if an error occurs.

By default the form property is only updated for actions that are in a +page.server.js alongside the +page.svelte because in the native form submission case you would be redirected to the page the action is on.

To customise the behaviour, you can provide a function that runs immediately before the form is submitted, and (optionally) returns a callback that runs with the ActionResult.

<form
  method="POST"
  use:enhance={({ form, data, cancel }) => {
    // `form` is the `<form>` element
    // `data` is its `FormData` object response from action
    // `cancel()` will prevent the submission

    return async ({ result }) => {
      // `result` is an `ActionResult` object
    };
  }}
>

This will help us for UI changes without reloading page on the basis of form state.

applyAction Method

Sometimes we need to handle our own errors or redirects on client. Here, we have access to all data returned by the form actions in +page.server.js.

<script>
    import { enhance, applyAction } from '$app/forms';

  /** @type {import('./$types').ActionData} */
  export let form;
</script>

<form
  method="POST"
  use:enhance={({ form, data, cancel }) => {
    // `form` is the `<form>` element
    // `data` is its `FormData` object
    // `cancel()` will prevent the submission

    return async ({ result }) => {
      // `result` is an `ActionResult` object
            if (result.type === 'error') {
                await applyAction(result);
            }
    };
  }}
>

Here we are looking for error in results returned by the form actions. If result.type === 'error' we gonna use applyAction(result) on result to handle error to nearest error page.

The behaviour of applyAction(result) depends on result.type:

success, invalid — sets $page.status to result.status and updates form to result.data
redirect — calls goto(result.location)
error — renders the nearest +error boundary with result.error
Custom event listener
Custom event listeners are same things with what we used to do with forms in sveltekit earlier. I'll hope that you will try to understand this code snippet.

<script>
  import { invalidateAll, goto } from '$app/navigation';
  import { applyAction } from '$app/forms';
  /** @type {import('./$types').ActionData} */
  export let form;
  /** @type {any} */
  let error;

  async function handleSubmit(event) {
    const data = new FormData(this);

    const response = await fetch(this.action, {
      method: 'POST',
      body: data
    });
    /** @type {import('@sveltejs/kit').ActionResult} */
    const result = await response.json();

    if (result.type === 'success') {
      // re-run all `load` functions, following the successful update
      await invalidateAll();
    }

    applyAction(result);
  }
</script>

<form method="POST" on:submit|preventDefault={handleSubmit}>
  <!-- content -->
</form>

This is a straight forward onclick and preventDefault with custom submit.

These all things are making sveltekit much better than what it used to be and breaking changes might be headache but after v1 we are gonna enjoy it much more than we think.

This is me writing for you. If you wanna ask or suggest anything please put it in comment.

Sveltekit Changes: Advanced Layouts

Shivam Meena — Thu, 15 Sep 2022 11:06:15 +0000

Introduction

In last part I added my project's tree:

src/routes/
├── (authed)
│   ├── +layout.server.ts
│   ├── +layout.svelte
│   └── dashboard
│       ├── +page.svelte
│       └── +page.ts
├── (unauthed)
│   ├── +layout.server.ts
│   ├── +layout.svelte
│   ├── +page.svelte
│   ├── +page.ts
│   ├── createAdmin
│   │   ├── +page.server.ts
│   │   └── +page.svelte
│   └── login
│       ├── +page.server.ts
│       └── +page.svelte
└── api

Here you can see I named some directories in parentheses. Few days ago, kit made some changes to layouts too. Made them more advanced and re-useable. I'm gonna focus more on grouped layouts because these are more useful in big projects.

Project Introduction for Example Use

Here we going with our project tree. I have a project which need two different navbars. One is neede when user is not authenticated and other is for when user is authenticated.
So some of my routes are accessible without loggedIn those are [login, createAdmin, Home]. Routes for loggedIn user is [Dashboard]. Now I'll explain all about group layout to understand my project.

Grouped Layouts

In my projects I need different Navbar for Authorized and Unauthorized users. For this kind of things we need different layout for Authorized and Unauthorized where grouped layouts comes to play. They made it easy to identify which route is authorized and which is not. Second now i can have a different layout for both type of groups.

When user comes to / route it goes to (unauthed) group and loads with it's layout.
When user is loggedIn and /dashboard route is accessible, dashboard route will be loaded with (authed) group's layout.

As you can see now my routes are managed as well as I'm able to use different navbar on the basis of user authorization. And one much important thing group names doesn’t effect your public routes. Yup that's cooler than my project 🥲.

Let's talk about some more magical things that sveltekit did with layouts.

+page@

Above you learned about grouped layouts but sometimes we need to break from those groups or route's parent layout. Where +page@ comes to play. First look at this project tree:

src/routes/
├ (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page.svelte // Focus on this one
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

Here our route is using three layouts [(app) - group, item - route, [id] - dynamic route]. If embed route wanna reset any one of layouts just append name of layout after +page@.

Example: If it's wanna reset (app) - group layout just do +page@(app).svelte and if wanna change root layout just do +page@.svelte.

// app grp reset

src/routes/
├ (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page@(app).svelte // Focus on this one
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

// Root layout reset

 (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page@.svelte // Focus on this one
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

This will help you to reset your layout for specific route anywhere in project. If you wanna reset child routes layout you can use similar techniques on +layout@ and handle as +page@. For more information read Advanced Layouts on Sveltekit Docs

This is me writing for you. If you wanna ask or suggest anything please put it in comment.

Sveltekit Changes: Routes

Shivam Meena — Wed, 14 Sep 2022 18:32:43 +0000

Introduction

As you know, In last article I explained Load Function changes where I also mentioned about new routes changes and now we gonna look how they works and what they are now.

If you see a tree I'll will be showing it from src/routes directory.

New Directory Based Routing

Now, In sveltekit everything looks new it's also goes for routing. We all have been fan of file-based routing but sveltekit comes with new routing which is directory based.
So now you define a folder than add your +page.svelte, +page.js, +page.server.js files as per need where:

+page.svelte is for your client side code with all the html, css and js for client.
+page.js is for Load function which i have explained in detail.
+page.server.js is for all server side code earlier you may know it by the name shadow endpoint. Here you define all the form actions for the route.

That's the overview we need to get some more details. So we start from layout and gonna end at server routes.

Layouts

Now theres is nothing like __layout.svelte and it's replaced with +layout.svelte and now you have to more things to look on those are +layout.js and layout.server.js.

// +layout.svelte

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/settings">Settings</a>
</nav>

<slot></slot>

+layout.svelte going to work same as __layout.svelte but you need to define Load Function inside +layout.js. And if you need Load Function to run on server you going to use layout.server.js.

export function load() {
  return {
    sections: [
      { slug: 'profile', title: 'Profile' },
      { slug: 'notifications', title: 'Notifications' }
    ]
  };
}

But here comes the twist you can only do Load Functions in layout.server.js no http request handling here which comes in +page.server.js, so never get confused in this.

+layout.js, +layout.server.js can export page options — prerender, ssr and csr.

Error Page

If an error occurs during load, SvelteKit will render a default error page. You can customise this error page on a per-route basis by adding an +error.svelte file (So there is no __error.svelte now):

<script>
  import { page } from '$app/stores';
</script>

<h1>{$page.status}: {$page.error.message}</h

+page

A +page.svelte component defines a page of your app. So your / route will be +page.svelte inside src/routes/. Which will be your client side code.

// `+page.svelte`
<script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

<h1>{data.title}</h1>
<div>{@html data.content}</div>

A +page.js files handles load function of that route. For more detailed explanation read Sveltekit Changes: Load Function.

A page.server.js file handles your server side code in which you handle your form actions.

// page.server.js or `+page.js`
import { error } from '@sveltejs/kit';

/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
  const post = await getPostFromDatabase(params.slug);

  if (post) {
    return post;
  }

  throw error(404, 'Not found');
}

If load lets you read data from the server, actions let you write data to the server using the
element

So if you want a route named about you have create a directory inside src/routes directory with the name about. Inside that you will add +page.svelte and if you need load function add +page.js and also wanna use form actions and server side rendering ad +page.server.js.

I know it's alot to degist first but after one project you are sold for the idea.

+sever Routes

Sometimes we need API or endpoints for our http requests then you can simply use +server.js. So if you wanna create a API or Endpoint by the name login, You will create a directory inside src/routes by the name login and add +server.js file inside it.

These endpoints are capable of HTTP request methods eg. GET, POST, PATCH, PUT AND DELETE and it works on request and response method of http requests.

// `+server.js`

import { error } from '@sveltejs/kit';

/** @type {import('./$types').RequestHandler} */
export function GET({ url }) {
  const min = Number(url.searchParams.get('min') ?? '0');
  const max = Number(url.searchParams.get('max') ?? '1');

  const d = max - min;

  if (isNaN(d) || d < 0) {
    throw error(400, 'min and max must be numbers, and min must be less than max');
  }

  const random = min + Math.random() * d;

  return new Response(String(random));
}

new Response is a reponse object that will return a response to client.

Finally the Routes Tress

.
├── (authed)
│   ├── +layout.server.ts
│   ├── +layout.svelte
│   └── dashboard
│       ├── +page.svelte
│       └── +page.ts
├── (unauthed)
│   ├── +layout.server.ts
│   ├── +layout.svelte
│   ├── +page.svelte
│   ├── +page.ts
│   ├── createAdmin
│   │   ├── +page.server.ts
│   │   └── +page.svelte
│   └── login
│       ├── +page.server.ts
│       └── +page.svelte
└── api

Here you can see a file structure of my project and you might have seen some weird folder with name inside parentheses. Those are grouped layouts. We will discuss them later.

I'll suggest you to migrate your old projects to newer one to understand it more better.

This is me writing for you. If you wanna ask or suggest anything please put it in comment.

Sveltekit Changes: Load Function

Shivam Meena — Tue, 13 Sep 2022 18:23:01 +0000

Introduction

In this article i'm going to explain you about new changes in load function of sveltekit framework. How it is changes after sveltekit opted for directory based routing. I already made a summary post of all the breaking changes of sveltekit Sveltekit Braking changes: Routing, Load and new way of shadow endpoints.

New way of defining Load Function

In early days of sveltekit we use to define a extra <script> tag with context=module

// The old Way

<script context="module" lang="ts">
// Your load function goes here.
</script>
<script lang="ts">
// Your client code goes in here for typescript
<script>

// All html here

<style>
// All css here for the page
<style>

which made it weird having two script tags is good for confusing others and there are more useful reasons why sveltekit opted for this.

Now we already have directory based routing that makes things easy for a new thing which is removing script tag from +page.svelte and giving load function it's own space(Everyone loves their personal space) with page.ts. Where you can define your Load function easily.

// The new way inside `+page.ts

+import type { PageLoad } from './$types';

export const load: PageLoad = () => {
  // ...
}

wait wait this is not the only change that they made in Load function. Now they have some spot on better things with Little bit sour ones.

Accessing value, Error handling and Redirect in Load Function

Now, We know that we need a new file(+page.ts) for load function but we don't know how to return the values and access them in our client(+page.svelte).

In this section sveltekit made a good choice to remove props to return. Now you don't have to return things inside a prop now you can return them just
return { Sveltekit: 'Release candidate phase' }.

// Old way 
export function load() {
  return {
     props: {
          answer: 42
     }
  };
}

// New way
// +page.ts
export function load() {
  return {
  answer: 42
  };
}

I know you liked it.

Now we come to the part how to access this returned value inside our +page.svelte. It's very easy thing now, you have to add a new line in your +page.svelte's script tag export let data;. That's all now you can use all the data from load function. There is one more method to access data from load function which is using $page store of sveltekit. This have all the data related to your current page. Just do $page.data and this will give you all data we got from load function.

// Method 1 inside +page.svelte
<script>
export let data
</script>

<h1> {data.answer} </h1> <!-- 42: value returned from load -->

// Method 2 inside +page.svelte
<script>
  import { page } from '$app/stores';
<script>

<h1> {$page.data.answer} </h1> <!-- 42: value returned from load -->

Both methods works perfectly and can be used as per your satisfaction.

Now throwing error is easy as blaming someone else for your error.

+import { error } from '@sveltejs/kit';
export function load() {
  throw error(400, 'not found');
}

Yup this will give a 400 to user. Error function takes two values. First, status code of error and second is message to be shown.

Redirects same as errors.

+import { redirect } from '@sveltejs/kit';
export function load() {
  throw redirect(302, '/');
}

As error, redirects takes two parameters, first is status code and route on which user will be redirected.

That's all we need to cover in load function. If i left something let me know.

This is me writing for you. If you wanna ask or suggest anything please put it in comment.

Forem: Shivam Meena

Building ContainerKit: GUI for Apple's Container CLI with Tauri and Svelte 5

Introduction

Resources

Why Tauri?

Why Svelte?

Learning

Current Status

Preview

Conclusion

Announcing SvelteKit OG v4: An alternative to @vercel/og for sveltekit

Introduction

Resources

Core of the v4

Runtime Stability & Reliability

Ultimate Font Utilities (v4.2.0 Update)

How to use

Conclusion

Cloudflare Based AI Embed System

What I Built

Demo

My Code

Journey

Using Web Browser's Indexed DB in SvelteKit

Introduction

Resources

Prerequisites

Setting up Dexie

Power of Blogging with SveDev: Dev.to API & SvelteKit Combo

Introduction

SveDev

Tech Stack

Deployment

Demo

How to Deploy

Features

Pages

Redis Integration in SvelteKit: A Game-Changer for Session Management

Introduction

Resources

Prerequisite

How to use

Initializing Redis Session Store

All available method on RedisSessionStore

Using Methods in our projects Authentication.

Dynamic OG image with SvelteKit and Satori

Introduction

Flow to generate SVG

Generate SVG from HTML Template

Surprise: @ethercorps/sveltekit-og

SvelteKit Changes: Cookies and Authentication

Introduction

Cookies

Authentication Flow in sveltekit

Authentication using parent() method

Authentication using stores

Resources

Sveltekit Changes: Form Actions and Progressive Enhancement

Introduction

Form Actions

Progressive Enhancement

Sveltekit Changes: Advanced Layouts

Introduction

Project Introduction for Example Use

Grouped Layouts

+page@

Sveltekit Changes: Routes

Introduction

New Directory Based Routing

Sveltekit Changes: Load Function

Introduction

New way of defining Load Function

Accessing value, Error handling and Redirect in Load Function