Typescript NX Monorepo with NextJS and Express

[@imjulianeral]

my god, you read my mind, hope you can keep sharing your knowledge about monorepos and NX, these are very helpful

[@DavidWoodMusic]

You have a habit of having videos that are EXACTLY what I'm looking for.

[@tendies]

I have seen many channels, this is by far my fav. I learn from each video I watch, you make me feel like a noob (in a good way).

[@MrChernicharo]

Man that was fast! It would take me an entire day to have all this scaffolding setup. I'm definitely taking a look at this NX thing 👍🏽 Thanks a lot

[@admiralicic]

Jack's content deserves so many more likes

[@denilsoncosta9837]

I was excited for this video, i really like to work with NX, i think for the next videos you can talk about sharing libraries with other projects or how to deploy a full stack application build on top of NX, like this one. Continue make this amazing video

[@nvp323]

+1 on a deployment video

[@igotbit9454]

this guy's really good and great at speaking/explaining too.

[@stephenbeattie]

Thanks Jack. A lot of really neat stuff covered here with no fluff. The tooling has really matured for React. I'm re-acquainting myself and have found your videos really helpful. So quick to put things together with Nx - you've made it look easy!

[@ShahnewazTameem]

your channel is such a gem ❤ gratitude from Bangladesh 🇧🇩🇧🇩

[@erickponce1438]

Incredible, this really increases depelopment speed and a lot overhead is taken away, awesome tool, looking forward to migrate my current project into this. Btw, sharing components among projects sounds really amazing, I am waiting to see that! Just subbed to your channel, amazing content!

[@KevinVandyTech]

I just switched my whole orgs frontend to an Nx monorepo for our react apps. It's sped up some of our development of features across multiple apps so much

[@its_touqeer]

Loved the explaination, I was really looking for NX for my next project.

[@ToddDunning]

Thanks for introducing me to NX which appears to be as big a deal as Copilot. Can't believe I've gone this long not knowing about it. I can see where your MFE stuff fits in with the shared lib etc....

[@Norfeldt]

Nice showing of Cypress at the end. Been using it lately and love it

[@SUJAYKUMAR-o1s]

A needed video on NX Concepts

[@ПавелЯрохович-й9ф]

You produce a gorgeous content, Jack! Thanks a lot!

[@hijuliansosa]

Really great video, thanks Jack!

[@jamesikubi6831]

Thanks again for your amazing insights on new technologies. Please make a video showcasing monorepos vs microfrontends, and how using either will impact on a complex large application.

[@RandomPotatoDev]

NX with Apolo Federation video would be awesome.

[@sairaj5660]

I am trying to do this since you uploaded a video about NX in No BS TS, thank you so much ❤️ If possible I would love to see it's deployment

[@johnjohn7023]

I would love to see how you share a component between different applications. If you make a full course on it I am in to buy it. Great content overall.

[@giovannitonussi3746]

Hi, have you seen his video kzbin.info/www/bejne/eKjCpaCNesaUf7c ? He creates a project on "libs" folder just for the components, so they are reusable for another react application, and at that point any it looks like you can do it for multiple applications. Maybe it will help you.

Thanks very much for your videos You are inspiration. I have started using this tool but its a bit that dependency graph doesnt show the folder pages inside the project since that would be create to find dead code inside a nextjs project.

[@MrAbuYT]

Thanks for the video. I really enjoy your content.

[@subhamsahu5581]

Nice Jack!! If possible can you also show us know to build and deploy nx monorepo with Nexjs and Express

[@bobar92]

Great content as always! One question: Is using `fetch=>then` a personal preference, or is it better than the `await` syntax? I've seen some mixed opinions about this...

[@bobar92]

I just got to the part of the video where you swap to await... Oh well, next time I'll finish the video first :D

[@jherr]

If it's in a `useEffect` I'm usually pretty lazy and do the `then`. If I wanted to do an async/await I'd have to define an interior async function and invoke that. And that's just ... more keystrokes. :P Honestly, though, I really prefer async/await and in production code I do almost exclusively async/await.

[@bobar92]

