manage the large code

palashgdev

Palash Gupta

Posted on July 17, 2021

manage the large code

When we are working on project there are some code which kept on re-using.

So we make a function out of it. let's say we want to convert a number into the currency

const numberWithCurrencyAndComma = (number: number): string => {
  return number.toLocaleString('en-IN', {
    currency: 'INR',
    currencyDisplay: 'symbol',
    minimumFractionDigits: 0,
    style: 'currency',
  })
}
Enter fullscreen mode Exit fullscreen mode

and generally, with this, we try to keep this function in the lib/utils so we can import and use this function whenever we want

that's how the beauty of the pure function 😍

but let's say there is a another project and we want to get the same result then sharing the code would be the better approach as a module which rushjs helps managing the code better

so let's try our hands dirty

npm install -g @microsoft/rushjs
Enter fullscreen mode Exit fullscreen mode
mkdir rush
cd rush
rush init
Enter fullscreen mode Exit fullscreen mode

This will configure the basic intial setup for our monorepo config

i am using pnpm (verify with this with rush.json) so start setting up different projects

mkdir apps
yarn create react-app my-app --template typescript
Enter fullscreen mode Exit fullscreen mode

and add this project to rush by adding to the rush.json under projects

{
      "packageName": "my-app",
      "projectFolder": "apps/my-app"
}
Enter fullscreen mode Exit fullscreen mode

then under the project root run this commands

rush update
Enter fullscreen mode Exit fullscreen mode

this will link all the projects to the rush and install all the dependencies

now let's make the sharable code to this project

mkdir utils
cd utils
npx tsdx create lib
Enter fullscreen mode Exit fullscreen mode

this will prompt you to choose

  1. basic
  2. react
  3. react-with-storybook

let's choose basic this will configure the basic boilerplate.

and add this project to the rush.json

{
      "packageName": "@utils/lib",
      "projectFolder": "utils/lib"
}
Enter fullscreen mode Exit fullscreen mode

now try to run this command one more time

rush update --purge
Enter fullscreen mode Exit fullscreen mode

Note: if there is an permission issue try to run this command with sudo

Now it's the time link the package to our own react app

rush add -p @utils/lib
Enter fullscreen mode Exit fullscreen mode

now you can import the function

import { numberWithCurrencyAndComma } from "@utils/lib";
Enter fullscreen mode Exit fullscreen mode

This how we manage project with single one manager
let me know down in the comments about your thoughts 😄

Here is link for the sample repo https://github.com/palashgdev/rushjs

💖 💪 🙅 🚩
palashgdev
Palash Gupta

Posted on July 17, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Code Challenge: Calling Web Developers
manage the large code
javascript manage the large code

July 17, 2021