An Introduction to Nx Workspaces - Understanding Nx & Monorepos #1

[@harryknorrer7557]

Hi Josh, thanks for the introduction. At the moment I am trying to migrate several Ionic / Cordova projects to a new MonoRepo. For this reason, this topic would be interesting for me. Especially the various options such as creating a new monorepo and integrating the other projects including Git history. Or convert an existing project into a monorepo.

[@torbenbang4259]

Nice intro, thank you. Migrating an existing Angular/Ionic application to Nx, would certainly be very interesting.

[@bama2619]

Thank you, I have been learning react and I have created many applications. I questioned myself how I could keep every app in one git repo than in many. This is how I came to this video. Migrating many react apps to one git repo and one working repo could be a good idea if not realized already. Keep it up, ex googlers.

[@shane-porter]

Nice video. This really is the icing on the cache for large projects. Sorry - cake. Cake.

[@incrediblepatri]

Please continue videos particularly with how scopes, types and classifiers,CI/CD (all features :) ) work

[@vamsikrishnams3186]

Really impressed with your way of teaching. Please ahead with more videos

[@David-iq1kd]

Would be really interested in seeing how NX Workspaces can be used to handle one application - but the different builds for an Android, iOS, Desktop, and Web app might look. Would be especially interested to see another video about using xPlat with Nativescript or Capacitor in NX.

[@michaelsspinnovations3818]

Nice job, straight to the point. Covered so much in 11 minutes. We are currently migrating an AngularJS app into Angular 14, with the mandate of being 100% extensible. The micro-frontend architechture seems to be the best direction for this, however Nx seems to check more of the boxes, but the monorepo could be an obstacle. Giving access to some of the libs would be okay, but we don't what to give 3rd party devs access to core libs and app. Would like to see how you would approach extensibility with the custom plugins?

[@SunnyVakil]

Creating Libraries and using it in app, would be great idea.

[@AxisMundiOnline]

Really great video. Is there an updated one, as the steps described seem to no longer produce the same result... for example when you first open the project in vscode, there is no lib folder, there is no angular.json etc. etc..

[@orenmizr]

Good one josh! very clear... good talking speed... a lot of content :)

[@yenduong9042]

so touching for an excellent video

[@frakk2]

8:36 why usefull having one package.json for all projects ? why its not important which to which project belongs to ?

[@additionaddict5524]

I’ve gone all in on this approach. I’m surprised I’ve not come across nx before

[@kartik-unfolded]

Need understanding of deployments of multiple apps using NX

[@valikonen]

You can create package for npm/nexus etc and solve problem with share code or to create angular workspace and use module federation

[@Tjommel]

That helped alot. Thank you for that video!

[@Maurizior]

hello, do you know if it possibole to execute this command in dry-run mode? npx nx run-many --target=docker --action=link

[@mugatu2017]

excellent video

[@AlanMontgomery]

Awesome Josh 👋🙌🎉

[@FuzailShaikh]

Thanks mate, I got clarity why I shouldn’t be using monorepo for my use case

[@adi_sekar]

Hi Josh, how does NX handle release cycles for individual apps and can separate CI/CD pipelines be attached?

[@JoshuaMorony]

Hey - you might find one of the other videos I released on this helpful: kzbin.info/www/bejne/Z5arnZSMpMp3nLc - in short you can use the "nx deploy" command for any app in your repo, and if necessary you can do whatever kind of customisation you need to that command for your deploy process.

[@adi_sekar]

@@JoshuaMorony Thanks josh, that helped! Do you have a video on advantages of Nx Monorepo vs using shared code via npm packages or local repos using npm link? Thanks again!

[@JoshuaMorony]

@@adi_sekar I don't have a video, but this book is a great overview of the philosophy/benefits of Nx if you want to check it out: go.nrwl.io/angular-enterprise-monorepo-patterns-new-book - just from my own point of view though I would say, 1: You don't have to worry about publishing to npm or linking, it's all just right there in the repo, 2: For the more advanced use cases, Nx has ways to enforce certain rules around what can use what, so it gives you more control over governing how your libraries can be used. That is some stuff specific to differences between publishing to npm/linking, but then of course you also have the generic advantages of monorepos/Nx in general as well.

[@adi_sekar]

@@JoshuaMorony thanks Josh, appreciate it. You earned a sub!

[@adi_sekar]

@@JoshuaMorony Hi Josh, does Monorepo mean all the git history for individual apps be merged together into monorepo main branch? If so, does this trigger CI CD for all apps! Maybe use git sub modules?

[@raedmokni]

hello joshua , any ideas for integrating an existing react app in the NX workspace contains angular app ?

[@rampency101]

are you on zsh? what plugin allows you to list the current working directory like that?

[@JoshuaMorony]

You mean the working directory down the bottom? I usually use iTerm/OhMyZsh but for Hyper (which I'm using in the video) I have the following plugins: "hyper-relaxed", "hyper-statusline", "hypercwd", "hyperterm-tabs", "hyper-search", "hyper-quit", "hyperterm-dibdabs" (I assume the plugin for the working directory would be "hypercwd").

[@haseebiqbal4140]

what about ts, if we want react in tS

[@kapilchhabra3028]

Thanks @Joshua, well explained. could you please put more light into Nx-style monorepo workspace

[@okayatbikes1909]

I have no commands available in NX console (VS code). What might I be doing incorrectly?

[@tomatte99]

thanks for the video

[@psangawar7130]

I see out of box support for Angular and React. Wondering when and how for Vue3, especially with say NUXT + VITE...any video about that would be great for at least myself! Also, can you please show if I can create commonly used .ts files as part of lib with some folder structure? A bit confused if liib is for a specific component like angular or react or it can host a collection of various typescript interfaces?

[@tassisto]

Is it normal that the Initial Build/Run still takes too long?

[@fatal510]

my man really created an angular project in 2021...

[@channelmtv256]

Build Commands and migration of existing apps to Nx

[@GhalibAnsari19945]

Please make microservices app with Frontend, docker and services taking to each other

[@marodonthemorone]

very interesting

[@boot-strapper]

"Kaysheeng"

[@leenj099]

NX vs Teamcenter

[@UyenTran-kp4wi]

the video image is too poor, you need to fix it more

[@absconditus8660]

Caysh

[@tntg5]

My head aches when I think about different angular apps living under different angular version from v4 to v13

[@JoshuaMorony]

I think the benefits of having all your orgs apps in a single Nx workspace is a worthwhile goal, but it wouldn't be an easy thing to pull off (Google does it at massive scale, but they are also Google). At a more casual level, I think most people (myself included) use a "workspace per project" sort of approach, where most of the time you just have the frontend and the backend living in the same workspace. And to be clear, with the (recommended) Nx workspace approach, all Angular apps in the repo would always be on the same version because they share the same dependencies. If you update for one you update for all of them.

[@RakzinRoman]

Can you help me - what can I change? npx create-nx-workspace@latest cd [MyProjectName] nx g @nrwl/angular:host ==remotes=admin,customer,supplier,base nx run host -- devRemotes=base,admin,customer,supplier Console Browser Error SyntaxError: Cannot use 'import.meta' outside a module