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….


This content originally appeared on DEV Community and was authored by Palash Gupta

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

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

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


This content originally appeared on DEV Community and was authored by Palash Gupta


Print Share Comment Cite Upload Translate Updates
APA

Palash Gupta | Sciencx (2021-07-17T17:45:47+00:00) manage the large code. Retrieved from https://www.scien.cx/2021/07/17/manage-the-large-code/

MLA
" » manage the large code." Palash Gupta | Sciencx - Saturday July 17, 2021, https://www.scien.cx/2021/07/17/manage-the-large-code/
HARVARD
Palash Gupta | Sciencx Saturday July 17, 2021 » manage the large code., viewed ,<https://www.scien.cx/2021/07/17/manage-the-large-code/>
VANCOUVER
Palash Gupta | Sciencx - » manage the large code. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/17/manage-the-large-code/
CHICAGO
" » manage the large code." Palash Gupta | Sciencx - Accessed . https://www.scien.cx/2021/07/17/manage-the-large-code/
IEEE
" » manage the large code." Palash Gupta | Sciencx [Online]. Available: https://www.scien.cx/2021/07/17/manage-the-large-code/. [Accessed: ]
rf:citation
» manage the large code | Palash Gupta | Sciencx | https://www.scien.cx/2021/07/17/manage-the-large-code/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.