Rizing Monorepo

🚀 Quick Start

If your environment is already setup:

git clone https://rizing-devops@dev.azure.com/rizing-devops/rizing/_git/monorepo
cd monorepo
npm install

tip

See Cloning a Repository docs for help on cloning a repository for the first time in ADO.

ℹ️ Overview

The Rizing Geospatial products team uses a mono-repository style structure (aka monorepo). There are many reasons and specific advantages behind the choice to use this architecture (which can be read here). The monorepo is used to house all Geospatial products within Rizing. Additionally, this repository consists of hundreds of re-usable components and dozens of distributable packages that can be used by other developers at Rizing.

💿 Environment Setup

Dependencies

The following dependencies are necessary to be installed on your machine:

• Git
• NodeJS
• Visual Studio Code (not required, but recommended)

NodeJS (NVM) Setup

tip

It's highly recommended to use Node Version Manager (nvm), rather than directly installing a version of NodeJS. This will allow you to effortlessly install and switch between NodeJS versions.

Download and install one of the following:

• NVM for Mac or Linux
  • curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
• NVM for Windows
  • Download and run latest installer

Install NodeJS >= 20.10.0

# Install NodeJS version
nvm install 20

# Set as active version
nvm use 20

Clone Repository

git clone https://rizing-devops@dev.azure.com/rizing-devops/rizing/_git/monorepo

note

Generate a Personal Access Token in Azure DevOps if necessary.

Open Code

1. Open the root folder in Visual Studio Code (or other IDE if preferred)
2. When prompted from Visual Studio Code to install the recommended extensions, click "Yes"
3. Install NodeJS packages (npm install)

Structure

The repository has the following structure:

📦 monorepo            # repo root
 ┣ 📂 apps             # contains all NodeJS apps
 ┃ ┣ 📂 app1
 ┃ ┣ 📂 app2
 ┃ ┗ 📂 app3
 ┣ 📂 docs             # contains all application documentation (using Docusaurus)
 ┃ ┣ 📂 app1
 ┃ ┣ 📂 app2
 ┃ ┣ 📂 app3
 ┃ ┗ 📂 dev-guide      # developer guide docs
 ┗ 📂 libs             # re-usable library code, broken down into packages (libs)
   ┣ 📂 lib1
   ┣ 📂 lib2
   ┗ 📂 storybook-host # storybook server that pulls all stories from all libs

📝 Common Commands

The following are reference commands. For more details on CLI arguments, see the NX API documentation.

Run application

Start an application

npm run start -- {YOUR_APP}

Start multiple applications at the same time

npm run nx -- run-many --target=serve --projects={APP_1},{APP_2} --parallel

Create project

Create standard TS library

npm run nx -- generate @nx/js:library YOUR_LIB --unitTestRunner=jest --publishable --importPath=@rizing/YOUR_LIB --tags=pure --no-interactive

Create node library

npm run nx -- g @nrwl/node:lib some-lib --publishable --importPath=@rizing/some-lib

Create Angular library

npm run nx -- generate @nx/angular:library YOUR_LIB-angular --publishable --changeDetection=OnPush --importPath=@rizing/YOUR_LIB --prefix=rz --skipModule --standalone --style=scss --tags='angular' --no-interactive

Create Nest.js App

npm run nx -- g @nx/nest:app YOUR_APP --strict

Modify project

Remove project

npm run nx -- g remove {some-project} --forceRemove

Move project

npm run nx -- g move --project booking-some-library shared/some-library

Create Angular components

Create Angular component

npm run nx -- generate @nx/angular:component --standalone --changeDetection=OnPush --prefix=rz --no-interactive --project=YOUR_LIB YOUR_COMPONENT

Linting

Lint affected (changes)

npm run lint:affected

Lint a project

npm run lint -- YOUR_TARGET_PROJECT

Lint all projects

npm run nx -- run-many -t lint

Testing

Test affected (changes)

npm run test:affected

Test project (single run)

npm run test -- {YOUR_PROJECT}

Test project w/ hotreload (keep watching for changes)

npm run test -- {YOUR_PROJECT} --watch

Test project w/ debugging

npm run test -- {YOUR_PROJECT} --inspect

Build project

Build single project

# Swap "production" for desired configuration
npm run nx -- run YOUR_PROJECT:build:production

Storybook

Configure Storybook for a project

npm run nx -- g @nx/angular:storybook-configuration PROJECT_NAME

Start global story book

npx run storybook

Start storybook for a specific library

npm run nx -- storybook YOUR_LIBRARY

Build production storybook site

npm run nx -- run STORYBOOK_PROJECT:build-storybook

NX Workspace

Show NX graph

npm run nx -- graph

Clear NX cache

npm run nx -- clear-cache

Updates

Get latest updates

npm run nx -- migrate latest

Apply latest updates (apply migrations)

npm run nx -- migrate --run-migrations

Check for outdated NPM packages

npm outdated

TypeOrm

Create TypeOrm migration

npm run typeorm -- -d ./apps/omni-api/typeorm.config.ts  migration:generate ./apps/omni-api/src/migrations/YOUR_MIGRATION_NAME

Git

Delete all local git branches

# Mac:
git for-each-ref --format '%(refname:short)' refs/heads | grep -v master | xargs git branch -D

# Windows
git branch | grep -v "main" | xargs git branch -D

🗒 Notes

Unit tests using the ArcGIS JS API

When a library has unit tests that uses the ArcGIS JS API, it is necessary to adjust the library's Jest config to properly handle the dependency.

// Add any additional node module packages to the regex pattern.
"transformIgnorePatterns": [
   "node_modules/(?!(@angular|@arcgis|@esri|@stencil/)"
],

See: https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/arcgis-js-api-can-t-be-used-in-jest-unit-tests/td-p/1350401