Nx Quickstart - How to Scale a JavaScript Project
Ғылым және технология
Use Nx to power up ⚡🐋 full-stack JavaScript projects with modern tooling, automation, and sophisticated code-sharing for monorepos nx.dev/
Nx is an open-source project from Nrwl 🦄🌊 nrwl.io
Watch more free videos at fireship.io
#nrwl #nx #javascript
Пікірлер: 116
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
5 жыл бұрын
just curious, did you get the job?
@MikeBrits14
5 жыл бұрын
@@HuyNguyen-kd5vz I did actually! I now work as a team lead for them. Thanks for asking!
@Fireship
5 жыл бұрын
Wow, awesome! Congrats mike!
@Oswee
3 жыл бұрын
Did you advised a tool for a huge company just by watching 10min video and they immediately hired you as tech lead?
@kibukamusoke
3 жыл бұрын
@@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.
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.
OMG!! This is exactly what our team needs , thanks for sharing!!
We use NX at work, it has been great. Makes sharing code between teams so simple.
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
29 күн бұрын
piece of docs was put to voice. the dullest video ever.
Your Video Production Quality Is Best In The Industry!! Great Content ,Kudos Bro!! 🤟👍⚡😎
Develop like Google... NX looks like a winner. Can't wait to try!
Bro, your video editing is incredible, everything is so beautiful ! keep going !
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.
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
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.
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.
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
8 ай бұрын
4 years later its shit
@farantaimoorbutt5028
7 ай бұрын
@@bovfbovfhow can you explain i am learning it right now
My brain almost blew up watching it
@Fireship
5 жыл бұрын
Mission accomplished 💥
Really nice 👍. I use mono repo as well as multi repo, but I wasn’t aware of this tool. Thanks for sharing 🤓
Really loved the video. I had no idea that NX existed. Thanks a lot 😃
Doing research about monorepos and this is a superb video, thanks so much!
You are really incresing the level of the web! Thnaks man 🔥
This is so cool. Very informative. Thanks for sharing this I had no idea about this tool.
@uziboozy4540
5 жыл бұрын
Nx is the best tool I've ever used in years. Top notch Nest, Cypress and Jest support.
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
@user-qs5dw9gw2t
2 жыл бұрын
Do you think that yarn berry workspace and Nx will be a good pair to manage monorepo?
@MrPufek93
2 жыл бұрын
@@user-qs5dw9gw2t 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.
Lerna and yarn workspaces are awesome too but the UI, especially the dependency graph, of Nx is outstanding 🦄🚀
@Fireship
5 жыл бұрын
Totally, the VS code plugin is amazing. Not to mention all the code generating schematics.
@maazm4722
4 жыл бұрын
@@Fireship unfortunately there is no support for jetbrains IDE ...
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
5 жыл бұрын
Nice! Not sponsored, but I was able to collaborate with them directly and get feedback before releasing it.
@matthewmullin2626
5 жыл бұрын
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?
Very well explained as always, thank you!
Geez man, the animation and design just get better.
Amazing contents. Thank you !
The best CS channel on the KZread
Thanks for the most amazing contents 🙏
@Fireship
5 жыл бұрын
You you Firas 👍
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
this was so helpful, really
I would love a video about managing monorepos from the GitLab perspective as well.
Love it !
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
5 жыл бұрын
@@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
Would you put your Java Spring Boot (Maven) Backend in the "apps" folder aswell?
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.
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
5 жыл бұрын
That is very possible, I've seen people use both NativeScript and Ionic with Nx. For example nstudio.io/xplat
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
2 жыл бұрын
It also supports go and rust through plugins. And you can make your own plugins too for your desired language
How to setup Nx monorepo with Vue project (while there's no official support) would be much appreciated!
Nice spider man-like, web animation :)
Does it make sense to have apps different languages in a monorepo? Like a flutter app and a js app?
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.
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
5 жыл бұрын
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
5 жыл бұрын
@@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.
Is it possible to include firebase cloud functions on a Nx monorepo? Please make a tutorial on this thanks.
This is cool. Please start a series on nestjs
Pretty cool but I think Bazel is more important since it's actually build by Google
Could you please mention the theme, icon theme and font you are using in VS Code? Thanks
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
5 жыл бұрын
Hmm, I'm not sure personally but sounds like a good GitHub issue, that would be very useful to have documented.
Looking forward to support for firebase in nx.
Whoa that was fast.
Should I also put my react native repo in there? Since it doesn‘t run on the server later
I Love It When The Notification Comes, "Someone Has Subscribed Your Channel" 🙂 It Always Makes My Day!...
How do you add the plugin to activity bar, mine is not showing up, not a VSCode user, tried to google but without success.
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
Thanks bro
Is it recommended to setup git submodules per app?
Awesome 👍 I love you men
😍😍😍
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
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.
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
How do you deploy once you have all of these apps created without deploying everything on a single commit?
where can i find the depency diagram in the intelliJ nx console?
How is the different from turborepo ??
How about monorepo for different languages
what about very complex dependency version conflicts ?
Plz make a vedio on nestjs sir...
@Fireship
5 жыл бұрын
Will do!
@tranquillityEnthusiast
5 жыл бұрын
@@Fireship plz do combine with angular and try to deploy nestjs app to cloud function...
I feel like I've just received an upgrade.
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.
Doesn't this make git commit history useless?
Even their illustrations are open source... neat, but they need to change it afterwards
tslint is deprecated, use eslint instead
#first
@Fireship
5 жыл бұрын
Gold 🥇
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
5 жыл бұрын
Output: 0.3000000001, false xD
holy shit
Anyone here have experience using this? If yes, what are your thoughts on it (so far)?
My brain hurts
:)
Reading Nx's documentation is more captivating than watching this dull video.
hihi
Brain = blown
Super cool, but I hope I never need it
still dont know how to start the app after watching
Would IDE expode?
That is too much help for a developer..... Not required maybe
Too fast...