[Tools] Nx workspace with React

Nx

Create a new empty Nx workspace

npx create-nx-workspace <workspace name>

Choose

Empty workspace
Nx Cloud
Nx CLI

Useful Commands

yarn nx list

Shows all the available packages for nx

yarn nx list @nrwl/react

Generate a new React app with Nx

bash yarn add @nrwl/react yarn nx g @nrwl/react:application --name store

Useful Commands

bash yarn nx g @nrwl/react:application --help

Running the application

yarn nx run store:serve

You can modify the port in workspace.json:

  "serve": {
    "executor": "@nrwl/web:dev-server",
    "options": {
      "buildTarget": "store:build",
+     "port": 3000
  },

Generate a shared react lib for store application

yarn nx g @nrwl/react:lib ui-shared --directory=store

Generate a component inside lib

yarn nx g @nrwl/react:component header --project=store-ui-shared

Choose Y to export the component.

Using the generated component inside application

You can find the component import path from tsconfig.base.json:

    "paths": {
      "@egghead/store/ui-shared": ["libs/store/ui-shared/src/index.ts"]
    }

app.tsx:

import {Header} from '@egghead/store/ui-shared'

Genearte a Typescript lib

yarn nx g @nrwl/workspace:lib util-formatters --directory=store

Generate a Lib for application by --appProject

 yarn nx g @nrwl/react:lib feature-game-detail --directory=store --appProject=store

This will add some routing config into application

Add a backend server

yarn add -D @nrwl/express

yarn nx g @nrwl/express:application api --frontendProject=store

Added --frontendProject will also generate a proxy.conf.json file in store application.

yarn nx run api:serve

Useful commands

Run Frontend and backend in one command

yarn nx run-many --target=serve --projects=api,store --parallel=true

Modify workspace.json to run multi applications

        "serve": {...},
        "serveAppAndApi": {
          "builder": "@nrwl/workspace:run-commands",
          "options": {
            "commands": [
              {
                "command": "nx run api:serve"
              },
              {
                "command": "nx run store:serve"
              }
            ]
          }
        },

Run:

yarn nx run store:serveAppAndApi

Generate a lib which share between backend and frontend

yarn nx g @nrwl/workspace:lib util-interface --directory=api

It will generate under libs/api/util-interface.

Use storybook

yarn add @nrwl/storybook -D
yarn nx list @nrwl/react

You should be able to see storybook-configuration.

yarn nx generate @nrwl/react:stroybook-configruation store-ui-shared --configureCypress --generateStories

It will generate Storybook under libs/ui-shared/.storybook & Cypress under store-ui-shared-e2e folder

Run storybook

yarn nx run store-ui-shared:storybook

Run Cypress

yarn nx run store-ui-shared-e2e:e2e --watch

Run JEST

yarn nx run store:test

Build application

yarn nx run store:build --configuration=production

or

yarn nx build store --configuration=production

Will generate a dist folder

Lint application

yarn nx run store:lint

Run the applications/libs which affected

Nx use git history to detect which applications or libs have been changed.

And then run the affected libs and applications to speed up testing.

yarn nx affected:test --base=master
yarn nx affected:lint --base=master
yarn nx affected:dep-graph --base=master

Run unit testings based on master branch.

yarn nx affected:test --all
yarn nx affected:test --all --skip-nx-cache

Nx will cache the running affected result into node_modules/.cache to speed up next runtime.

You can --skip-nx-cache or delete cache.

Migrations

yarn nx migrate latest

then install the new packages.

yarn

If there is migrations.json created:

yarn nx migrate --run-migrations=migrations.json