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

In this video, we take a look at what an Nx workspace is all about.
Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076
0:00 Creating a workspace
2:47 What is a monorepo?
5:31 Commands
8:27 Managing dependencies
#nx #monorepo #nrwl
- Check out my Ionic books: www.joshmorony.com/books/?utm...
- Beginner tutorials: www.joshmorony.com/
- Advanced tutorials: eliteionic.com
- Follow me on Twitter: / joshuamorony

Пікірлер: 50

  • @filipkalicanin289
    @filipkalicanin289 Жыл бұрын

    Migrating existing apps into the workspace and refactoring code into libraries would be great. Great video btw! Thanks!

  • @harryknorrer7557
    @harryknorrer75573 жыл бұрын

    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
    @torbenbang42593 жыл бұрын

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

  • @vamsikrishnams3186
    @vamsikrishnams3186 Жыл бұрын

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

  • @incrediblepatri
    @incrediblepatri2 жыл бұрын

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

  • @orenmizr
    @orenmizr2 жыл бұрын

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

  • @michaelsspinnovations3818
    @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?

  • @bama2619
    @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.

  • @Tjommel
    @Tjommel2 жыл бұрын

    That helped alot. Thank you for that video!

  • @David-iq1kd
    @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.

  • @kapilchhabra3028
    @kapilchhabra30283 жыл бұрын

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

  • @yenduong9042
    @yenduong90422 жыл бұрын

    so touching for an excellent video

  • @AlanMontgomery
    @AlanMontgomery3 жыл бұрын

    Awesome Josh 👋🙌🎉

  • @additionaddict5524
    @additionaddict5524 Жыл бұрын

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

  • @FuzailShaikh
    @FuzailShaikh2 жыл бұрын

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

  • @mugatu2017
    @mugatu2017 Жыл бұрын

    excellent video

  • @shane-porter
    @shane-porter Жыл бұрын

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

  • @tomatte99
    @tomatte99 Жыл бұрын

    thanks for the video

  • @raedmokni
    @raedmokni2 жыл бұрын

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

  • @psangawar7130
    @psangawar71302 жыл бұрын

    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?

  • @SunnyVakil
    @SunnyVakil3 жыл бұрын

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

  • @valikonen
    @valikonen2 жыл бұрын

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

  • @marodonthemorone
    @marodonthemorone3 жыл бұрын

    very interesting

  • @AxisMundiOnline
    @AxisMundiOnline5 ай бұрын

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

  • @Maurizior
    @Maurizior Жыл бұрын

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

  • @KartikHedau09
    @KartikHedau092 жыл бұрын

    Need understanding of deployments of multiple apps using NX

  • @okayatbikes1909
    @okayatbikes1909 Жыл бұрын

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

  • @rampency101
    @rampency1013 жыл бұрын

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

  • @JoshuaMorony

    @JoshuaMorony

    3 жыл бұрын

    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").

  • @tassisto
    @tassisto3 жыл бұрын

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

  • @haseebiqbal4140
    @haseebiqbal4140 Жыл бұрын

    what about ts, if we want react in tS

  • @frakk2
    @frakk2 Жыл бұрын

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

  • @GhalibAnsari19945
    @GhalibAnsari199452 жыл бұрын

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

  • @channelmtv256
    @channelmtv2562 жыл бұрын

    Build Commands and migration of existing apps to Nx

  • @adithyakiransekar
    @adithyakiransekar2 жыл бұрын

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

  • @JoshuaMorony

    @JoshuaMorony

    2 жыл бұрын

    Hey - you might find one of the other videos I released on this helpful: kzread.info/dash/bejne/Y5l8zsOPn8iqlrg.html - 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.

  • @adithyakiransekar

    @adithyakiransekar

    2 жыл бұрын

    @@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

    @JoshuaMorony

    2 жыл бұрын

    @@adithyakiransekar 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.

  • @adithyakiransekar

    @adithyakiransekar

    2 жыл бұрын

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

  • @adithyakiransekar

    @adithyakiransekar

    2 жыл бұрын

    @@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?

  • @boot-strapper
    @boot-strapper2 жыл бұрын

    "Kaysheeng"

  • @fatal510
    @fatal5102 жыл бұрын

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

  • @absconditus8660
    @absconditus86602 жыл бұрын

    Caysh

  • @leenj099
    @leenj09914 күн бұрын

    NX vs Teamcenter

  • @tntg5
    @tntg5 Жыл бұрын

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

  • @JoshuaMorony

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

  • @UyenTran-kp4wi
    @UyenTran-kp4wi2 жыл бұрын

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

  • @RakzinRoman
    @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