@@jherr Gotcha, thanks for answering!

[@tonskreee6213]

Can you also extend this tutorial by adding docker and/or docker-compose?

[@maheshprajapati9441]

Next and Nest would have been perfect combo.

[@jherr]

Maybe that'll be part of the next one.

[@codezero6023]

I built a pretty big TS app with Nest JS

[@codehan]

@@jherr Yes! Please provide us a tutorial for setting up a nx monorepo using next.js for the frontend and nest.js for the backend. Maybe create a portfolio or corporate website for that :)

[@Stoney_Eagle]

This is pretty cool. You got great tutorials man! Can I take my existing app and server into this mono repo, and do you have a video about doing that or can you make one? Ps I love that you're not lazy and use semicolons 😉 soo triggering when KZbinrs don't use them 🤣

[@ShaggyKris]

This looks fantastic! However, I have one question: when using code sharing, what would be the optimal way to deploy such a site? Would you use a container, or would you split it up to separate deploy instances?

[@jherr]

You want to deploy federated modules just like any other JavaScript files, so ideally that would go on an asset store like S3. There is a common misconception that "if the app goes down won't my federated modules disappear" Nope, federated modules are just JS files. More information here : kzbin.info/www/bejne/Zoisd4ppqJeZeq8

[@ShaggyKris]

@@jherr thanks for the reply! Always a pleasure.

[@ShaggyKris]

@@jherr I love your videos on these topics, but it would be great if at some point you could also go over deploy processes in series that you cover. It's all well and good to get them running locally, but actually getting them live can be the tricky part.

[@jherr]

@@ShaggyKris I have two videos on that topic. One about modifying the URLs in the webpack.config.js, and then another about deploying the federated modules, which are just JS files, the same way you would other bundle build assets.

[@ShaggyKris]

@@jherr Must have glanced over them. I'll check them out! I'm having a bit of a rough time recently, as I'm formerly a Meteor dev and was recently thrust into the world of NextJS, Express, and Azure. Going from batteries-included deployment to "figure it out, kid" has been a bit stressful haha

[@muhammadjaffarrazadar967]

Hi Jack. in video have you shown how to have a shared app ? and also have you shown how to share types ?

[@jherr]

Yuuuuup.

[@neilm813]

Great video, would love more on nx.js, I'd love to get a little deeper from here to an intermediate understanding but I haven't been able to easily find videos of your quality! Question: since the monorepo enables code sharing, why not just share service methods from the back to the front end and skip the http request altogether when trying to hit the db?

[@jherr]

Sure, you could hit the DB during SSR. But not direct from the client.

[@knsense]

I've been using turbo professionally for 1.5 years (I was the one that introduced it at work), but after watching this video I think I made a mistake, Nx looks more powerful and feature-complete than turbo

[@mainendra]

Always awesome videos 👏

[@sc76399]

Why do we want to create a shared type for pokemon? Is that so we don't have to compile multiple apps at once to use it. I thought the point of monorepos was we can create something once and re-use it across the whole repo?

[@imjulianeral]

working with storybook for the next video will be awesome, also creating shared libraries with components that cannot be used on every app, for example: maybe we have 2 react apps in our monorepo where one is the control panel for the admin and the other one is the app for the end user, so how we avoid to import admin components in our end user app?

[@jherr]

I like how you think Jorge.

[@karlattitude267]

You just have to use Nx tags and enforce-module-boundaries rules ;)

[@ThEldeRS]

Hey Jack! Would you mind giving a brief explanation about the difference between import and import type? Thanks!

[@jherr]

import type I believe is just a more restrictive import that is limited just to types. www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export

[@ThEldeRS]

@@jherr thanks a lot! Keep up the great videos! Found you by complete chance and have fallen in love with your content, especially since I'm a huge TS fan 😜

[@tripleworldpain]

nx g @nrwl/node:lib shared-types Unable to resolve @nrwl/node:lib. Cannot find module '@nrwl/node/package.json' Require stack:

[@jherr]

Weird. I don't know what the problem is. But the NX Community has a really good open Slack that you can jump onto for support.

[@MrMrbannanapants]

