Nx Quickstart - How to Scale a JavaScript Project

[@MikeBrits14]

I went to an interview at a huge company yesterday for an Engineering lead role. After watching this video, I decided to bring up the topic of monorepos, and to see if they used them and how. They explained what they used, and the issues they faced. I told them about Nx and how it visualised dependencies, and they were really interested. That might have just landed me the job. I would not have known about it, or cared to click on this video if your content wasn't so pointed, clean and informative. Thanks for being great and for keeping the community up to date. You rock man.

[@HuyNguyen-kd5vz]

just curious, did you get the job?

[@MikeBrits14]

@@HuyNguyen-kd5vz I did actually! I now work as a team lead for them. Thanks for asking!

[@Fireship]

Wow, awesome! Congrats mike!

[@Oswee]

Did you advised a tool for a huge company just by watching 10min video and they immediately hired you as tech lead?

[@kibukamusoke]

@@Oswee from years of experience, 10 minutes will connect 5 years of dots if you know what you are listening to. That 10 minutes for Mike might be equivalent to 10 years for someone else. because he already knows what he is doing, Jeff is just helping him connect the dots. Jeff's content is not really for beginners, I hope people who come on here understand that.

[@dallastjames]

Awesome! I love NX. I've been using it for over a year now with Angular (recently transitioned to using nestjs as well) and it has been one of the greatest improvements to code maintainability and stability. Sharing code like interfaces and enums saves so much time and the ability to only test and build what has actually changed makes CI/CD quick and also helps know when you are making changes to an application that you may not have ever otherwise been aware of.

[@RajSharma-tf9lv]

Man respect for you. I've watched many videos of you and I've to say that "Guys like you really pushes everyone on the platform to bring out better content and setting bar high for knowledge sharing" , which benefits us so thank you I'll take the subscription as soon as I get my first pay from my web development work.

[@maksymdudyk1718]

piece of docs was put to voice. the dullest video ever.

[@troythompson2]

Develop like Google... NX looks like a winner. Can't wait to try!

[@alexisdvt]

OMG!! This is exactly what our team needs , thanks for sharing!!

[@MrPufek93]

Just started as an lead engineer at a new company. We will rewrite our product and I've been looking for a tool to do so. Just found about NX and so far looks like a way to go! Thanks

[@금동대향로-g5y]

Do you think that yarn berry workspace and Nx will be a good pair to manage monorepo?

[@MrPufek93]

@@금동대향로-g5y Never worked with yarn workspace but looking at Yarn Plug and Play feature that never ever worked correctly for me profesionally, I would say I woudln't do that personally. What we ended up doing is NX core repo at base, then add Nx plugins for nest and react- ( with CRA ), and for orchestreiting rest of the stuff we need ( like docker-compose etc ) we use simple Makefile.

[@shubhamjaiswal3029]

Your Video Production Quality Is Best In The Industry!! Great Content ,Kudos Bro!! 🤟👍⚡😎

[@fabrice9848]

I'm still a beginner trying to hang on and bearly scratching the surface of Web Development, but I can tell your content is gonna help a lot in a few months from now. Thank you for sharing this kind of valuable information.

[@puneetsharma1437]

I dont think nx has positive when your team is 20+ if not it just seem like overhead

[@Jared-Christensen]

We use NX at work, it has been great. Makes sharing code between teams so simple.

[@lucasrgsilva]

My brain almost blew up watching it

[@Fireship]

Mission accomplished 💥

[@LiorCHAMLA]

Bro, your video editing is incredible, everything is so beautiful ! keep going !

[@mateja176]

Lerna and yarn workspaces are awesome too but the UI, especially the dependency graph, of Nx is outstanding 🦄🚀

[@Fireship]

Totally, the VS code plugin is amazing. Not to mention all the code generating schematics.

[@maazm4722]

@@Fireship unfortunately there is no support for jetbrains IDE ...

[@chrisanderson687]

I've been playing with Nx for a Nest/Angular app the last few days and it is so awesome! You guys have to try it out.

[@CarlosLopesAmaral]

Love you bro. You've sold me the monorepo concept by using this tool and by explaining. I've seen the monorepo concept being wrongly used and in my case, it made the development process super slow and tedious.

[@nachobroski]

This is really interesting! I would want to see how you could create a fully automated CI/CD pipeline using monorepo methodologies like NX. Doesn't seem like many platforms support this very well at the moment.

[@bovfbovf]

4 years later its shit

[@farantaimoorbutt5028]

​@@bovfbovfhow can you explain i am learning it right now

[@milad8436]

The best CS channel on the KZbin

[@dejson420]

OMG i went to your channel to look at how angular looks because I thought about using it in my new project and I found this awesome tool thanks.

[@ProgramWithErik]

