In learning SvelteKit I'm realizing I dont actually understand how websites work yet, but im learning so sorry if this is a dumb question.

Anyway, I have a vanilla JS game that I made, how would I integrate it into my site built with SvelteKit?

create a component for the game, and then add the JS straight into the script section? or add it as a JS file and then import it into the component script section?

Thanks.

Hi all,

I'm creating a checkout page with two address sections, one for a billing address and one for a delivery address. The delivery address will only appear if the user notes that it's different from the billing address.

Since the two address entry sections are the same (with the exception of the headers), I want to create a component that I can use for both of them so I don't end up repeating the code. The zod validation will also be the same for both, with an additional superRefine to make the shipping data non-optional if the user checks the option that they wish to fill it out.

My idea for the zod schema is the following, with addressSchema being another zod schema object:

export const checkoutSchema = z.object({
  billingAddress: addressSchema,
  sameBillingShipping: z.boolean(),
  shippingAddress: addressSchema.optional(),
})
.superRefine((
data
, 
refinementContext
) => {
  if (
data
.sameBillingShipping !== true) {
    if (!
data
.shippingAddress) {
      
refinementContext
.addIssue({
        code: z.ZodIssueCode.custom,
        message: 'Shipping address required',
        path: ['shippingAddress']
      })
    }
  }
});

Then, in my +page.svelte, I am using

const { form, errors, enhance } = superForm(data.form);
...
...
<AddressForm form={$form.billingAddress} errors={$errors.billingAddress} />

to send the information to the components.

My questions are:

1. Is my zod schema designed correctly? Will this work for what I want to do or is there a better way to accomplish this?

2. How will I be able to bind my input values to the form data? Currently I receive the error of: Can only bind to an identifier (e.g. \foo`) or a member expression (e.g. `foo.bar` or `foo[baz]`)svelte(invalid-directive-value)` if I try to use bind:value on the inputs.

3. How do I get the proper typing for the errors? I see that I can use z.infer<AddressSchema> to get the form data, but I'm not sure how to get this for the errors.

Thank you!

hey everyone, I'm just new to svelte. I needed help to understand how i can build a website for resetting expired passwords. need a front end form page and backend to check and authenticate with a database and update the new passwords.

please help me out with this, struggling for the past few days

Hi guy,

As a Typescript beginner, I naively typed my components instance like this and it does the trick:

<script lang="ts">  
import Comp from '$lib/components/Comp.svelte';  
    
let compInstance: Comp | null = null;  
  
function onEventDoSomething(e: CustomEvent){  
  compInstance.doSomething();  
}  
</script>  


<Comp bind:this="{compInstance}"/>  

For a specific case, I need to use a store to pass a component instance across different pages but my previous method doesn't work in this context, because we can't import a svelte file from a js/ts one I guess. Do you have an example of how I should work with component types?

    import { writable } from 'svelte/store';
    import type { Writable } from 'svelte/store';
    import Comp from '$lib/components/Comp.svelte'; // <--- KO
    
    export const compInstanceStore: Writable<Comp> = writable(undefined);

Hello,

I am setting up some security things for my application and came accross the following:

I have 2 a +page.server.ts & +page.svelte:

//+page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async () => {
    return {
        title: 'Hello world'
    };
};

// +page.svelte
<script lang="ts">
    import type { PageServerData } from './$types';

    export let data: PageServerData;
</script>

<p>{data.title}</p>

I have a Security class that does some checks for me and I want to log a message if I am loading a page without security checks implemented based on .

Question: Now the weird thing is, on links (prefetching as well) it works fine and shows I am loading a page without a security check. But on full page refresh or direct navigation it doesn't log because event.isDataRequest is false. Why?

Hooks and Security for reference:

//hooks.server.ts
import type { Handle } from '@sveltejs/kit';

import { lucia } from '$lib/server/auth';
import { Security } from '$lib/server/security';

