I've been trying to find a way to integrate Hono inside SvelteKit for quite a while now, and I have finally found a way to do it. Basically it involves using hooks.server.ts and hijacking the request if it needs to be a hono request. I will be outlining the process on how I did it and some caveats you might encouter and how I fixed some of it. You can also follow along this tutorial. If you want to see the repo right away you may go to thisjt/sveltekit-hono-integration to check it out.

Step 1.

Create your barebones SvelteKit application by doing `pnpm create svelte@latest`. You may use your own preferred package manager, but for me I will be using `pnpm` for the rest of the tutorial. Install your dependencies, and do your basic project creation/initiation, linter rules, prettier configs, etc.

Step 2.

Install the `hono` package by doing `pnpm i -D hono`.

Step 3.

Create a folder inside your "src" folder. I usually like creating a separate "api" folder that will contain my hono api code separate from my SvelteKit routes. However, be careful as this is inside the "api" folder, this is not protected against accidental importation in the client-side code. I would prefer that your hono api code be inside "src/lib/server" so that SvelteKit will alert you that you are important server-side code in your client when you accidentally import it client-side. For the sake of this tutorial, I will store it inside "src/api" folder.

I also like adding an alias which will be named "$api" for my "api" folder. We will use it to import the code inside api to our hooks later.

Step 4.

Create your hono backend and your corresponding routes. Here I am creating my routes for `/api/hello` and `/app/hi`. I am separating these code inside the "src/api/routes/hello" and "src/api/routes/hello" folder. You may have your own style of creating your hono routes, but for me this is how I'll do it.

In the screenshot below, keep in mind that we are routing `/hi` and `/hello` in `/api`, we need this as we will be mirroring the corresponding `/api` route inside the hook that we will be creating later.

Step 5.

We will now create our hooks file. Create a `hooks.server.ts` file inside "src" folder and create the `handle` function. This is the function that will determine whether the request being made will be processed by SvelteKit or by Hono. This is where we will be using the "$api" alias.

Notice that we are grabbing the request URL and checking whether our first path folder is "api" before rerouting the request towards the hono api code.

Here's the "magic sauce" here, hono exposes a "fetch" function that accepts a Request interface, which is good as SvelteKit exposes a Request interface in the "handle" function inside `hooks.server.ts`. We can combine these together so that when our request needs to be routed to hono, we will use the "fetch" function which will return a Response interface which we can return to the requestor.

Step 6.