In this guide, we’ll walk you through the process of implementing dynamic domain and subdomain routing with SvelteKit using the reroute universal hook. This hook allows you to dynamically translate URLs into routes, providing a flexible and powerful routing structure for your SvelteKit applications.

Step 1: Create src/hooks.ts

// src/hooks.ts
import type { Reroute } from "@sveltejs/kit";

export const reroute: Reroute = ({ url }) => {
	if (url.hostname === "test.com") {
		return `/test${url.pathname}`;
	}

	// Add more domain or subdomain checks as needed
};

Step2: Implement Dynamic Domain and Subdomain Routing in Your Svelte Component

Assuming you have a page structure like src/routes/[domain]/+page.svelte, where [domain] represents domain and +page.svelte is the dynamic page:

<!-- src/routes/[domain]/+page.svelte -->
<script lang="ts">
	import { page } from "$app/stores";

	let host = $page.params.domain;
</script>

<h1>Page: {host}</h1>

This allows you to handle dynamic domains and subdomains in your Svelte components. The reroute hook in src/hooks.ts checks the domain or subdomain and modifies the pathname accordingly. In the example, if the domain or subdomain is “test.com”, the pathname is modified to include “/test.com”, affecting the route selection.

By following these steps, you can set up dynamic domain and subdomain routing in SvelteKit, providing a powerful way to structure your application based on dynamic URL translations. For more details, refer to the SvelteKit Documentation on Universal Hooks: Reroute. Happy coding! 🚀