Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 17, 2021 05:45 pm GMT

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 rushcd rushrush 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 appsyarn 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 utilscd utilsnpx 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


Original Link: https://dev.to/palashgdev/manage-the-large-code-4705

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To