Migrate build tooling to PNPM and NX #246

pavinduLakshan · 2024-08-20T08:42:11Z

Is your feature request related to a problem? Please describe.

The current monorepo build tooling relies on Yarn, which, while effective, does not offer the same performance optimizations, workspace management, and task orchestration provided by newer tools like PNPM and NX. Additionally, the current release process lacks automation for managing versioning and changelogs, which can be improved with Changesets. As the project scales, upgrading the tooling will enhance the development workflow and ensure smoother releases.

Describe the solution you would prefer

We propose migrating the build tooling to use PNPM for efficient package management, NX for optimized build performance and task orchestration, and Changesets for automated versioning and changelog generation. The migration will include:

Replacing Yarn with PNPM to leverage faster installs and workspace management.
Integrating NX for improved build processes and incremental builds across the monorepo.
Incorporating Changesets to automate version control and changelog updates.
Updating scripts and CI configurations to support the new tooling.
Verifying compatibility and functionality across all packages.

Additional context

This migration will involve updating developer documentation and ensuring all workflows operate seamlessly with the new tools. The transition is aimed at improving developer experience, build efficiency, and release management.

abhiram6121 · 2024-10-18T04:39:56Z

@NipuniBhagya, I would like to work on this issue. Could you please assign it to me?

pavinduLakshan · 2024-10-18T05:08:43Z

@NipuniBhagya, I would like to work on this issue. Could you please assign it to me?

Hi @abhiram6121 , just assigned the issue to you. Please feel free to get back if there's anything to clarify.

abhiram6121 · 2024-10-18T08:29:50Z

@NipuniBhagya, I would like to work on this issue. Could you please assign it to me?

Hi @abhiram6121 , just assigned the issue to you. Please feel free to get back if there's anything to clarify.

Do we need Lerna after migrating to PNPM?

pavinduLakshan · 2024-10-18T10:16:53Z

@NipuniBhagya, I would like to work on this issue. Could you please assign it to me?

Hi @abhiram6121 , just assigned the issue to you. Please feel free to get back if there's anything to clarify.

Do we need Lerna after migrating to PNPM?

No, we don't.

pavinduLakshan · 2024-10-18T10:41:38Z

@abhiram6121 I updated the issue description to add integrating Changesets[1] to the task list. Please let me know if there are any concerns. Cheers!

[1] https://github.com/changesets/changesets

abhiram6121 · 2024-10-18T13:55:35Z

@pavinduLakshan

> cd apps/client && pnpm run build
> [email protected] build /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express/apps/client
> CI=false && react-scripts build

Creating an optimized production build...
Failed to compile.

[eslint] Invalid Options:
- Unknown options: extensions, resolvePluginsRelativeTo
- 'extensions' has been removed.
- 'resolvePluginsRelativeTo' has been removed.

 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

I am facing an error related to ES lint while building samples/asgardeo-choreo-react-express/apps/client. Should I disable ES lint plugin for this repo?

pavinduLakshan · 2024-10-18T14:00:18Z

@pavinduLakshan

> cd apps/client && pnpm run build
> [email protected] build /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express/apps/client
> CI=false && react-scripts build

Creating an optimized production build...
Failed to compile.

[eslint] Invalid Options:
- Unknown options: extensions, resolvePluginsRelativeTo
- 'extensions' has been removed.
- 'resolvePluginsRelativeTo' has been removed.

 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

I am facing an error related to ES lint while building samples/asgardeo-choreo-react-express/apps/client. Should I disable ES lint plugin for this repo?

Did you attempt to update the eslint version? latest eslint version (v9) has some breaking changes that can cause existing eslint configs to break.

Better if you can open a draft PR with your current changes so far, so that I can take a look and help.

abhiram6121 · 2024-10-18T16:14:05Z

@pavinduLakshan
> cd apps/client && pnpm run build
> [email protected] build /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express/apps/client
> CI=false && react-scripts build

Creating an optimized production build...
Failed to compile.

[eslint] Invalid Options:
- Unknown options: extensions, resolvePluginsRelativeTo
- 'extensions' has been removed.
- 'resolvePluginsRelativeTo' has been removed.

 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
I am facing an error related to ES lint while building samples/asgardeo-choreo-react-express/apps/client. Should I disable ES lint plugin for this repo?
Did you attempt to update the eslint version? latest eslint version (v9) has some breaking changes that can cause existing eslint configs to break.

Better if you can open a draft PR with your current changes so far, so that I can take a look and help.

