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.
Final Words
Since I didn't do much beyond the project setup, final judgment is not here yet, but I feel excited about it!
Also, there are things the skeleton could be improved upon... like:
- testing setup
- unified typescript setup
- unified formatting/linting setup
- real production settings
- etc...
It's not my priority to do these things, but feel free to contribute if you feel like it!
Top comments (4)
Thank you for sharing your experience. Is there any skeleton/starter repo where we can learn how to connect all this together? Thank you very much.
The one I posted is at github.com/jzillmann/svelte-trpc-s...
Thank you 🙏
tRPC looks amazing, I have to check this out