Building a Multi Tenant Web App with SvelteKit

[rogadev]

As a student building his capstone project, I wanted to reach for SvelteKit as it was something I used this summer to build a co-op web app. However, this current project needs multi tenant functionality. I have no idea where to start when tackling this with SvelteKit and there is a distinct lack of information about how to do it on the web.

So far, I'm using SvelteKit, Vercel, and Supabase. If you can think of a good reason to replace Supabase, it's the only part of the stack I'm not totally set on, so feel free to give me your input.

I did stumble upon this Next.js + Vercel starter kit for multi-tenancy, however I'm not quite confident enough in my skills to say I could, myself, apply this to a SvelteKit + Vercel app. I'm wondering if anyone has done this in the past and can point me to a repo to see how it's been implemented. Or, if you have a good web resource that explains how to do it, I'm all ears.

Thanks in advance!

[ollydowning]

Hi, were you able to find any answers to this?

[rogadev]

I have not. 😥

[jackbuehner]

I did this by adding a tenant route param in front of all of my other routes (e.g. https://example.com/tenant-name). If a client hits a route without the tenant param, I redirect to a tenant selection page.

[rnbokade]

You could use krakend or some reverse proxy infront of this to translate subdomain to route param

[roman-koshchei]

Am I right that we can just use domain, an Id of the resource we need to serve? For example, if we make multi-tenant restaurant menu, we check domain in load function to fetch right restaurant info. Is it way to do it?

[kirkbushell]

How'd you go with this? I managed multi-tenancy myself, using domains.

[steve-taylor]

Svelte itself doesn't need any special multi-tenant or multi-domain feature. Create a single data-driven SvelteKit website that services all your customers, a single database as well, and logically partition customer data by their website's hostname.

In src/routes/+layout.server.ts:

export async function load({url}: LayoutServerLoadEvent) {
    // Load customer-specific website data by url.host

Then all you need to do is make this horizontally scalable, which is beyond the scope of this discussion.

[nicksergeant]

@steve-taylor that makes sense until you want to separate directories of templates and components by hostname, which is primarily what the Vercel Platforms / Next.js middleware shows.

[dotnize]

this should now be easier with the reroute hook added in 2.3.0

#11537
https://kit.svelte.dev/docs/hooks#universal-hooks-reroute

[Louis-Bourgault]

I know this is old, but here is how i did it in src/hooks.ts, so that tenant.mydomain.com reroutes to mydomain.com/subsite/[tenant] without the user seeing. Then you can catch the tenant param like you would normally in sveltekit with $page or in +page.server.ts load function:

I imagine there is a simpler way (hopefullly without the regex) but this works for me

const subdomainRegex = new RegExp(
    `(.*)\.${'localhost:5173'.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`
);
export const reroute: Reroute = ({ url }) => {
    console.log(url);
    let usernameSubdomain = url.host.match(subdomainRegex)?.[1];
    const subsite = usernameSubdomain ? usernameSubdomain : url.host;
    let subsiteParts = subsite.split('.');
    console.log('Subsite:', subsite);

    
    if (
        url.host == 'localhost:5173' 
    ) {
        return url.pathname;
    }

    if (subsiteParts.length == 1) {
        console.log('Single subdomain:', subsite);
        const reroute = `/subsite/${subsite}${url.pathname}`;
        console.log('Reroute:', reroute);
        return reroute;
    }

    throw 'Invalid Domain';
}

[adamshand]

There is really similar to what I did as well! Works great. The only difference is that I added some paths which get excluded so that they can be shared between all sites.

export const reroute: Reroute = ({ url }) => {
	const excludedPaths = ['/sign/', '/verify', '/reset']
	let sitename = url.hostname

	// Runs before /+layout.server
	if (browser && url.hostname.startsWith('www')) {
		const redirUrl = url.href.replace(/:\/\/www\./, '://')
		if (dev) console.log('hooks.ts:', { href: url.href, redirHref: redirUrl })
		window.location.replace(redirUrl)
	}

	sitename = url.hostname.replace(/^dev\.|\.localhost$/g, '')

	if ( excludedPaths.some((path) => url.pathname.startsWith(path)) ) {
		return url.pathname
	}

	return '/' + sitename + url.pathname
}

[Louis-Bourgault]

Yeah, I did a few things like that too. Works great, but I would love if there was a way with creating a dynamic subdomain route through a folder in routes -- something like routes/.[subdomain]. Just an idea, probably will never happen.