export const handle: Handle = async ({ event, resolve }) => {
    // Existing Lucia authentication logic
    const sessionId = event.cookies.get(lucia.sessionCookieName);
    if (!sessionId) {
        event.locals.user = null;
        event.locals.session = null;
    } else {
        const { session, user } = await lucia.validateSession(sessionId);
        if (session && session.fresh) {
            const sessionCookie = lucia.createSessionCookie(session.id);
            event.cookies.set(sessionCookie.name, sessionCookie.value, {
                path: '.',
                ...sessionCookie.attributes
            });
        }
        if (!session) {
            const sessionCookie = lucia.createBlankSessionCookie();
            event.cookies.set(sessionCookie.name, sessionCookie.value, {
                path: '.',
                ...sessionCookie.attributes
            });
        }
        event.locals.user = user;
        event.locals.session = session;
    }

    // Add security instance to event.locals
    event.locals.security = new Security(event);

    // Resolve the request
    const response = await resolve(event);

    // Verify security check after resolving the request
    event.locals.security.verifySecurityCheckPerformed();

    return response;
};

// src/lib/server/security.ts
import { dev } from '$app/environment';
import { type RequestEvent, error, redirect } from '@sveltejs/kit';

import { db } from './db';

export class Security {
    private securityCheckPerformed: boolean = false;
    private readonly user?: { id: string } | null;

    constructor(private readonly event: RequestEvent) {
        this.user = event.locals.user;
    }

    private markCheckPerformed() {
        this.securityCheckPerformed = true;
        return this;
    }

    async hasPermission(permissionName: string, communityId: string) {
        await this.isAuthenticated();

        const membership = await db.membership.findUnique({
            include: {
                role: {
                    include: {
                        permissions: {
                            include: {
                                permission: true
                            }
                        }
                    }
                }
            },
            where: {
                userId_communityId: {
                    communityId,
                    userId: this.user!.id
                }
            }
        });

        if (
            !membership ||
            !membership.role.permissions.some((rp) => rp.permission.name === permissionName)
        ) {
            error(403, `Missing permission: ${permissionName}`);
        }

        return this.markCheckPerformed();
    }

    async hasRole(roleName: string, communityId: string) {
        await this.isAuthenticated();

        const membership = await db.membership.findUnique({
            include: {
                role: true
            },
            where: {
                userId_communityId: {
                    communityId,
                    userId: this.user!.id
                }
            }
        });

        if (!membership || membership.role.name !== roleName) {
            error(403, `Missing role: ${roleName}`);
        }

        return this.markCheckPerformed();
    }

    async isAuthenticated() {
        if (!this.user) {
            error(401, 'Unauthorized');
        }
        return this.markCheckPerformed();
    }

    verifySecurityCheckPerformed() {
        console.log(this.event.isDataRequest);
        console.log(this.securityCheckPerformed);
        console.log('--------------------------------');
        if (this.event.isDataRequest && !this.securityCheckPerformed) {
            if (dev) {
                console.log('Security check not performed for data request');
            } else {
                error(500, 'Internal server error: Security check not performed');
            }
        }
    }
}

So I created this information system with Sveltekit, Ubuntu 22.04 as the server OS, PM2 as the process manager and I'm running the app in Node.Js. I've read the Sveltekit documentation on how to build and deploy the app for node adapter and here's my svelte.config.js code:

import
 adapter 
from
 '@sveltejs/adapter-node';
import
 { vitePreprocess } 
from
 '@sveltejs/kit/vite';

import
 path 
from
 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
    
// for more information about preprocessors
    preprocess: vitePreprocess(),

    kit: {
        
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
        
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter({
            
// default options are shown
            out: 'build',
            precompress: false,
            envPrefix: '',
            polyfill: true
        }),
        
// Disable CSRF
        csrf: {
            checkOrigin: false,
        },
        alias: {
            
// these are the aliases and paths to them
            '$src': path.resolve('./src')
        }
    },
    vitePlugin: {
        inspector: false
    }
};

export
 
default
 config;

Since I'm using PM2, I created an ecosystem.config.cjs file so that I can run the app with PM2 command. Here's the configuration:

module.exports = {
    apps: [
        {
            name: "app_sistamu",
            script: "npm",
            args: "run preview -- --host --port 8080",
            watch: false,
            instances: "max",
            exec_mode: "cluster"
        },
        {
            name: "app_sistamu_DEV",
            script: "npm",
            args: "run dev -- --host --port 5173",
            out_file: "/dev/null",
            watch: false
        }
    ],
};

After all the preparation, all I have to do is merging everything from development branch to master branch. Here's what I do:

git merge -m "Merging branch development to master" development; npm install; npm run build; pm2 reload ecosystem.config.cjs --only app_sistamu

