Fullstack with Svelte & tRPC

#svelte #trpc #typescript #fullstack

Usually I just do backend-less Svelte apps. This time around I tried to go full stack in javascript/typescript.

I started with Svelte-Kit but then decided for Svelte - with a typical Vite build on the frontend - and Fastify + tRPC on the backend.

The project

Find the project at https://github.com/jzillmann/svelte-trpc-skeleton. It's just a skeleton project with minimal setup (mono repo, NPM workspaces) and a cookie based login.

I spare to list the individual setup steps since there is nothing sophisticated here. If you need those OR if you like video tutorial have a look at https://www.youtube.com/watch?v=Lam0cYOEst8. I found it excellent and it's basically the same setup just with different technologies.

Why not Svelte-Kit

Svelte is one of a few frameworks I dare to say I love. So going with Svelte-Kit was an obvious choice for me.
Why I left that path ?

The application I want to build is well suited for SPA (single page application). So I gain very little from SSR (server side rendering) and the build in routing.
While Svelte-Kit's page endpoints are properly typed (typescript), the shadow/server endpoints are not yet and those are the ones I would use most heavily. (see https://github.com/sveltejs/kit/issues/647 for progress on this)
With the Fastify/tRPC stack I can make use of more of the existing HTTP features like
- Using web-sockets (Svelte-Kit is not there yet: https://github.com/sveltejs/kit/issues/1491)
- Cancelling of HTTP requests (see https://www.reddit.com/r/SvelteKit/comments/yjdx13/detect_aborted_request_on_the_server/)
Overall it seems like the chosen stack is a little more lightweight and easier to grasp then getting familiar with Svelte-Kit.