been having same issue, let me know if you figure out whats goin on

[@mohdsahil226]

Thanks! NX monorepo gives lint error even on fresh installation. if we install nextjs using nx and run nx serve and then nx lint, it gives lot of errors in .next folder . Please help us setup this!

[@botteu]

Nice one! I get a CORS-error for the fetch-statement though...

[@romanmunar]

I really enjoyed your bs-ts xstate episode but It was short. I think xstate should get a dedicated 24min video too hahah.

[@javascriptprograming9828]

Sir how to deploy this on vercel same origin, i mean client + server(exprees server) + vercel.

[@MDGJose]

Why don't I get all the options when running the npx create-nx-workspace command? it appears to me: None: Configures a minimal structure without specific frameworks or technologies. TS/JS: Configures a TypeScript/JavaScript package without specific frameworks or platforms. React: Configures a React app with your framework of choice. Angular: Configures a Angular app with modern tooling. Node: Configures a Node API with your framework of choice.

[@guris6257]

Can we deploy Nx: UI (next) and api (express) to vercel? I can deploy UI but struggling with api. Any suggestions for it? Thanks heeps

[@aram5642]

This was a great noBS show. I like the big picture approach you took. Sometimes that's all one is missing. Would mind though if you dived into SSR in a separate video :) and btw: How can one not use Nx? Everything at hand, set up and working OOTB.

[@jherr]

I have covered SSR now and again, but I definitely get that a lot of folks want to hear about it. More of an SSG person myself tho. :) And yeah, NX is great.

[@aram5642]

@@jherr SSG would be as much interesting! [erratum^: wouldn't*]

[@yassinebouchoucha]

Would you recommend more Turborepo for Typescript/React stack or NX ?

[@karlattitude267]

No contest , Nx is way more powerful. TurboRepo is just trying to grab and use the same concepts , but you don't have Jeff Cross and Victor Savkin in Turbo team . Those days, Nx tends to become a kind of metaFramework (you can use it with any stakc you want , back or front , with the same type of rules) and to sit on top of your IDES, especially with the new Crystal project

[@codezero6023]

If you don’t want use CORS, you can always set up a proxy property in your front end package.json file

[@SimpleLangSolution]

Good Sir, how do we go about deploying this? Is this possible to do with CI/CD?

[@ferrad1]

Hello I loved this video I learned so much from it Next time could you please make a video on how to deploy nx with nextjs using netlify or heroku Much appreciated

[@tomermatmon]

Great video! very helpful. Can you do a video on state testing (context and redux)

[@hamitaksln]

Thanks for the video but I don't know why you cut 6:42. If you type "nx g @nrwl/next:app" directly it will give error. You should install it first with "npm install --save-dev @nrwl/next". Great video.

[@jherr]

It has probably changed since this video was produced. It’s fairly old.

[@hamitaksln]

@@jherr I see. That's my bad then sorry :)

[@karlattitude267]

Because Jack probably has nx installed globally, or because he's running the command from inside its Nx workspace, that was created with npx at then beginning. Then when he creates the express app, he runs it, which automatically does a npm install, instaling all the local pacakges and enabling the command to work locally . You can have the same result without installing Nx by typing npx before the command .And by the way, it never changed, as your terminal cannot recognize nx as a command if you don't install it and add it to your PATH Env. npx is recognized when you install npm, it just loads the package (from your .npm cache if it can) , extract and run the code inside it, and then discards it

[@brennenrocks]

What is the benefit to using Express instead of just the backend that NextJs provides?

[@jherr]

Independent deploy.

[@curiousspirit3947]

nextjs doesn't work well with long running tasks or websockets, it's mostly a backend for frontend

[@official.mhm13]

Awesome, 🚀

[@babunau]

Can we serve the nextjs app using this express server so that the frontend and backend be served on the same port

[@8bulletballers385]

@Jack I second this - can we?

[@mohdsahil226]

Please Add once video of how to setup Typescript NX Monorepo with NextJS and Apollo Graphql and prisma and nexusjs

[@sourishdutta9600]

Nice video jack. One thing that interface should be written inside shared-type.ts not index.ts as index.ts returning everything from that file I guess sir. Anyways overall this is a great introduction thank you 😊

[@jherr]

Very true.

[@umernasir4217]

Can we deploy this code on Vercel.?

[@basiliuskristiawanwicakson9913]

Mantap sirrr, Great video

[@Balance-8]

Ok, if you could do this with nextjs, graphql, prisma and pal.js and show us how to share generated queries across apps that would be rad.

[@rukokei146]

Hello Jack thanks you for your amazing content ! can you show us the graphql approach with a more complex data structure (ts through mutation/query => mongo) Cheers !

[@jherr]

Thanks, when I get into doing more GraphQL stuff then I'll make sure Mongo with full CRUD access is on the list.

[@erickp.7283]

Dear Mr. Herrington, I really loved your tutorial and could not help but wonder, could you please do a video about deployment of those apps? I understand Nx but not how to run the tests, build, and deploy multiple apps from one monorepo. It would be great if we could show us how it’s done. I have been searching the web for 3 weeks without avail Thank you so so so much sir!!!

[@karlattitude267]

I think you don't really understand what Nx is, becauseas its creators (Jeff Cross and Victor Savkin) say, you have to adapt your mental model , you won't architecture and write software the same way after you understand Nx concepts , of course, there are multiple tools and plugins about deploying and maintaining, and releasing multiple apps and libs , with everything you need for monorepos (or singleRepos as well), cached CI/CD, and very easy. Being using it for 5 years (maybe from the almost its beginning;),I still discover it every day ....and the nrwl Team is crazy , they just build new stuff every week . One thing that could really help you is using Nx Console, which is a sort of GUI extension for Nx from the Nrwl Team. it exists as an extension for VsCode , or Intellij IDEs, and it will help yoiu visualize your Nx Workspace differently

[@raygan3]

Why not just use next js built in backend for api?

[@jherr]

For a small team this would probably be a good way to go. If you have multiple teams then you 'd probably have a team working on the API and another on the frontend.

[@kashnigahbaruda]

What is this NX? Dark magic?

[@jherr]

Awesome magic. :)

