Nx Quickstart - How to Scale a JavaScript Project
ฝัง
- เผยแพร่เมื่อ 24 ก.ค. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
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.
just curious, did you get the job?
@@HuyNguyen-kd5vz I did actually! I now work as a team lead for them. Thanks for asking!
Wow, awesome! Congrats mike!
Did you advised a tool for a huge company just by watching 10min video and they immediately hired you as tech lead?
@@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!!
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.
piece of docs was put to voice. the dullest video ever.
We use NX at work, it has been great. Makes sharing code between teams so simple.
Bro, your video editing is incredible, everything is so beautiful ! keep going !
My brain almost blew up watching it
Mission accomplished 💥
Develop like Google... NX looks like a winner. Can't wait to try!
Your Video Production Quality Is Best In The Industry!!
Great Content ,Kudos Bro!! 🤟👍⚡😎
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.
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.
4 years later
its shit
@@bovfbovfhow can you explain i am learning it right now
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.
Really nice 👍. I use mono repo as well as multi repo, but I wasn’t aware of this tool. Thanks for sharing 🤓
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?
Nice! Not sponsored, but I was able to collaborate with them directly and get feedback before releasing it.
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?
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.
I dont think nx has positive when your team is 20+ if not it just seem like overhead
Would you put your Java Spring Boot (Maven) Backend in the "apps" folder aswell?
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.
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!
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 is so cool. Very informative. Thanks for sharing this I had no idea about this tool.
Nx is the best tool I've ever used in years. Top notch Nest, Cypress and Jest support.
Very well explained as always, thank you!
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
Do you think that yarn berry workspace and Nx will be a good pair to manage monorepo?
@@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.
You are really incresing the level of the web! Thnaks man 🔥
Does it make sense to have apps different languages in a monorepo? Like a flutter app and a js app?
Amazing contents. Thank you !
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
Hmm, I'm not sure personally but sounds like a good GitHub issue, that would be very useful to have documented.
Is it possible to include firebase cloud functions on a Nx monorepo? Please make a tutorial on this thanks.
Lerna and yarn workspaces are awesome too but the UI, especially the dependency graph, of Nx is outstanding 🦄🚀
Totally, the VS code plugin is amazing. Not to mention all the code generating schematics.
@@Fireship unfortunately there is no support for jetbrains IDE ...
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.
Love it !
this was so helpful, really
Should I also put my react native repo in there? Since it doesn‘t run on the server later
How to setup Nx monorepo with Vue project (while there's no official support) would be much appreciated!
Thanks for the most amazing contents 🙏
You you Firas 👍
How do you add the plugin to activity bar, mine is not showing up, not a VSCode user, tried to google but without success.
Geez man, the animation and design just get better.
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
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
Is it recommended to setup git submodules per app?
I would love a video about managing monorepos from the GitLab perspective as well.
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
The best CS channel on the TH-cam
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 ?
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 ?
@@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.
where can i find the depency diagram in the intelliJ nx console?
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.
@@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
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 :)
It also supports go and rust through plugins. And you can make your own plugins too for your desired language
How do you deploy once you have all of these apps created without deploying everything on a single commit?
How is the different from turborepo ??
Nice spider man-like, web animation :)
what about very complex dependency version conflicts ?
Pretty cool, but I would love to see how we can integrate Ionic and/or NativeScript as well to the stack! Great video anyways! :)
That is very possible, I've seen people use both NativeScript and Ionic with Nx. For example nstudio.io/xplat
Is kubernetes even needed anymore then for scaling?
Whoa that was fast.
This is cool. Please start a series on nestjs
How about monorepo for different languages
Thanks bro
Looking forward to support for firebase in nx.
Awesome 👍 I love you men
Pretty cool but I think Bazel is more important since it's actually build by Google
I Love It When The Notification Comes, "Someone Has Subscribed Your Channel" 🙂 It Always Makes My Day!...
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.
Doesn't this make git commit history useless?
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.
😍😍😍
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.
Plz make a vedio on nestjs sir...
Will do!
@@Fireship plz do combine with angular and try to deploy nestjs app to cloud function...
I feel like I've just received an upgrade.
tslint is deprecated, use eslint instead
Even their illustrations are open source... neat, but they need to change it afterwards
My brain hurts
Anyone here have experience using this? If yes, what are your thoughts on it (so far)?
#first
Gold 🥇
holy shit
:)
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)
Output: 0.3000000001, false xD
still dont know how to start the app after watching
Would IDE expode?
Brain = blown
hihi
Super cool, but I hope I never need it
Reading Nx's documentation is more captivating than watching this dull video.
That is too much help for a developer.....
Not required maybe
Too fast...