Great tutorial, my team just moved one of our two Angular apps to nx. I was a little skeptical at first ( I wasn’t sure the added complexity was worth the time) , but now I can see that it’s not that bad, and sharing interfaces will be helpful. I’ll have to get the other ported over soon. FYI, was this sponsored by Nrwl?

[@Fireship]

Nice! Not sponsored, but I was able to collaborate with them directly and get feedback before releasing it.

[@matthewmullin2626]

How was the transition? Was there quite a bit you had to change? Think I'm in a similar boat to you and also debating wether its worth using from the start, or only worth adding once I see a need for it?

[@FilledStacks]

This is so cool. Very informative. Thanks for sharing this I had no idea about this tool.

[@uziboozy4540]

Nx is the best tool I've ever used in years. Top notch Nest, Cypress and Jest support.

[@ErmandDurro]

Really loved the video. I had no idea that NX existed. Thanks a lot 😃

[@Middollo]

Doing research about monorepos and this is a superb video, thanks so much!

[@eddiejaoude]

Really nice 👍. I use mono repo as well as multi repo, but I wasn’t aware of this tool. Thanks for sharing 🤓

[@lloveComedy]

To all new viewers. This video will just end up confusing you if you were to follow it step-by-step, so I wouldn't recommend wasting your time doing that. Visit the dev site in the description to learn the latest version of NX instead.

[@boradmay]

Geez man, the animation and design just get better.

[@sandunmadushan1732]

This is awesome. thank you so much for creating this video.

[@RagoDN2]

Really hard to pick between React, Vue, and Angular when they all have amazing tools. Nx will likely put me back on Angular for my next app.

[@RagoDN2]

@@user-if1de8pt2j Well, when I get a job, and if they have a preference, then I'll use what they want. Until then, all my projects are self-started and self-funded :P

[@firaskudsy]

Thanks for the most amazing contents 🙏

[@Fireship]

You you Firas 👍

[@aaronaaronaaron5922]

You are really incresing the level of the web! Thnaks man 🔥

[@Icefy_2024]

I Love It When The Notification Comes, "Someone Has Subscribed Your Channel" 🙂 It Alw‌ays Makes‌ My Day!...

[@harpymaslow]

Thanks Jeff! Really interesting. I'm not sure what I would gain by using it though. My current project has multi-apps Angular (/projects folder) + Firebase (functions/ folder) + Types and models (shared/ folder). I'm sharing code between the Firebase cloud functions (Express) and the Angular apps without any issue. Why should I use NX ? Is it only useful if I want to add some React, Vue, Svelte apps too ?

[@harpymaslow]

So should I try NX in our opinion ? In a near future I should have like 6 angular apps in this repo. Will each app slow the build a little more ? Also I'm using Cypress already and I love Jest. Maybe NX would be the way to go. What do you think ?

[@Jared-Christensen]

​@@harpymaslow With your current setup if you made a change in one of your shared types you would have to remember to build both of your apps. This will become more complicated as you add more apps and more shared libs. NX will track all of the changes for you and only build the apps that need to pick up the changes from the shared libs. NX becomes very handy when you start to automate your deployment. For example, we have a build pipeline that watches for changes in our mono repo. When we make a change in a shared lib it will figure out what apps use that lib and only build, test and deploy the apps that are affected by the change in the lib. This will speed up your deployment as you don't have to build everything every time you make a change.

[@Gr4ph1xZ]

Is it not considered best practice to maintain a library in a distinct repository with its own versioning system? This approach enables the importation of the library into other projects, ensuring the selection of the appropriate version.

[@naveedalirehmani4135]

Very well explained as always, thank you!

[@roland0012]

Pretty cool, but I would love to see how we can integrate Ionic and/or NativeScript as well to the stack! Great video anyways! :)

[@Fireship]

That is very possible, I've seen people use both NativeScript and Ionic with Nx. For example nstudio.io/xplat

[@MaxPicAxe]

Very interesting. By the looks of things this is specific to typescript/javascript, and seems to depend heavily on node.js + its own building tools, so I'm guessing there's not much flexibility. But I'll have to look at it :)

[@vincent-thomas]

It also supports go and rust through plugins. And you can make your own plugins too for your desired language

[@DondishGIL]

Pretty cool but I think Bazel is more important since it's actually build by Google

[@wespal7782]

Is it possible to include firebase cloud functions on a Nx monorepo? Please make a tutorial on this thanks.

[@mnlttt]

Right when I started using Nx workspaces! How would you set-up SSR with Nx, Angular and Nest? I'm stuck at an error about webpack that isn't able to find the entry point, using the NestJS's universal module

[@Fireship]

Hmm, I'm not sure personally but sounds like a good GitHub issue, that would be very useful to have documented.

[@JFkingW]

Does it make sense to have apps different languages in a monorepo? Like a flutter app and a js app?

How to setup Nx monorepo with Vue project (while there's no official support) would be much appreciated!

[@rakeshroy7986]

This is cool. Please start a series on nestjs

[@ak-loz]

Nice spider man-like, web animation :)

