Monorepos!! Nx vs Turborepo vs Lerna – Part 2: Nx

In our previous post, we walked through setting up a Turborepo monorepo containing a React web app, a Node.js API, and a React Native mobile app. In this post, we'll achieve the same setup using Nx as our monorepo tool of choice.

Getting Started with the Monorepo

We will start by creating an Nx workspace. Follow the official documenttion of Nx. You can use the package manager of your choice, i will be using the npm packae manager.

npx create-nx-workspace@latest

This will guide you through the setup, asking whether you want a monorepo or a standalone app and whether you want to start with a blank or a preconfigured setup.

Once you've created your workspace, you can

run single tasks with npx nx <target> <project>
run multiple tasks with npx nx run-many -t <target1> <target2>

You can also install the Nx Console official extension on vscode to start commands from there rather then using cli.

Run the npx nx dev website or click on the run icon on the dev command to run the project.

 NX   @nx-monorepo/website:serve  
    VITE v6.3.5  ready in 96 ms
    ➜  Local:   http://localhost:4200/
    ➜  press h + enter to show help

The above command created an nx workspace with a React website so we just need to add Nodejs API and React Native app now.

Setting Up the Node Backend

We are going to use the @nx/node plugin to add a Nodejs API to our monorepo.
In any Nx workspace, you can install @nx/node by running the following command:

npx nx add @nx/node

This will install the correct version of @nx/node. You can add a new application with the following command:

npx nx g @nx/node:application apps/<your api name>

You can run your application with npx nx serve api or using the Nx Console extension.

You can see the {"message":"Hello API"} response on http://localhost:3000

Setting Up the React Native App

We are going to use the @nx/react-native plugin to add a React Native App to our monorepo. In any Nx workspace, you can install @nx/react-native by running the following command:

npx nx add @nx/react-native

This will install the correct version of @nx/react-native. You can add a new application with the following command:

npx nx g @nx/react-native:app apps/<your-app-name>

You can run your application with npx nx start run-ios or using the Nx Console extension.

This is the final folder structure of the project.

Conclusion

With the initial Nx setup complete, we now have a fully functional monorepo that integrates our React web app, React Native mobile app, and Node.js API. This structure allows us to share configurations, utilities, and React hooks across all platforms, streamlining development and promoting consistency and code reuse throughout the codebase.

You can find all the code in the Github Repo.