Generate new Projects for Nx with Nx Console
In this lesson we learned how to use the Nx command-line instructions to generate a new React application. Sometimes, however, it is much easier and more comfortable to use a visual GUI to execute such commands. In this lesson, we explore the Visual Studio Code extension Nx Console.
Instructor: [0:00] In an Nx workspace, what you usually do is use your comment line to generate new things. Just for generating a new React application, you just write nx generate @nrwl/react app, give it a name, and then run the command.
[0:16] This is very useful, especially for repeating the command, for being able to very quickly execute it or in your custom scripts, but you might not be the comment line type of person. Sometimes, it's even very interesting to explore the available commands in a visual way.
[0:31] For Visual Studio Code, there's a plug-in, which is Nx Console, which you can find on the official nx.dev site or you can directly go to the Visual Studio Marketplace and search it there.
[0:44] I have Nx Console already installed in my Visual Studio Code editor and so if I open it, you can see here the UI that opens up, down here you see the projects which are already in our workspace. You can directly, for instance, run a build or a surf of that existing project.
[1:00] You can explore the actual configuration of the project by clicking into it. Up here, you have a variety of common Nx commands which are handy to be executed very quickly. Further up here, you have basically all of the commands that are on generation or running an existing project.
[1:16] A very interesting one is the generate command because, if you click that, it parses your workspace, and based on what you have currently installed, it gives you all of the options that are available to you.
[1:27] For instance, if you want to generate a new React application, you can just click here, give it a name, Store App for instance, you can choose the styling which you would like to have, and a variety of other options in a more visual UI way.
[1:43] In addition, down here, you can see this terminal popped up once we started interacting with the UI. This is because down here, you get dry runs based on the changes you make up here. For every change, you can live inspect what would be generated and if that's what you would like to have generated.
[2:00] For future reference, you could also have a look at the actual command that has been run by Nx Console. You could just copy it out and learn new commands that way.