I tried downgrading the eslint version, but still getting the same error.

PR : #255

pavinduLakshan · 2024-10-19T02:36:59Z

@abhiram6121 I tried with your changes in the draft PR and sample app build worked for me.

Try the following steps and see if it fixes the issue.

Delete all node_modules, dist, build folders in the repo.
Run pnpm install from the project root (from asgardeo-auth-react-sdk directory).
Switch to samples/asgardeo-choreo-react-express and run pnpm build

abhiram6121 · 2024-10-19T12:10:47Z

@abhiram6121 I tried with your changes in the draft PR and sample app build worked for me.

Try the following steps and see if it fixes the issue.

Delete all node_modules, dist, build folders in the repo.

Run pnpm install from the project root (from asgardeo-auth-react-sdk directory).

Switch to samples/asgardeo-choreo-react-express and run pnpm build

I am still getting the same error. I even tried recloning the repo from here. I am using Volta to install PNPM and node. Does that cause any issues?

abhiram6121 · 2024-10-19T12:15:25Z

❯ git clone [email protected]:abhiram6121/asgardeo-auth-react-sdk.git
Cloning into 'asgardeo-auth-react-sdk'...
remote: Enumerating objects: 8374, done.
remote: Counting objects: 100% (1044/1044), done.
remote: Compressing objects: 100% (178/178), done.
remote: Total 8374 (delta 898), reused 957 (delta 865), pack-reused 7330 (from 1)
Receiving objects: 100% (8374/8374), 4.49 MiB | 1.13 MiB/s, done.
Resolving deltas: 100% (5892/5892), done.
❯ cd asgardeo-auth-react-sdk
❯ git checkout "pnpm"
branch 'pnpm' set up to track 'origin/pnpm'.
Switched to a new branch 'pnpm'
❯ pnpm install
Scope: all 5 workspace projects
Lockfile is up to date, resolution step is skipped
Packages: +1581
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1581, reused 1569, downloaded 0, added 1581, done

devDependencies:
+ @typescript-eslint/eslint-plugin 5.62.0
+ @typescript-eslint/parser 5.62.0
+ eslint 8.57.1
+ eslint-plugin-import 2.31.0
+ rimraf 3.0.2
+ typescript 4.9.5

Done in 2.8s
❯ cd samples/asgardeo-choreo-react-express
❯ pnpm build

> @asgardeo/[email protected] prebuild /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> curr_dir=$(pwd) && pnpm run install:client && cd $curr_dir && pnpm run install:server


> @asgardeo/[email protected] install:client /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> cd apps/client && CI=false pnpm install

Scope: all 5 workspace projects
Done in 1.4s

> @asgardeo/[email protected] install:server /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> cd apps/server && pnpm install

Scope: all 5 workspace projects
Done in 1.4s

> @asgardeo/[email protected] build /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> curr_dir=$(pwd) && pnpm run build:client && cd $curr_dir && pnpm run build:server


> @asgardeo/[email protected] build:client /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> cd apps/client && pnpm run build


> [email protected] build /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express/apps/client
> CI=false && react-scripts build

Creating an optimized production build...
Failed to compile.

[eslint] Invalid Options:
- Unknown options: extensions, resolvePluginsRelativeTo
- 'extensions' has been removed.
- 'resolvePluginsRelativeTo' has been removed.


 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
❯

abhiram6121 · 2024-10-20T16:07:42Z

@abhiram6121 I tried with your changes in the draft PR and sample app build worked for me.
Try the following steps and see if it fixes the issue.

Delete all node_modules, dist, build folders in the repo.

Run pnpm install from the project root (from asgardeo-auth-react-sdk directory).

Switch to samples/asgardeo-choreo-react-express and run pnpm build

I am still getting the same error. I even tried recloning the repo from here. I am using Volta to install PNPM and node. Does that cause any issues?

❯ pnpm build

> @asgardeo/[email protected] prebuild /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> curr_dir=$(pwd) && pnpm run install:client && cd $curr_dir && pnpm run install:server


> @asgardeo/[email protected] install:client /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> cd apps/client && CI=false pnpm install

Scope: all 5 workspace projects
Done in 2.5s

> @asgardeo/[email protected] install:server /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> cd apps/server && pnpm install

Scope: all 5 workspace projects
Done in 2.6s

> @asgardeo/[email protected] build /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> curr_dir=$(pwd) && pnpm run build:client && cd $curr_dir && pnpm run build:server


> @asgardeo/[email protected] build:client /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> cd apps/client && pnpm run build


