Learn how to connect a gRPC backend built with NestJS to an Angular UI. Implement CRUD functionality and stream real time data using persistent HTTP/2 connections and Envoy proxy.
Length 1:12:57
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #grpc #nestjs #angular #protobuf #microservices #web development #coding tutorial #envoy proxy #typescript #crud
0:00 Hey everyone. Today, we're gonna take a look at using gRPC 0:04 on the UI inside of an Angular application. 0:08 So we're gonna connect this Angular application to our NestJS 0:12 backend, which is going to be running a gRPC 0:15 server. 0:16 We're gonna be able to send requests from our Angular UI to this 0:20 gRPC server and use the same exact 0:24 protobuf definitions between the backend and UI. 0:28 So our code is going to be extremely type safe. 0:30 So I'm gonna show you how we can execute CRUD-like behavior using this 0:34 gRPC API, and I'm gonna also show you how we can 0:38 stream data to the client over gRPC. 0:42 So I'm gonna be able to go in and enter in a 0:46 item and enter in the quantity for it and click 0:49 on Create, and as soon as we do, we're gonna get back the item. 0:53 And this is because we're actually streaming a gRPC 0:57 stream to our backend. So whenever a new item is added to our 1:01 server, our gRPC API is going to emit that 1:05 event to our listeners on the UI here, so we actually 1:09 see all of the items we create in real time. 1:12 So we can see this if we open up another browser tab. 1:14 So I have two separate instances of the app or, and two separate 1:18 gRPC connections to our server that is actually 1:22 streaming a response back. In this case, it's in the form of 1:26 an RxJS observable. So when I go ahead and create 1:30 a new item, like bread, and give it a new quantity and 1:34 create it, we see it on both clients because they're 1:36 both actually 1:37 subscribing to this stream on the server. 1:40 So let's go ahead and take a look at how we can actually 1:42 implement this and 1:43 use a gRPC backend and make calls to it
The rest of the transcript is for members.
Sign in 