Angular and tRPC

Maximum type safety across the entire stack

On Twitter and Youtube, I heard many React developers talk about tRPC. I became curious and wanted to try it in Angular. Here's how to do it.

What is tRPC?

tRPC is a lightweight, high-performance RPC (Remote Procedure Call) framework designed to be simple, fast, and easy to use.

It allows you to make calls to a server from a client, as if the server was a local object, and enables you to build distributed systems using a variety of programming languages.

The main benefit of using tRPC is type safety without code generation.

Let's set up a fastify server with tRPC

To set up a tRPC server, we first have to initiate a fresh npm project and install the required packages.

tRPC can be combined with different node backend frameworks such as express or fastify. Throughout this blog post, we will be using fastify. Furthermore, we will use zod to verify incoming request data.

npm init
npm i @trpc/server fastify fastify-cors zod

Once we installed the packages. we can go ahead and generate a server.ts file.