Generate a new React app with Nx
One of the powerful capabilities of Nx is it's code generation and scaffolding mechanism. Nx allows you to generate new apps, libraries, components and more, which don't just generate new code but also modify existing one to fit the new situation. In this lesson we explore the code generation commands by generating a new React application in our Nx monorepo workspace.
Instructor: [0:00] Here we have a new empty nx-workspace. In order to get started with it, we definitely want to generate a new application. I'm opening up here my terminal within Visual Studio Code.
[0:12] If I type just Nx, which is basically the common line tool for Nx workspace, it won't find a command. The reason is that I didn't install Nx CI Global. I definitely could do that by just doing npm install @nrwl/cli-g, but usually what I do is either just use npx Nx, which will use the local version here, which is already installed in our workspace.
[0:35] Since I'm using yarn, I'm using yarn Nx. The first command I'm going to explore here is the Nx list command. The Nx list command gives us all the options we have within our Nx workspace.
[0:47] For instance, you can see that we have the nrwl workspace installed right now. There isn't a lot installed at the moment, but that's mainly because the workspace is empty.
[0:55] We also have a variety of options to go with. We can go with an Angular application, with Nest or Next, even create a node application or backend application. In our case, we definitely want to go with React.
[1:08] By the way, there are also community plug-ins, which is a growing list. You can see, for instance, view support, or support for your ionic React, and a variety of other things. For now, let's explore the React ecosystem. I'm adding the React package, and so do yarn@nrwl/react.
[1:26] Once we install the React support, we can go and explore whatever the React package provides us. Again, we can use yarn Nx list, but this time, we will add here nrwl/react. Now, here, you can see the different possibilities we have like we can initialize the nrwl/react plug-in.
[1:45] This is usually done implicitly whenever we use one of our commands. We can generate a new application, we can generate a new library, we can generate components, or like a Redux store. There is also support for Storybook, which is really convenient for developing shared UI libraries.
[2:01] Finally, there's also Storybook and Cypress integration, such as it can automatically generate some Cypress specs for your Storybook setup. Since we want to generate an application, we will go with this application schematic.
[2:14] Schematic by the way is just another word for a generator or automation script. In order to generate a new application, the syntax is basically always yarn Nx, then you write generate, or you can even like use the shortcut G.
[2:27] You prefix the package, which is responsible for generating it. In this case, it's nrwl/react, and then the target which you want to generate. In our case, it's application. Again, you can do --help to get all the options now for the specific automation script.
[2:43] You can see we provided the name, we can provide it optionally in the directory, where we want to generate it, the type of styling we want to use, like whether we want to use, for instance, inline styles, Sass files, or we want to configure routing and a variety of other options.
[2:59] Let's try out the command, let's use yarn Nx generate @nrwl/react application, and since we want to generate and create a store application, let's use store as the name.
[3:12] Now, an important hint here is that you can always use that --dry-run command to see what would be generated whenever we run that command without actually affecting our workspace.
[3:23] I can use --dry-run, and it will guide me through the various steps as if I would go and generate it. In this case, I can say I would like to use Sass for my styling. Yeah, I would use the React Router. Now you can see basically it lists all of the files that will be created for me, as well as which files will be updated.
[3:43] Since we're using dry-run, nothing actually changed. In order to effectively create our application, let's remove the dry-run and execute the command again. Again, we will use Sass for our styling and we installed also React Router.
[3:59] Once installation finishes, we can see we get here a new application being generated. Here, we have our store application, which is a React app. It has already an app component here with some example code and a couple of more configuration files here.
[4:14] Interestingly, also an end-to-end test code automatically generated that uses Cypress for testing our store application. Furthermore, we have already an ESLint setup now that is able to lint our application workspace in general as well as some Babel and [inaudible] Confix. You can also see that the Nx JSON got modified.
[4:33] If we scroll down, we now see here the projects that are being present in our workspace are listed in a project section. We have to store again at the store end-to-end test as well as in the workspace JSON. We can see a new entry into the projects object here, which is our store with its corresponding configuration.