# Create a gRPC client and server in ExpressWeb

# Overview

This tutorial shows how to create an ExpressWebJs gRPC client and Server. In the end, you'll have a gRPC client that communicates with the gRPC Todo service.

In this tutorial, you:

✔️ Create a gRPC Server.
✔️ Create a gRPC client.
✔️ Test the gRPC client with the gRPC Todo service.

# Project setting up

To install ExpressWeb, Make sure you have Nodejs and ts-node installed. Once that is done, you can use npx expresswebcli new command, followed by your project name and --ts or --typescript to install your ExpressWeb Project.

--ts or --typescript flag enables Expresswebjs to generate the typescript version.

⚠️ It is advised to use Bash command-line when working with ExpressWebJs. Powershell is a task-based command-line interface, specifically designed for system admins and is based on the . Net Framework. Bash is a command-line and scripting language for most Unix/Linux-based operating systems.
 npx expresswebcli new myProjectName --typescript
Copied!

Or you can use ts emplace of typescript

 npx expresswebcli new myProjectName --ts
Copied!

You can decide to install expresswebcli globally via npm like so:

npm install -g expresswebcli
Copied!

Then run the below command to create your project.

  expresswebcli new myProject --ts
Copied!

Once that is done, move into your project directory or use the command below in your terminal.

 cd myProjectName
Copied!

Then install all dependencies by running npm install.

# gRPC setup

We setup gRPC host and port in .env file

GRPC_HOST=127.0.0.1
GRPC_PORT=8082
Copied!

Next will be to configure our service to run with gRPC. This is done in the app.ts in the project root directory.

/*
|---------------------------------------------------------------
| Http Server
|---------------------------------------------------------------
| This file bootstraps ExpressWebJs to start the Http server.
| Application Host, Port and Transfer Protocols are configured
| in the .env file. You are free to configure them. 
|
*/
import { StartApp } from "expresswebcorets";

StartApp.withGRPC();
Copied!

# Creating proto files

We will create a Protos folder to house our proto files in App directory. Once that is done, we will then create Todo.proto file inside Protos folder.


syntax = "proto3";

package Todo;

service TodoService {
    rpc GetAllTodos(Void) returns (TodoList) {}
}

message Void{}

message TodoModel {
    string     id = 1;
    string     name = 2;
    string     isCompleted=3;
    string  created_at = 4;
    string  updated_at = 5;
}

message TodoList {
    bool       status = 1;
    string     message = 2;
    repeated   TodoModel  data = 3;
}
Copied!

Once our Todo.proto file is ready, we will add the path to grpc config file in Config folder in root directory.

# gRPC configuration file.

gRPC configuration file is located in the Config folder in the root directory.

import { GrpcRequest } from "Elucidate/Support/GRPC/GrpcRequest";
import { GrpcResponse } from "Elucidate/Support/GRPC/GrpcResponse";
import { Path } from "expresswebcorets/lib/Utils/Path";
export { GrpcRequest, GrpcResponse };

export default {
  /*
  |--------------------------------------------------------------------------
  | gRPC Proto files
  |--------------------------------------------------------------------------
  | gRPC uses a contract-first approach to API development and Protocol
  | buffers (protobuf) are used as the Interface Definition Language (IDL).
  | Here you specify the path to your proto files
  |
  */
  protos: [Path("App/Protos/Todo.proto")], 👈 // Path to Todo.proto file.
  //this accepts array of files

  /*
  |--------------------------------------------------------------------------
  | gRPC Configuration option
  |--------------------------------------------------------------------------
  | Here you define gRPC Configuration Option
  */

  options: {
    keepCase: true,
    longs: String,
    enums: String,
    arrays: true,
    defaults: true,
    oneofs: true,
  },
};
Copied!

# gRPC implementation

Now we have our Todo.proto file ready, and gRPC configuration has been done. We can now move on to create the service implementation of our TodoService specified in our Todo.proto file.

Create a TodoController class, and add a method to fetch all todos from TodoRepository.

import { GrpcRequest, GrpcResponse } from "Config/Grpc"; 👈 //import gRPC request and response
import { BaseController } from "./BaseController";
import {TodoRepository} from "App/Repository/TodoRepository"

export class TodoController extends BaseController {
  constructor(private todoRepository:TodoRepository){}   👈  //inject TodoRepository
  /**
   * Display a listing of the resource.
   * @method GET
   * @endpoint
   */
  public async getAllTodos(req: GrpcRequest, res: GrpcResponse) {
    try{
        const todos = await this.todoRepository.findAll();
        return res.send({
            status: true,
            message: "Todos",
            data: todos,
        });
    }catch(error){
       return res.error({
        code: grpc.status.UNAVAILABLE,
        message: "Please try again later",
      });
    }
  }
}
Copied!

# gRPC route

We can now create our gRPC route that will communicate the TodoController at the index method. This is done in the Route/api.ts file in the project root directory.

import { Route } from "Elucidate/Route/RouteManager";

/*
|--------------------------------------------------------------------------
| Api route
|--------------------------------------------------------------------------
|
| Here is where you can register your application routes. These
| routes are loaded by the RouteProvider. Now create something great!
|
*/

Route.grpc("TodoService", { GetAllTodos: "TodoController@getAllTodos" });

//--------------------------------------------------------------------------
export default Route.exec;
Copied!

# gRPC client

You can now use your gRPC client to load your proto file and connect to the server at http://127.0.0.1:8082