NX Generators

NX generators for Ronas IT projects.

Usage

1. Create monorepo with Expo app using NX Expo preset or with Next.js app using NX Next preset:

# For Expo app:
npx create-nx-workspace@latest my-project --preset=expo --appName=my-app --e2eTestRunner=none --ci=skip

# For Next.js app:
npx create-nx-workspace@latest my-project --preset=next --appName=my-app --nextAppDir=true --nextSrcDir=false --style=scss --e2eTestRunner=none --ci=skip

2. Install this package:

npm i @ronas-it/nx-generators --save-dev

3. Run generators:

npx nx g repo-config
npx nx g code-checks

# For Expo app:
npx nx g expo-app

# For Next.js app:
npx nx g next-app

Or run all generators at once:

# For Expo app:
npx nx g repo-config && npx nx g code-checks && npx nx g expo-app

# For Next.js app:
npx nx g repo-config && npx nx g code-checks && npx nx g next-app

4. Start the app:

npx nx start my-app

5. Continue developing your app by generating libraries and components:

npx nx g react-lib mobile/account/features/profile-settings --withComponent
npx nx g react-component

Generators overview

1. repo-config

Setups the monorepo structure for development.

2. code-checks

Configures code checks and formatting with pre-commit hook.

3. expo-app

Generates and configures an Expo React Native app.

Options

1. name (optional) - name of the app for app.config.ts (e.g: my-app)

2. directory (optional) - name of the directory in the apps/ folder (e.g: mobile)

Example

npx nx g expo-app --name=my-app --directory=mobile

or

npx nx g expo-app my-app mobile

4. next-app

Generates and configures a Next.js app.

Options

1. name (optional) - name of the app (e.g: my-app)

2. directory (optional) - name of the directory in the apps/ folder (e.g: web)

Example

npx nx g next-app --name=my-app --directory=web

or

npx nx g next-app my-app web

5. react-lib

Generates a library according to NX notation.

Options

1. app (optional) - name of an app or shared.

2. scope (optional) - name of a scope or shared. This option is for a library, related to an app.

3. type (optional) - type of library. Possible values are features, data-access, ui and utils.

4. name (optional) - name of a library.

5. withComponent (optional) - generate the library with lib/component.tsx file. This option is for features or ui library.

6. dryRun (optional) - generate the library without creating files

Example

npx nx g react-lib --app=mobile --scope=account --type=features --name=profile-settings --withComponent --dryRun

or

npx nx g react-lib --dryRun

6. react-component

Creates a React component in particular library.

Options

1. name (optional) - name of the component (e.g. AppButton)

2. subcomponent (optional) - generate a folder for components

Example

npx nx g react-component --name=AppButton --subcomponent

or

npx nx g react-component AppButton --subcomponent

7. entity-api

Creates an API with related entities in API library. It also updates redux store middlewares, reducers.

Options

1. name (optional) - name of the entity (e.g. User)

2. baseEndpoint (optional) - name of used endpoint in your API (e.g. /users)

Example

npx nx g entity-api --name=User --baseEndpoint=users

8. form

Generates a form schema class and adds its usage to a component or a hook.

Options

1. name (optional) - name of the form (e.g: profile-settings)

2. placeOfUse (optional) - name of the component or hook, where the form should be (e.g: ProfileSettings or useProfileSettings)

Example

npx nx g form --name=profile-settings --placeOfUse=ProfileSettings

or

npx nx g form profile-settings ProfileSettings

Note

Each generator accepts the --help argument to see generator instructions.

npx nx g react-lib --help