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',
  })
}

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

mkdir rush
cd rush
rush init

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

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

{
      "packageName": "my-app",
      "projectFolder": "apps/my-app"
}

then under the project root run this commands

rush update

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

this will prompt you to choose

basic

react

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"
}

now try to run this command one more time

rush update --purge

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

now you can import the function

import { numberWithCurrencyAndComma } from "@utils/lib";

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

Categories:

Javascript React

Tags:

Javascript React Node Git

A bug that made me a better developer.

How to build powerful tables in React using the React Table package

Implementing tables using reactjs

Next.js Authentication with Netlify Identity

NodeJS vs Python

Best Website Speed and Performance Testing Tools Free

A first look at Qwik - the HTML first framework

Six Angular Best Practices You need to apply to make your App perform at its best!

manage the large code

Categories:

Tags:

Related Posts