[@avneet12284]

Freakin' mindblowing. Nx is awesome.....it can do all that?

[@jherr]

It can do more than that. :)

[@kamalkamals]

Deploy part ??!!

[@Norfeldt]

It's quite clear you aren't the biggest fan of SSR 😂 The SSR part in NextJS is a bit hyped, but I do find the NextJS way of making pages and grabbing query from context to be a bit more intuitive.

[@jherr]

If you're gonna do SSR, NextJS is a great way to do it.

[@Norfeldt]

@@jherr You are absolutely right.

[@imjulianeral]

please check on which directory are you terminal before executing the command, be sure you are executing it on the root folder.

[@electrolyteorb]

Why not try Nest.js it supports typescript out of the box

[@jherr]

I have a hunch that will be coming up.

[@electrolyteorb]

@@jherr 🤑

[@rucklerful]

please do a Turborepo video also. Also would love to see module federation vs turborepo.

[@viniciusataidedealbuquerqu2837]

why can't you just import the type from the backend? can't the code split from TS strip all the implementations?

[@Orionus83]

Great video. What is the name of this cool json to ts extension? It automatically changes json to ts object?: kzbin.info/www/bejne/jYDJfWinZ62tpKs

[@afnz11]

hey its "Paste JSON as Code" marketplace.visualstudio.com/items?itemName=quicktype.quicktype

[@okerror1451]

Where is Jack.. all I hear is his voice... He must be wearing camouflage

[@ksjazzguitaryt]

Never use "latest" in teaching videos. It goes out of date very quickly and causes confusion. Right of the bat, setting up the NX project, the interface is entirely different. Always explicitly specify versions.

[@ksjazzguitaryt]

`npx create-nx-workspace@14.8.6` seems to be working.

[@andrewbateman2282]

Great tutorial. Keep them coming. Great place you live in: Happy Valley. Just one comment: to be able to generate the next.js app, @nrwl/next and @nrwl/workspace must have the same version (12.3.3 in my case).