Create a React project with Nx
Summary
Creating a React app is pretty straight forward. But it becomes tricky when we want to integrate with other tools like typescript, SASS, testing tools, CI, build tools and so on. Nx is a build system that can help you to achieve your desired integration without worrying about different configurations.
Prerequisites
- Make sure you have installed Node.js version 16+
- Take a look around about Monorepo vs Standalone
Good to know
This tutorial will use the Nx to build a standalone React project. Which will also include the integration with typescript, SASS and Vite.
Create Nx Workspace
Whatever you want to create an application, the first thing to do is create a Nx workspace. Run the following command in the terminal.
npx create-nx-workspaceWith this command you will need to enter workspace name. You can give the name as a project name.
We’ll choose React for this case.
And then choose None. Because we want to create a single page application.
Choose Standalone as follow.
For the bundler, choose Vite.
And choose SASS for the stylesheet format.
After that choose No. Because we don’t want to use Nx Cloud for now.
After all of that, Nx will install require dependencies. To run the application, go to project root folder and run nx serve .
Install Nx Globally
To use additional functionality like code generators, we need to install Nx globally.
npm install --global nx@latestCode Generator
Nx can be used to generate code templates. For example, to generate a react component we can use the following command.
nx g c component_nameIf the following question show up, just press enter.
And it’ll generate a component like this.
For other templates, see here.
Done
That’s all! Now you see that with Nx you can not only easily integrate with various tools but also can be extended to a large project as a monorepo.
