grpc client in react typescript

Viewed 1800

I'm trying to connect to a grpc server written in .net using my react app. I think I'm really close to the solution but when I try to connect I see the following error: enter image description here

I tried to set the client with different ports and different formats (HTTPS:, DNS:...) but it's not working. Does anyone know what I'm doing wrong? I think that is in the client setup but I don't know what happens. With a .net client, it works.

This is my code:

import { UserCredentialClient } from "../proto/credentials_grpc_pb";
import { credentials } from "grpc";

const port = 443;

export const client = new UserCredentialClient(
  `z-aas-cred-cred-grpc-dva-ew1-wap01.azurewebsites.net:${port}`,
  credentials.createInsecure()
);

This is the file where I import the client and make the request to the server.

import {
  PostCredentialsProtoViewModel,
  ResponseProto,
} from "../proto/credentials_pb";
import { client } from "./protoUtils";
import * as grpc from "grpc";

interface ICredentials {
  dpid: string;
  username: string;
  password: string;
  tenantId: string;
}

const myCallback = (
  error: grpc.ServiceError | null,
  response: ResponseProto
) => {
  console.log(error);
  console.log(response);
};

export default async function saveCredentials(credentials: ICredentials) {
  const model = new PostCredentialsProtoViewModel();
  model.setDpid(credentials.dpid);
  model.setTenantguid(credentials.tenantId);
  model.setUsername(credentials.username);
  model.setPassword(credentials.password);

  const metadata = new grpc.Metadata();
  const stream = await client.addUserCredential(model, metadata, myCallback);

  return stream;
}

This is my .proto file

syntax = "proto3";

option csharp_namespace = "GrpcCredentials.GrpcService";

package UsersCredentials;

// The greeting service definition.
service UserCredential {
  // Sends a greeting
  rpc AddUserCredential (PostCredentialsProtoViewModel) returns (ResponseProto){}
  rpc UpdateUserCredential (PostCredentialsProtoViewModel) returns (ResponseProto){}
  rpc DeleteUserCredential (RequestProto) returns (ResponseProto){}
  rpc GetUserCredential (RequestProto) returns (CredentialsProtoViewModel){}
}

message Empty {}

message PostCredentialsProtoViewModel{
    string tenantGuid = 1;
    string dpId = 2;
    string username = 3;
    string password = 4;
}

message CredentialsProtoViewModel {
    string tenantGuid = 1;
    string guidUser = 2;
    string dpId = 3;
    string username = 4;
    string password = 5;
}

message ResponseProto {
    bool result = 1;
}

message RequestProto {
    string tenantGuid = 1;
    string guidUser = 2;
    string dpId = 3;
}

And this is my build.sh file where I generate js and ts file from the .proto

#!/bin/bash

PROTO_DIR=./proto

# Generate JavaScript code
yarn run grpc_tools_node_protoc \
    --js_out=import_style=commonjs,binary:${PROTO_DIR} \
    --grpc_out=${PROTO_DIR} \
    --plugin=protoc-gen-grpc=./node_modules/.bin/grpc_tools_node_protoc_plugin \
    -I ./proto \
    proto/*.proto

# Generate TypeScript code (d.ts)
yarn run grpc_tools_node_protoc \
    --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts \
    --ts_out=${PROTO_DIR} \
    -I ./proto \
    proto/*.proto

These is the versions of the packages:

enter image description here Thanks.

0 Answers
Related