Nx Monorepo added to PNPM workspace (React App with UI Library) #06
Channel: Code with tkssharma
Date: 2023-03-15

This video is a part of "Nx Monorepo for Microservices"
Playlist on Monorepo Nx and Nest JS Microservices 
https://www.youtube.com/watch?v=8IWV6I1mK6U&list=PLIGDNOJWiL1-zscX224pibRBb4RChTpgM

Playlist All about Microservices 
 https://www.youtube.com/watch?v=_fK8g2dhzvU&list=PLIGDNOJWiL19WHIxJ0Q4aP4X3oljPha5n&ab_channel=Codewithtkssharma

Nx is a smart, fast and extensible build system with first-class monorepo support and powerful integrations.

In this Video we will start with pnpm workspace which will have 

-- react app 
-- ui library 

we will see how we can add dependency using pnpm  command and then we will add Nx capability to this monorepo to automate scripts and many other things which Nx provides

00:00 Agena building pnpm workspace and add Nx
02:00 initialize pnpm workspace 
02:40  adding workspace.yml file for pnpm
04:20 adding create react app as package 
06:50 adding common ui library 
07:30 adding react components (reusable) 
09:40 building common-ui library
12:20 adding common ui lib to react app
16:00 adding power of Nx to pnpm workspace
17:30 adding nx json for caching and build scripts 
20:00 using nx command and showing dependency
21:00 using Nx console to play with Nx commands  
 

New Package-Based Repo
Create a monorepo with Yarn, NPM or PNPM. Nx makes it fast, but lets you run things your way.
New Integrated Repo
Get a pre-configured setup. Nx configures your favorite frameworks and lets you focus on shipping features.
Create a Standalone React app
A modern React setup with built-in support for Vite, ESLint, Cypress and more. Think CRA but modern, always up-to-date and scalable.

Nx is a Typescript based monorepo tool, primarily supporting Node.js based frontend, backend apps, and libraries. The topics we are covering today:

Why monorepo?
what is monorepo and how it helps 
Nx: A monorepo tool
looking into all options npx create-nx-workspace
Create Nx workspace for a project
Build, lint, test, serve and run
using nx console using vscode
Single package.json policy
Affected apps by dep-graph and git diff
Computation caching and Nx Cloud
Building nx monorepo standalone app
Building nx monorepo packages based app
Building nx monorepo integrated app
Understanding workspaces like yarn, npm, pnpm 
difference between all these different approaches 


🐦 Twitter: https://twitter.com/tkssharma
🐦 Github: https://github.com/tkssharma
🐦 Website: https://tkssharma.com
🐦 Blogs: https://blog.tkssharma.com

I’m Tarun, I am Publisher, Trainer Developer, working on Enterprise and open source Technologies JavaScript frameworks (React Angular, sveltekit, nextjs), I work with client-side and server-side javascript programming which includes node js or any other frameworks Currently working with JavaScript framework React & Node js 🚀 with Graphql 🎉 developer publications.

I am a passionate Javascript developer writing end-to-end applications using javascript using React, Angular 🅰️, and Vue JS with Node JS, I publish video tutorials and write about everything I know. I aim to create a beautiful corner of the web free of ads, sponsored posts,