complete express and pug templating for simple grpc usage

Author: Dovakiin0

app.js

@@ -0,0 +1,37 @@
+const express = require("express");
+
+// IMPORTING THE CLIENT FOR USING THE FUNCTIONS WE DECLARED IN PROTO FILE
+const client = require("./client");
+
+const path = require("path");
+
+const app = express();
+
+app.set("views", path.join(__dirname, "views"));
+app.set("view engine", "pug");
+
+app.use(express.json());
+app.use(
+  express.urlencoded({
+    extended: false,
+  })
+);
+
+app.get("/", (req, res) => {
+  res.render("home");
+});
+
+app.get("/:id", (req, res) => {
+  /*
+    the getDetails that we sent from the server to let the client use it is used here
+    this getDetails takes a id as parameter as we defined in the proto file then gives out a response needed.
+  */
+  client.getDetails({ id: req.params.id }, (err, response) => {
+    res.render("details", { details: response.message });
+  });
+});
+
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+  console.log("Running on port " + PORT);
+});

client.js

@@ -1,9 +1,14 @@
+/* ----------------------------------------------------------------------
+This client handles the communication to the express from the grpc server
+-------------------------------------------------------------------------*/
+
 const PROTO_PATH = __dirname + "/protos/employee.proto";
 
 const grpc = require("grpc");
 const protoLoader = require("@grpc/proto-loader");
 const _ = require("lodash");
 
+// PackageDefinition used for generating code from the proto file using protocal buffer compiler
 const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
   keepCase: true,
   enums: String,
@@ -14,24 +19,12 @@ const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
 
 const employee_proto = grpc.loadPackageDefinition(packageDefinition).employee;
 
-function main() {
-  let client = new employee_proto.Employee(
-    "localhost:3000",
-    grpc.credentials.createInsecure()
-  );
-
-  if (process.argv.length >= 3) {
-    employeeid = process.argv[2];
-  } else {
-    employeeid = 2;
-  }
-
-  client.getDetails({ id: employeeid }, function (err, response) {
-    console.log(
-      `Employee Details from Employee ${employeeid} is: `,
-      response.message
-    );
-  });
-}
+// Creating client and binding to the port of the grpc server for communcation
+// this client holds every function inside employee package
+let client = new employee_proto.Employee(
+  "localhost:3001",
+  grpc.credentials.createInsecure()
+);
 
-main();
+// exporting for using on api
+module.exports = client;

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "own-tut",
+  "name": "nodejs-grpc-tutorial",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "author": "",
-  "license": "ISC",
+  "author": "Dovakiin0",
+  "license": "MIT",
   "dependencies": {
     "@grpc/proto-loader": "^0.5.5",
     "express": "^4.17.1",

server.js

@@ -1,9 +1,17 @@
+/*-----------------------------------------------------------------------
+THIS SERVER IS USED FOR DEFINING LOGIC TO THE FUNCTIONS INSIDE PROTO FILE
+AND DECIDES WHAT FUNCTION DOES CLIENT GETS TO USE
+-------------------------------------------------------------------------*/
+
+// Importing the proto file needed to use for this service
 const PROTO_PATH = __dirname + "/protos/employee.proto";
 
+// Require packages
 const grpc = require("grpc");
 const protoLoader = require("@grpc/proto-loader");
 const _ = require("lodash");
 
+// PackageDefinition used for generating code from the proto file using protocal buffer compiler
 const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
   keepCase: true,
   longs: String,
@@ -12,21 +20,30 @@ const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
   oneofs: true,
 });
 
+// defining the employee proto from the proto file
+// the "package employee;" we used in proto file comes here and loads all the service and messages inside
 let employeeProto = grpc.loadPackageDefinition(packageDefinition).employee;
 
+// dunmmy data for interaction
 const { employees } = require("./dummyEmp");
 
+// the function getDetails we defined in employee proto
 function getDetails(call, callback) {
   callback(null, {
     message: _.find(employees, { id: call.request.id }),
   });
 }
 
+// running the actual server
 function main() {
-  const server = new grpc.Server();
+  const server = new grpc.Server(); // instantiate a grpc server
+
+  // Adding the service to server and declaring the user-defined function to the proto function
+  // getDetails is given to let the client know that it can use this function
   server.addService(employeeProto.Employee.service, { getDetails: getDetails });
-  server.bind("0.0.0.0:3000", grpc.ServerCredentials.createInsecure());
-  console.log("RUNNING ON 3000");
+
+  server.bind("0.0.0.0:3001", grpc.ServerCredentials.createInsecure()); // Binds to a port -- createInsecure() is given to say there is no authentication in the server
+  console.log("RUNNING ON 3001");
   server.start();
 }
 

views/details.pug

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+html(lang="en")
+    head
+        meta(charset="UTF-8")
+        meta(name="viewport", content="width=device-width, initial-scale=1.0")
+        title Details
+    body
+        h3 email: 
+            email= details.email
+        h3 first Name: 
+            fname= details.firstName
+        h3 last Name: 
+            lname= details.lastName

views/home.css

@@ -0,0 +1,3 @@
+.search-bar {
+  padding-left: 50;
+}

views/home.pug

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+html(lang="en")
+    head
+        meta(charset="UTF-8")
+        meta(name="viewport", content="width=device-width, initial-scale=1.0")
+        title Document
+    body
+        h1 hello
+