With this my application can now run on the server. There's just one thing. The next time if I want to make a changes, I need to rebuild the app and then reload the PM2. I mean yeah it makes sense because in order to deploy the app I need to build it again. But this causes a problem where during the build process, the app returns a 502 Bad Gateway error. But after everything is done, the app back to normal again without any error.

This raises a question, how to deploy the app properly without disrupting user's interaction with the app?

I am using Supabase with Sveltekit for a small application. Supabase has separate clients for browser and server environments, that are available in the Load function of respective envs.

I want to write a load function is +page.ts so that it can run both on browser and server. But since the clients are different and load function parameters are different, is there no way to do this?

One way would be to write load function and load the data in +page.server.ts and write a dummy load function in +page.ts to return the data. I appreciate any other suggestions.

Hi. Has anyone tried to use SplitText from GSAP? It works locally but once I deploy on Vercel it says

"[vite]: Rollup failed to resolve import "gsap/SplitText" from "/vercel/path0/src/lib/components/gsap-config.ts"."

This happens only when deploying on Vercel, but on Netlify it works. How do you import SplitText in SvelteKit?

I'm currently developing a SvelteKit application that interacts with an external API. I'm at a crossroads trying to decide whether to use SvelteKit's SSR features or to develop the app as a Single Page Application (SPA).

With SSR, my plan is to have the SvelteKit server call the external API directly and then forward the responses using methods like fail(), instead of interacting with a database. Alternatively, I could skip using +page.server.ts and handle everything within +page.svelte, similar to my previous experiences with React.

Since SEO is not a concern for this project, I'm specifically looking for benefits of using SSR features in SvelteKit aside from SEO and feedback on if the approach i described makes sense. Any advice, suggestions, or resources that could help me make a well-informed decision would be greatly appreciated.

Description

A simple SvelteKit app that uses Supabase for authentication via GitHub authentication.

Features

• Sign in with GitHub

• Sign out

• Display user information

• Update user information

Technologies

• : A framework for building web applications with Svelte

• : A typed superset of JavaScript that compiles to plain JavaScript

• : An open-source Firebase alternative

• : A Tailwind CSS component library for Svelte, based on

• : A utility-first CSS framework

• : A unified icon framework using icons from

• : A TypeScript-first schema declaration and validation library

Hi! All those terms have broken loose and invaded developer communities. But what do they really mean?

I tried to make sense of them and ended up with the following table:

Does such classification make sense?

What mistakes have I made? What suggestions/objections do you have?

Some notes:

• As a web developer, I have built two "hydrated SSG" websites, so it's a thing. But it does not have a commonly accepted name?

• "Non-hydrated ISR" should be practically equivalent to SSR with server-side cache, but different "under the hood". I guess "non-hydrated ISR" can be configured in SvelteKit? It should make sense for static content websites and might be cheaper to run than SSR with server-side cache.

• I am deeply disturbed that "SSR" is both a rendering method and a full-blown technique. It's like calling the whole car a motor (or vice versa???). đź?’

I've been trying to implement Supabase auth for the last 2 days and the link just doesn't reliably work! I followed their tutorials and it doesn't work at all for the magic link flow.

I'm working on a pretty bog standard CRUD project (essentially a customer account management utility) which involves a customer facing application (SvelteKit) and an internal API (call it "backend"). One of the challenges I've faced with SvelteKit is understanding exactly how requests being made to the backend should be handled, or more specifically, where they should be handled.

We'd like to keep the API invisible to the browser, because it simplifies our deployment configuration (don't need to configure the API to be accessed publicly, which at my company is a big deal).

We have the environment setup such that the backend produces a nice and complete OpenAPI spec, which is consumed to produce a typed TypeScript client we can consume in the frontend codebase. This client (call it the API client) also has the ability treat the raw response and the parsing/typing of the raw response separately (ie, gets the raw Response from the backend, then parse/construct the typed data via transformer), which is important for option 2.

I'm currently mulling over two scenarios. In both cases authentication is handled by passing a bearer token from browser to backend (where its validated) through a session cookie.

Scenarios are the following:

Option 1: Requests for data are only made in the load function

Specifically server load functions (+layout.server.ts, +page.server.ts). Page load functions (+page.ts) essentially don't exist. If data MUST be requested post initial render, it's done so using an API endpoint. Backend is called via a service that basically just calls the generated API client.

Process looks like the following

SSR (initial page load): load -> data service -> API client