> [email protected] build /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express/apps/client
> CI=false && react-scripts build

Creating an optimized production build...
Failed to compile.

TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
    24 |   render(<App />);
    25 |   const linkElement = screen.getByText(/learn react/i);
  > 26 |   expect(linkElement).toBeInTheDocument();
       |                       ^^^^^^^^^^^^^^^^^
    27 | });
    28 |


 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

Resolved eslint error, but getting a new error related to jest.

abhiram6121 · 2024-10-21T13:44:31Z

@abhiram6121 I tried with your changes in the draft PR and sample app build worked for me.
Try the following steps and see if it fixes the issue.

Delete all node_modules, dist, build folders in the repo.

Run pnpm install from the project root (from asgardeo-auth-react-sdk directory).

Switch to samples/asgardeo-choreo-react-express and run pnpm build

I am still getting the same error. I even tried recloning the repo from here. I am using Volta to install PNPM and node. Does that cause any issues?

❯ pnpm build

> @asgardeo/[email protected] prebuild /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> curr_dir=$(pwd) && pnpm run install:client && cd $curr_dir && pnpm run install:server


> @asgardeo/[email protected] install:client /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> cd apps/client && CI=false pnpm install

Scope: all 5 workspace projects
Done in 2.5s

> @asgardeo/[email protected] install:server /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> cd apps/server && pnpm install

Scope: all 5 workspace projects
Done in 2.6s

> @asgardeo/[email protected] build /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> curr_dir=$(pwd) && pnpm run build:client && cd $curr_dir && pnpm run build:server


> @asgardeo/[email protected] build:client /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express
> cd apps/client && pnpm run build


> [email protected] build /home/armdebug/asgardeo-auth-react-sdk/samples/asgardeo-choreo-react-express/apps/client
> CI=false && react-scripts build

Creating an optimized production build...
Failed to compile.

TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
    24 |   render(<App />);
    25 |   const linkElement = screen.getByText(/learn react/i);
  > 26 |   expect(linkElement).toBeInTheDocument();
       |                       ^^^^^^^^^^^^^^^^^
    27 | });
    28 |


 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

Resolved eslint error, but getting a new error related to jest.

#Resolved https://stackoverflow.com/a/75245402/23000795

NipuniBhagya added Hacktoberfest good first issue Good for newcomers labels Oct 4, 2024

brionmario mentioned this issue Oct 4, 2024

Integrate the WSO2 ESLint & Prettier plugins #251

Open

pavinduLakshan assigned abhiram6121 Oct 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate build tooling to PNPM and NX #246

Migrate build tooling to PNPM and NX #246

pavinduLakshan commented Aug 20, 2024 •

edited

Loading

abhiram6121 commented Oct 18, 2024

pavinduLakshan commented Oct 18, 2024

abhiram6121 commented Oct 18, 2024

pavinduLakshan commented Oct 18, 2024

pavinduLakshan commented Oct 18, 2024

abhiram6121 commented Oct 18, 2024 •

edited

Loading

pavinduLakshan commented Oct 18, 2024

abhiram6121 commented Oct 18, 2024

pavinduLakshan commented Oct 19, 2024

abhiram6121 commented Oct 19, 2024 •

edited

Loading

abhiram6121 commented Oct 19, 2024

abhiram6121 commented Oct 20, 2024

abhiram6121 commented Oct 21, 2024

Migrate build tooling to PNPM and NX #246

Migrate build tooling to PNPM and NX #246

Comments

pavinduLakshan commented Aug 20, 2024 • edited Loading

Is your feature request related to a problem? Please describe.

Describe the solution you would prefer

Additional context

abhiram6121 commented Oct 18, 2024

pavinduLakshan commented Oct 18, 2024

abhiram6121 commented Oct 18, 2024

pavinduLakshan commented Oct 18, 2024

pavinduLakshan commented Oct 18, 2024

abhiram6121 commented Oct 18, 2024 • edited Loading

pavinduLakshan commented Oct 18, 2024

abhiram6121 commented Oct 18, 2024

pavinduLakshan commented Oct 19, 2024

abhiram6121 commented Oct 19, 2024 • edited Loading

abhiram6121 commented Oct 19, 2024

abhiram6121 commented Oct 20, 2024

abhiram6121 commented Oct 21, 2024

pavinduLakshan commented Aug 20, 2024 •

edited

Loading

abhiram6121 commented Oct 18, 2024 •

edited

Loading

abhiram6121 commented Oct 19, 2024 •

edited

Loading