Skip to main content

Command Palette

Search for a command to run...

Monorepo Arcitechture

Updated
6 min read

You have created 3 repo

api - src package.json express

client package.json src nextJs

queue postgres , redis

problem 1 - when you work on 3 difference folder git repo structure and has its own independence

Problem -2 due to vonoberility, if you update the package any one repo you must update to all repo

Problem - 3 you have to write CIID for each repo

Problem -4 when I want access of repo api express code ceanUP function, how can I Provide access from api to client and queue

  • I can make 3 copies and give it to them ordo the published on NPMJS and install it for 3 repo

but happened when I do update something need each of them update

Solve this problem used MONOREPO architecture

create 1 repo and add the 3 folder there

Can I say it is monorepo I have only 1 repository = monopoly

Now can we face the below problem

  1. we cant share the code, because its in separate folder

  2. there are 3 repo 3 packsges means 3 node module

  3. Write CICD for every repo

to solve this problem, MONOREPO managers come picture

mono repo manager = terborepo - made by vercel

to solve this problem, MONOREPO managers come picture

Therea are many monoepo manager, like nx, turborepo, each manager has their own architecture.

one of mono repo manager is Turborepo made by vercel, Turborepo architecture cant use in Nx monrepoe manger.

How does Terborepo work Terborepo says I become your package manager

create directory includes ChaiForms

apps/ isolated, deployable, units

in apps/ ->api - separate package.json ->web - separate package.json ->queue - separate package.json

these are all folder is isolated with each other I deploy api, different or we or queue

packages/ - shared code

-> Utils/ purchase.ts packages are not mint to deploy

we can install packages in api, web and queue

ex api/packages.json "@chaiForms/utils":"workspace*"

means packages.json will find the utils in workspace

and create a symlink

symlink = put the utils reference into api nod modules

and I can import {funm=Name} from "@chaiFroms/utils/purchase.ts"

and this is reference (ponter) when I do any changes in utils it will reflect automatically to api

When you do build in turborepo, will make build of packages/utils/purchase.ts and makethe copy in api node modules and make it delpyable

build time -copy and dev time - symlink by Truborepo

this step we can called as “Prune” at docker build = docker “Prune”

In regular

In backend express we make the api and app.get(“/user”, handlerFn)

An Client side fetch(“/users”)request

wha we basically do we match the string user and call handlerFn

handleFn is on server and we can not kepp in frontend its server funcuion

function leave in memory phase callstack

we make the layer of HTTP to call server to client

we cant call the fetch directly in my client folder

server side string “/users” and client fetch string “users” when it match then it give me, its kind of loose cupling

Google introduce the pattern, REST is good but include RPC => Remote procedure calls

We can call function as Procedure

Developer write procedures on server site

Frontend can call this procedure directly without any REST (HTTP)

is kind of like a function call

frontend will call the procedures and access the server services

How can call procedures ?

In the RPC there are two difference pattern

  1. gRPC (Google RPC) and 2. tRPC

gRPC something works on Protobufs

gRPC what says basically, what Procedures you have in server just tell me the Signatures

What is signature ? image

function add(a,b) return {a + b} this function take number as params and return the numbers

we can say below is the signature of above function

fn add(number, number) : number

signature basically tell the shape of function, what is taking input and what return the output

gRPC serialize the signature serialize is something where we can it on network (JSON and set Piyush video watch)

can we serialize the function -no its a body

we can serialize the signature in binary format = use protobuff to convert into buinary

and this serialize data will sent to client side

Now client has Signature not a actual function is on server

using this signature client can call the function

like clinet.add(5, 9)

now client http call with actual value using signature, find that procedure in backend which procedure does this signature, Procedure will call and get the result, result will return and

client will match with his signature, signature says that return should number, backend accept return number, if it client not send number in function call will rejected

and backend send the result, here client just call add function

What if backend has changed the parameter function add(num, num,num)

it will detect client side error needs the 3 parameter, means both are sync

There is no chance to man of middle attack, because its protobuff, its a binary data


tRPC => typescript remote procedure calls

All data transfer by JSON Signature write in ZOD

zod give us validatin layer

will do type server Procedures inferncing and store it in t name var

type t = typeof<server_procedure>

we will provide the [type t] as variable to client and client can use as signature

tRPC dont have its own HTTP, here we can use express, fastify, and others

In our folder structure

packages are playing role for sharing the procedures between api and web.

trcp server -> link to apps/api trcp client -> link to apps/web

api/src/server.ts import { serverRouter, createContext } from "@repo/trpc/server";

if any call come at trcp router, it handover to trcp handler

and match the signature call procedure

when we use import { api } from "~/trpc/server"; we never see the network call any api

other when we use import { trpc } from "~/trpc/client"; we can check the network call http://localhost:8000/trpc/chaiCode?input=%7B%22email%22%3A%22r%40gm.com%22%7D

chaiCode is procedure and rest your signature, this call made by server side also but you cant see in network because SSR

Thumb rule ==> Procedure should not contain the business logic

ultimately procedure become signature and signature nerver should store the body its very dangerous

Summary


Apps/

    API

    WEB

PAKAGES/
    DATABASE/ <----------- data base code,

    SERVICES <------- data base import logic, and all SERVICES     
                interact with DB

    TRPC/
	CLIENT --------> CLIENT connect to WEB

	SERVER <--------- 
    1.import all SERVICES 
    2. write the procedure 
    3. Make the proxy on SERVICES 
    4. Procedure type will inferred to CLIENT 
    5. This server will run at API



cookie all control are with express with express he can do operatins, how can interact with tRCP then

for that tRCP has 1 concept that is CONTEXT

when express interact with tRPC use context middleware, middleware has (req and res) access. Context what ever return, tRCP will do available that data in procedure.

1 views