browser fetch (rare): browser event -> fetch -> +server.ts method -> data service -> API Client

Pros:

• Flow of data is very simple.

Cons:

• The data access layer is very ridgid. Since we can only ever request data from the load function on server, hybrid rendering (using +page.ts load) essentially doesn't exist. You want to navigate to a child route which only impacts a small part of the app? Gotta SSR the whole thing.

• The edge cases where you MUST request data from the browser becomes ugly. API endpoints must exist in these scenarios, but their existence is rather arbitrary re: which resources have them and which don't. Handling 401s or 404s from said endpoints is also ugly since you have to handle them explicitly now on a case-by-case basis with logic that's different from how you're handling them server-side.

Option 2: All requests for data are reverse proxied through an API endpoint

In this scenario the API client is essentially "wrapped" in an API endpoint, meaning and request made to the backend, ie. when said API client is called, are all coming from exactly one place. The "service" layer now becomes the thing that is responsible for calling the API Endpoint instead of calling the API client directly.

The API endpoint is essentially just accessing the backend via the API Client. Instead of returning a typed response (which isn't really possible since it still has to jump through HTTP to the browser), it returns the raw data. The service layer is then responsible for parsing the raw response into typed, structured data via the API Client transformer.

Process now looks like the following: load (server or browser) -> data service -> API endpoint -> API client

Pros:

• All data flows nicely and directly through the same place (API endpoint) assuming its called from the service layer.

• We can make use of +page.ts load functions and take advantage of hybrid rendering.

• We can use the transformer in the API client to essentially create "typed" API endpoints, which prevously was one of my major gripes with using SvelteKit.

• Even though we shouldn't ever NEED to, if push comes to shove we could call the service directly from the browser and not need to think/care about whether the service is being called via server or browser.

Cons:

• The code becomes more complex, especially for juniors/people who aren't really familiar with these concepts

• Adding a new service now involves necessarily creating a corresponding API endpoint every time

I personally am preferable to option 2, but I'm worried that I'm over complicating things. Coming to this option/getting it to even work to a degree where I'd want to use it, required some revelations re: how the API client could essentially JSON parse its own produced response to guarantee (at least in principle) consistency. If I had to parse those API endpoint responses manually there's no shot I'd even consider it.

If you've made it this far thank you for reading my wall of text.

Is there a easier/cleaner way of doing this? It seems like such a common/simple scenario for building a standard customer facing CRUD web application.

Hello, does anybody know a simple JS library compatible with svelte for authentication? I'm trying Lucia and Auth.js but my project is in js and I'm not usyng TS yet. I don't need google login etc, just simple auth. I used to use passport but I've read is not compatible with svelte. Is there anything similar?

Thanks

Hello! My understanding is that SvelteKit should preserve the scroll position automatically when clicking a link inside the application and then using the back button (as a regular website would). I'm fairly new to Sveltekit so maybe I've misunderstood something here. I've had a look around message boards for similar issues but no look so far.

If you look at this app (currently full of dummy data) you should be able to see what I mean:

On the landing page, scroll down slightly and then click any of the events in the grid. Then click the back button and you'll notice that you have jumped back up to the top.

Am I right in thinking that typically scroll position should automatically be preserved? What could cause this issue? The grid shown on the landing page is just a filtered array of elements coming from the page's load function.

Thanks in advance for your thoughts!

Hey SvelteKit enthusiasts!

I’m excited to share my latest project— "spatz" -- a sleek full-stack template for building SvelteKit apps, packed with powerful features:

• SvelteKit: The futuristic web framework for blazing fast web apps.

• PocketBase: Self-contained user auth, database, admin UI, and API documentation.

• OpenAI: ChatGPT 3.5-turbo & 4.0-turbo for contextually aware chatbots.

• Vercel AI SDK: AI/ML models for image, text, and audio processing.

• TailwindCSS: A utility-first CSS framework for rapid UI development.

• DaisyUI: A Tailwind-based component library.

• Zod: TypeScript-first schema declaration and validation.

I’ve become a HUGE fan of PocketBase over the past couple of years—it handles everything I throw at it. Combine that with Tailwind, DaisyUI, OpenAI, and Zod, and you’ve got a powerhouse setup. This template lets me skip the repetitive setup and dive straight into development with a connected database, admin panel, user settings UI, customizable themes, form validation, and more, all out-of-the-box.

Now, I can spin up a slick environment in minutes and deploy it to production with ease. Check it out and let me know what you think!

đź”— Live Demo:
đź”— GitHub Repo:

Your feedback and contributions are more than welcome!

I've built several websites using SvelteKit and Vercel. I built a template that I clone to have a place to start from. All of the clones I've created work flawlessly until my most recent clone and I cannot figure it out. When you first visit the website it loads as expected. However, the first page you navigate to after the home page shows up as a white screen. If you refresh the page it loads as expected and then the site works fine. All other versions of this clone I've used to build sites do not experience this issue.

The only thing I've noticed is the following. When you click a link like the about page the url has an additional trailing / so it looks like this.

Once I refresh the trailing / is gone and all other navigation excludes the /. All other sites using this clone do not have this trailing / on first click.

I verified this by looking at the following.

$: segment = $page.url.pathname
console.log(segment)

Two live site I have are listed below. I'm looking at the console on the live sites and on localhost and they don't give me any error.

Working Site 

Site With Error 

If any one has any thoughts I'd appreciate it. It seems like a routing issue but it could be something else. Happy to share code but just not sure what to share based on the oddity of this bug.

I'm a backend programmer and usually when I need to do something simple on the frontend I used Svelte and Svelte Kit.

But in these last few days I have to do something more complicated than usual and I realized something incredible: if I understand correctly, there is no library or code already written and battle tested that allows you to save variables and to replace them when changing the URL with the "back" and "next" buttons.

I opened various questions in the "Discussions" section of Svelte Kit and Svelte Github repos and in Discord but either I didn't receive answers or they answered me without a practical solution.

I really regret this and I think this is the lack of community and libraries and real code examples when they don't recommend Svelte instead of Vue or React.

So the question for you, Svelte/Kit people:

Is there a SIMPLE way in Svelte Kit to persist in the URL the filter conditions of a dashboard or a list so that I can:

1. return to previous filter settings when I go back and to subsequent ones when I go forward with the browser keys or

2. save those filters (javascript simple objects with JSON.stringify()) in the browser bookmarks or as a link to share with some people?

I don't need browser DB, special cache levels, localStorage, none of this.

I know ho to persist in the URL and how to retriev from it: I need an "universal helper" for all the pages withtou ising $effect() to sync and afterNavigate in each page!

In Svelte Kit , but since I'm not good at javascript nor Svelte I don't know how to make it a universal helper for all pages.

And among other things, I don't want to re-invent a new (surely punctured) wheel.

That's why frameworks exist, right?

I see that there's amazing youtubers focused on netxjs/react with quality full stack app tutorials like,

and few others but I couldn't find any focused on svelte/sveltekit. Let me know if you know any youtubers with similar quality tutorials

I keep seeing the same error "Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead", yet no where in any of the Svelte 5 preview docs does it show a practical example of how to use {@render ...} in `+layout.svelte` files. I'm sure it is very useful to to use slot in components, but in Svelte 4, working with `+layout.svelte` used to be dead simple, but now Svelte 5 is a mess of poorly documented APIs.

Can some show a simple example of:

• `/src/routes/+page.svelte'/`/src/routes/+layout.svelte` (one slot)

• `/src/routes/subpage/+page.svelte'/`/src/routes/subpage/+layout.svelte` (two slots)

#Svelte #Sveltekit #Runes #layout

I recognize that this may be a noob issue, and that it may not be applicaple to everyone. But I've been so confused all day and figure you all can help.

My SvelteKit app is using SSR, defaulting to the Node runtime on Vercel with the Vercel adapter for Sveltekit. I'm using Supabase with the SSR package on the server to talk to their hosted DB. One of my pages is logging an error when trying to call Supabase... but only once out of two requests per page load.

I'm using a PageServerLoad function in +page.server.ts and this is the source of the error. I've traced it down to this code. But I can't understand why:

1. it is running twice for each load, once requested by the client and the second time requested by a Vercel Edge Function...

2. why the second one is failing

This is in a route with an ID param. I'm logging the ID and it is present for both invocations.

Anyone got a "of course dummy" answer for me? Please?

Is the best way of handling this to simply have an ISR revalidation time of 1ms on a page, then whenever I update that page with a form on my website, I immediately run SvelteKit's invalidate on that page? So that the page always loads statically but also always has fresh data.

I'm using Vercel but really feel I'm not doing this right lol