No CRA? What now?

So, yeah, no create React app. So what do we do now, right? And if you look at the React docs, and you're probably familiar with, they suggest now for proper applications to go with some production-grade framework, right? And these are great choices, right? There's Remix, there's Next.js, Gatsby. But what if you're not ready to go full framework just yet? You just want to explore, get started with a simple React app, pure React app? They have some choices, actually, down here. So there's kind of a bit hidden. But you can use, for instance, Vite or Parcel to set it up. And again, Vite, for instance, has a really great templating setup that can get you started. But they are kind of a generic bundler, right? That's the kind of main topic there.

I want to show how, for instance, you could do something similar with Nx. And you might know Nx maybe from a mono-repo thing. Maybe some of you have been here yesterday. So not going to talk about mono-repos, but actually about a similar thing that we did, which is what we call standalone applications.

So Nx has facilities built in that is not just useful for a mono-repo setup, but can even help you set up something that is very close to what Create React app did, but with some modern features. So you can create a new workspace like this one here. And this will boot you up. You can already see you have different choices in terms of bundling mechanisms, like V-to-APK or RSPEC.

And I did this already, so we save some time installing stuff. But basically this is what you will get out of such a workspace. So you can already see it's pretty similar to what a Create React app might look like. So you have a source folder at the root, one app only. There's a couple of other things in here. And you can just literally do an npm start, right, and it would boot up your application in develop mode. Now here's its Vite, and it serves it up in your browser. Now, why would you choose this? Like, you're getting a step further. Because we've, for instance, like coming a bit from the monorepo scenario, we suggest people to modularize their applications.

So instead of sticking everything into this source folder, what you can do actually is leverage some of the nx generators and, let's say, set up a new library in here. So I can say the nx react plugin provides your library generator. And let me create some products library. And as a directory, I'm going to use modules. You can choose whatever you want, really. So what test run do you want to use? Do you want to use VTEST as fast as one? Don't need a bundle right now. And so what will happen here, you can see I created such a library which allows me to represent that unit or business context for developing products. You can see here, there's a clear entry point which allows me also to think about private and public APIs. And I can expand it like this. If you don't know these commands, these generators by heart, which is totally understandable, we also have an extension for vscode and WebStorm. And so what you could do here, for instance, go here, say generate library react. Let's say I want an orders library as well. Choose a bunch of stuff and then run just a generator.

And it will recreate me here such a new orders library here as well. Now, all of these are exposed via tsbase config and so meaning I is very easy for me to import them because it's literally an alias pointing to that folder that we just created. And so it can go to the app here and say import from this package that we just had orders, right? And I could do just the same thing for module products and have that imported there as well, right? And so I have both of them and I can reference them obviously in my application and use them.

We can even visualize this just as I showed yesterday for those of you that have been here in an NX graph. Now let me help you out a bit here. So basically you can see here this is my workspace structure, it shows me there's an end-to-end test as well as Cypress that links to the Create React app to module orders, module products. And so you can get a rough idea how you can potentially modularize these things. There's even features that allow you to kind of create boundary Lint rules around these to make sure which imports are allowed, which not. And this is how we suggest people to kind of scale things up.

Now coming from the Monorepo space obviously what you could do as the next step is once you have an app build up and it's kind of modularized, what about having a proper Monorepo? Right? And so this would be a possibility where you can upgrade then this workspace, move it in the actual Monorepo structure where you can see the same app here, you see the same order and products libraries in there. And maybe at this point you're ready to add Next JS application or remix application, right? Now I have added that already in my package json so what I did there is I added this NxNext plugin. There's actually a ton of community plugins out there as well. And so what this allows me now is to do the same thing. I could go and generate here an application with NxJS. Those are the two I have installed here. I have here my NxNext app, right? I run the same thing. It will now pull down the packages, install them, and here basically inside my apps folder I will get my NxNext application and I can reference them in the very exact same way as I did before. Right? And so this can be a migration strategy. Now I'll let the installation go. This can be a kind of modularization strategy and also a migration strategy. If you have a React application and you want to modularize it slowly to a more modern and more full stack application that for instance, NxJS or Remix would allow you.

And so if you're thinking now, well this is all cool and nice but I have already a great React app, how do I get to something like this? If you go to our documentation, we also have something like an automate migration. So our generators cannot just generate new stuff but it can also take your existing Create React app for instance. You run mpx-nx in it, it understands this is a Create React app and can even migrate this from a Webpack Create React app based setup to an Nx based VT setup with React, right? So those are some possibilities of how you can migrate. If this is interesting, definitely get in touch. We have also booth outside so we can dig a bit deeper. I can show you some more details which go beyond the seven minutes that I had.