I would love a video about managing monorepos from the GitLab perspective as well.

[@TheCopymark]

Would you put your Java Spring Boot (Maven) Backend in the "apps" folder aswell?

[@CPEJammy]

Amazing contents. Thank you !

[@ak-loz]

Throughout this whole video I kept wondering-- What are the best practices for Angular and JS? I've gone through the stuff on Free Code Camp and MDN, but I don't feel my stuff is optimized.

[@davidevalenti1172]

Hi what themes are you using for typescript/JavaScript in your angular examples? Btw thanks for teaching me almost everything i know about angular/firebase

[@trophieboi1820]

Whoa that was fast.

[@Noah-vm8id]

Should I also put my react native repo in there? Since it doesn‘t run on the server later

[@huantao2274]

having issue share data object ( as a lib used between nestjs and frontend app), since nestjs use class as data object, In frontend typescript, data object is simply interface

[@iivarimokelainen]

I have no idea whats happening, stuff is just flashing around on the screen randomly. This should have been scrapped and re-recorded with the cursor visible.

[@MYMPSWORLD]

Great Video! 👏👏 The reason most big orgs still uses monorepos are - easy to set up(less configuration needed), easy access management(take days sometimes to get access to a single repo) and unwillingness to adopt. Monorepos has its benefits as you stated(sharing interfaces and common utilities is a huge bonus) but comes with huge drawbacks too. 😢 Can you make a video for sharing code (eg. API interfaces and mocks) through libraries/npm dependencies? I never tried it personally but seems like a pretty useful project. You can use an API management tool like swagger too as an additional bonus.

[@carljustinemosquida9614]

Is it recommended to setup git submodules per app?

[@yoshiinatuki]

How do you add the plugin to activity bar, mine is not showing up, not a VSCode user, tried to google but without success.

[@tiedye001]

Looking forward to support for firebase in nx.

[@ducnguyen123]

could you share the link of the project ? I want to move backend project to backend folder, but nx just keep create new backend folder inside apps folder

[@leandrogoethals6599]

Is kubernetes even needed anymore then for scaling?

[@martinjavinez9389]

where can i find the depency diagram in the intelliJ nx console?

[@shafeequemattummal6772]

Could you please mention the theme, icon theme and font you are using in VS Code? Thanks

[@kingjulien1921]

this was so helpful, really

[@tranquillityEnthusiast]

Plz make a vedio on nestjs sir...

[@Fireship]

Will do!

[@tranquillityEnthusiast]

@@Fireship plz do combine with angular and try to deploy nestjs app to cloud function...

[@davidalexander8786]

what about very complex dependency version conflicts ?

[@extspence]

How do you deploy once you have all of these apps created without deploying everything on a single commit?

[@nemanjasubotin5465]

Great video! ^_^ I also have 1 question, if i were about to migrate my spring boot hibernate and angular project into nest.js sequelize-typescript. How and where could i deploy that? I mean i know about firebase hosting but it requires firebase as the backend service... Like... I would like to have some kind of remote server literal desktop server where i could connect and manage my deployed applications. Please help

[@chrisclarke7937]

I feel like I've just received an upgrade.

[@hakanaki]

How is the different from turborepo ??

[@DanelonNicolas]

Love it !

[@wlun26p]

How about monorepo for different languages

[@vinceramces]

Even their illustrations are open source... neat, but they need to change it afterwards

[@akhilk5121]

Doesn't this make git commit history useless?

[@MuhammadNazar-nx3cm]

Am I the only one or does anyone else feels that Angular Console extension feels more like only for Angular project?

[@will_abule]

Awesome 👍 I love you men

[@keramaswiguna9434]

😍😍😍

[@justfly1984]

tslint is deprecated, use eslint instead

[@joerivde]

Anyone here have experience using this? If yes, what are your thoughts on it (so far)?

[@911madza]

let question = "should you sub this channel?", answer if(0.1+0.2==0.3){answer = 'hell no'} else {answer = 'oh yes'} console.log(answer)

[@Zhuclam]

Output: 0.3000000001, false xD

[@hemanthkumar8330]

#first

[@Fireship]

Gold 🥇

[@desi-musk]

Thanks bro

[@alooooooola]

still dont know how to start the app after watching

[@maksymdudyk1718]

Reading Nx's documentation is more captivating than watching this dull video.

[@oyejohnson]

My brain hurts

[@NxVernxual]

:)

[@Gstyle85255]

holy shit

[@RageBasterd]

Super cool, but I hope I never need it

[@anikethsaha5064]

That is too much help for a developer..... Not required maybe

[@hualiang2182]

Would IDE expode?

[@rimay4392]

hihi

[@NightsArrowz]

Brain = blown

[@дядяСтепа-в9ю]

Too fast...