Implementation of gRPC in web and server with TypeScript

Aparna Rathore
2 min readAug 24, 2023

--

Implementing gRPC in a web (client-side) and server-side environment using TypeScript involves setting up the necessary components for both the client and the server. gRPC is a remote procedure call (RPC) framework that uses Protocol Buffers for defining services and message types.

Here’s a step-by-step guide for implementing gRPC in both environments using TypeScript:

**Server-Side (Node.js):**

1. **Define Protobuf Service:**
Create a `.proto` file to define your gRPC service and message types. For example, let’s say you’re creating a simple calculator service:

```protobuf
syntax = “proto3”;

service Calculator {
rpc Add(AddRequest) returns (AddResponse);
}

message AddRequest {
int32 num1 = 1;
int32 num2 = 2;
}

message AddResponse {
int32 result = 1;
}
```

2. **Generate TypeScript Files:**
Use the Protocol Buffers compiler (`protoc`) to generate TypeScript files from your `.proto` definition.

```bash
protoc — plugin=protoc-gen-ts=path/to/protoc-gen-ts — ts_out=./generated path/to/your.proto

```

3. **Implement gRPC Server:**
In your Node.js application, use the generated TypeScript files to implement the gRPC server.

```typescript
import * as grpc from ‘grpc’;
import { CalculatorService } from ‘./generated/calculator_pb_service’;
import { AddRequest, AddResponse } from ‘./generated/calculator_pb’;

const server = new grpc.Server();

server.addService(CalculatorService, {
Add: (call, callback) => {
const request: AddRequest = call.request;
const result = request.getNum1() + request.getNum2();
const response = new AddResponse();
response.setResult(result);
callback(null, response);
},
});

server.bind(‘localhost:50051’, grpc.ServerCredentials.createInsecure());
server.start();
```

**Client-Side (Web — Browser):**

1. **Install gRPC Web:**
gRPC Web is a JavaScript library that allows gRPC communication in browsers. Install it using npm:

```bash
npm install grpc-web
```

2. **Generate gRPC Web Files:**
Use the Protocol Buffers compiler with the gRPC Web plugin to generate the necessary JavaScript files.

```bash
protoc — plugin=protoc-gen-grpc-web=path/to/protoc-gen-grpc-web — grpc-web_out=import_style=commonjs+dts,mode=grpcwebtext:./generated path/to/your.proto
```

3. **Use gRPC Web Client:**
Use the generated JavaScript files to make gRPC requests from the browser.

```typescript
import { CalculatorClient } from ‘./generated/calculator_pb_service’;
import { AddRequest } from ‘./generated/calculator_pb’;

const client = new CalculatorClient(‘
http://localhost:8080', null, null);

const request = new AddRequest();
request.setNum1(10);
request.setNum2(5);

client.add(request, {}, (error, response) => {
if (!error) {
console.log(‘Result:’, response.getResult());
} else {
console.error(‘Error:’, error.message);
}
});
```

Remember to replace paths and details with your actual `.proto` definitions, file paths, and server information.

This guide gives you a basic understanding of how to implement gRPC in TypeScript for both server and client sides. Depending on your project’s complexity, you might need to adapt and extend these steps to fit your specific requirements.

--

--