Skip to main content

React with NX

Setup​

Have nx installed globally

npm install -g nx

Initial Project​

npx create-nx-workspace --preset=react

Run Dev Server​

nx serve

Create Sample App​

nx install -D @nrwl/react

nx g @nrwl/react:app app1

nx g @nrwl/react:app app2

nx g @nrwl/react:lib navbar

Make App1, App2 to use the Navbar​

apps/app1/src/app/app.tsx
import styles from './app.module.css';
import { Navbar } from '@demoProject/footer';

import { ReactComponent as Logo } from './logo.svg';
import star from './star.svg';

import { Route, Link } from 'react-router-dom';

export function App() {
  return (
    <div>
      <Navbar />
      This is App2
    </div>
  );
}

export default App;

Start App1, App2 on different ports​

nx serve app1 --port 4100

nx serve app1 --port 4200

Refactor/Rename example​

nx mv --project app1 mainApp --dry-run

nx mv --project navbar footer --dry-run

This will also help you to change the relatived imports

apps/mainApp/src/app/app.tsx
import { Navbar } from '@demoProject/footer';

Show the dependency graph​

nx dep-graph

Production Build​

nx build mainApp

nx build app2

Affected Build​

Change something in app2 only, and commit it, then

nx affected:apps

nx affected:build