Skip to main content

Commands Reference

Complete reference of all npm scripts and Nx commands available in the AquaGen project.

npm Scripts (from package.json)​

Development Commands​

npm start​

Alias for: npm run start Full command: npx nx serve production

Starts the production application in development mode with hot reloading.

npm start

What it does:

  • Starts Rspack dev server on http://localhost:4200
  • Enables Hot Module Replacement (HMR)
  • Compiles TypeScript/JSX on the fly
  • Watches for file changes and rebuilds automatically
  • Serves with security headers configured

When to use: Daily development work

npm run start:app​

Full command: npx nx serve

Starts a specific application by name using environment variable.

# Start the demo app
APP_NAME=demo npm run start:app

# Start the production app
APP_NAME=production npm run start:app

What it does:

  • Starts the specified app's dev server
  • Uses the app's Rspack configuration
  • Enables hot reloading for that app only

When to use: Working on multiple apps or testing the demo app

Build Commands​

npm run build​

Full command: npx nx build production --skip-nx-cache

Builds the production application for deployment.

npm run build

What it does:

  • Compiles all TypeScript to JavaScript
  • Bundles all code into optimized chunks
  • Minifies and tree-shakes code
  • Generates source maps
  • Outputs to dist/apps/production/
  • Skips Nx cache to ensure fresh build

Output:

dist/apps/production/
├── index.html
├── main.[hash].js
├── vendor.[hash].js
├── styles.[hash].css
└── assets/

When to use: Before deploying to production

Build time: ~30-60 seconds

npm run build:app​

Full command: npx nx build --skip-nx-cache

Builds a specific application using environment variable.

# Build the demo app
APP_NAME=demo npm run build:app

# Build the production app
APP_NAME=production npm run build:app

What it does:

  • Builds the specified application
  • Outputs to dist/apps/[APP_NAME]/
  • Skips Nx cache for clean build

When to use: Building specific apps for deployment

Project Management Commands​

npm run create:app​

Full command: bash bash-scripts/duplicate-production.sh

Creates a new application by duplicating the production app structure.

npm run create:app

Interactive prompts:

  1. Enter new app name
  2. Confirm creation

What it does:

  • Copies production app structure
  • Updates app configuration files
  • Adds new app to workspace
  • Creates E2E test app
  • Updates routing and configs

Output: New app in apps/[new-app-name]/

When to use: Creating demo, staging, or client-specific apps

npm run create:lib​

Full command: bash bash-scripts/create-lib.sh

Creates a new React library with standard folder structure.

# Interactive mode
npm run create:lib

# With lib name argument
npm run create:lib my-feature

Interactive prompts:

  1. Enter library name
  2. Choose library type (feature/ui/utility)

What it does:

  • Creates library in libs/[lib-name]/
  • Sets up standard folder structure:
    • components/
    • controller/
    • dataSource/
    • store/
    • enum/
    • helper/
  • Generates project.json and tsconfig.json
  • Adds library to Nx workspace

Output:

libs/my-feature/
├── src/
│   ├── components/
│   ├── controller/
│   ├── dataSource/
│   ├── store/
│   ├── enum/
│   ├── helper/
│   └── MyFeaturePage.jsx
├── project.json
└── tsconfig.json

When to use: Adding new features or shared utilities

npm run integrate:lib​

Full command: bash bash-scripts/integrate-lib.sh

Integrates an existing library into applications.

# Interactive mode
npm run integrate:lib

# With lib name argument
npm run integrate:lib my-feature

Interactive prompts:

  1. Enter library name to integrate
  2. Select target app(s)

What it does:

  • Adds path alias in Rspack config
  • Updates routing configuration
  • Adds import to app bootstrap
  • Updates TypeScript paths

When to use: After creating a new library, to make it available in apps

Deployment Commands​

npm run serve:build​

Full command: bash bash-scripts/run-build.sh

Serves a built application locally for testing.

# Serve built production app
npm run serve:build production

# Serve built demo app
npm run serve:build demo

What it does:

  • Checks if build exists in dist/apps/[app-name]/
  • Starts local HTTP server (using serve or http-server)
  • Serves static files from build directory
  • Usually runs on http://localhost:5000

When to use: Testing production build locally before deployment

npm run deploy:app​

Full command: bash bash-scripts/deploy-app.sh

Deploys a built application to Firebase hosting.

# Deploy production app to Firebase
npm run deploy:app production prod-hosting

# Deploy demo app to test hosting
npm run deploy:app demo test-hosting

Arguments:

  1. App name - Name of the app to deploy (e.g., production, demo)
  2. Hosting target - Firebase hosting target (defined in firebase.json)

What it does:

  1. Checks if build exists in dist/apps/[app-name]/
  2. Backs up firebase.json
  3. Updates firebase.json with build path
  4. Runs firebase deploy --only hosting:[target]
  5. Restores original firebase.json

Prerequisites:

  • Build must exist (npm run build:app first)
  • Firebase CLI installed (npm install -g firebase-tools)
  • Firebase logged in (firebase login)
  • Hosting target configured in firebase.json

When to use: Deploying to production or staging environments

Example workflow:

# 1. Build the app
APP_NAME=production npm run build:app

# 2. Test locally
npm run serve:build production

# 3. Deploy to Firebase
npm run deploy:app production prod-hosting

Nx Commands​

These are native Nx commands you can run directly with npx nx.

Build & Serve​

Build Specific Project​

npx nx build <project-name>

# Examples:
npx nx build production
npx nx build demo
npx nx build dashboard

Options:

  • --skip-nx-cache - Skip build cache
  • --configuration=production - Use production config
  • --verbose - Show detailed output

Serve/Start Project​

npx nx serve <project-name>

# Examples:
npx nx serve production
npx nx serve demo

Options:

  • --port=4300 - Use different port
  • --open - Open browser automatically
  • --host=0.0.0.0 - Expose to network

Testing Commands​

Run Unit Tests​

npx nx test <project-name>

# Examples:
npx nx test dashboard
npx nx test components
npx nx test shared

Options:

  • --watch - Watch mode for development
  • --coverage - Generate coverage report
  • --codeCoverage - Generate code coverage

Run E2E Tests​

npx nx e2e <project-name>-e2e

# Examples:
npx nx e2e production-e2e
npx nx e2e demo-e2e

Options:

  • --watch - Watch mode
  • --headed - Show browser window

Run All Tests​

# Run all unit tests
npx nx run-many --target=test --all

# Run tests for specific projects
npx nx run-many --target=test --projects=dashboard,monitoring,shared

Code Quality Commands​

Lint Project​

npx nx lint <project-name>

# Examples:
npx nx lint production
npx nx lint dashboard

Options:

  • --fix - Auto-fix linting errors

Lint All Projects​

npx nx run-many --target=lint --all

Code Generation Commands​

Generate New React App​

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

# Example:
npx nx g @nx/react:app staging

Options:

  • --bundler=rspack - Use Rspack bundler
  • --e2eTestRunner=cypress - Add Cypress tests
  • --style=css - Use CSS for styling

Generate New React Library​

npx nx g @nx/react:lib <lib-name>

# Examples:
npx nx g @nx/react:lib my-feature
npx nx g @nx/react:lib my-utils --directory=shared

Options:

  • --directory=libs/folder - Specify directory
  • --unitTestRunner=jest - Add Jest tests
  • --publishable - Make library publishable

Generate React Component​

npx nx g @nx/react:component <component-name> --project=<lib-name>

# Examples:
npx nx g @nx/react:component MyCard --project=components
npx nx g @nx/react:component Header --project=dashboard

Options:

  • --export - Export component from library
  • --directory=subfolder - Create in subfolder

Workspace Commands​

View Project Graph​

npx nx graph

Opens interactive dependency graph in browser showing all projects and their relationships.

Features:

  • Visual representation of dependencies
  • Filter by project type
  • See affected projects
  • Export as image

List All Projects​

npx nx show projects

Lists all applications and libraries in the workspace.

Options:

  • --with-target=build - Show only projects with build target
  • --with-target=test - Show only projects with test target

Show Project Details​

npx nx show project <project-name>

# Example:
npx nx show project dashboard

Shows configuration and targets for a specific project.

List Available Plugins​

npx nx list

Shows all installed Nx plugins and their capabilities.

View Affected Projects​

# Show projects affected by changes
npx nx affected:graph

# Build only affected projects
npx nx affected:build

# Test only affected projects
npx nx affected:test

Useful for CI/CD: Only build/test what changed.

Cache Management​

Clear Nx Cache​

npx nx reset

Clears the Nx cache and temporary files.

When to use:

  • Build errors after git changes
  • Strange module resolution issues
  • After updating dependencies

Migration & Updates​

Migrate Nx Workspace​

npx nx migrate latest

Updates Nx and related packages to latest versions.

Git Commands (Common Workflow)​

Daily Development​

# Pull latest changes
git pull origin main

# Create feature branch
git checkout -b feature/my-feature

# Stage changes
git add .

# Commit changes
git commit -m "feat: add new feature"

# Push to remote
git push origin feature/my-feature

Working with Branches​

# List branches
git branch

# Switch branch
git checkout <branch-name>

# Create and switch
git checkout -b <new-branch>

# Delete branch
git branch -d <branch-name>

Firebase Commands​

Hosting​

Deploy to Specific Target​

firebase deploy --only hosting:target-name

View Hosting Info​

firebase hosting:sites:list

Add Hosting Target​

firebase target:apply hosting target-name site-name

Other Firebase Commands​

# Login to Firebase
firebase login

# Initialize Firebase
firebase init

# View projects
firebase projects:list

# Set active project
firebase use <project-id>

Quick Reference Cheat Sheet​

Most Used Commands​

TaskCommand
Start dev servernpm start
Build for productionnpm run build
Create new librarynpm run create:lib
Deploy to Firebasenpm run deploy:app production prod-hosting
Run testsnpx nx test <project>
Lint codenpx nx lint <project>
View project graphnpx nx graph
Clear cachenpx nx reset

Workflow Examples​

Adding a New Feature​

# 1. Create library
npm run create:lib my-feature

# 2. Integrate into app
npm run integrate:lib my-feature

# 3. Start development
npm start

# 4. Test the feature
npx nx test my-feature

# 5. Lint code
npx nx lint my-feature

Deploying to Production​

# 1. Pull latest code
git pull origin main

# 2. Install dependencies
npm install

# 3. Build production app
npm run build

# 4. Test build locally
npm run serve:build production

# 5. Deploy to Firebase
npm run deploy:app production prod-hosting

Environment Variables​

Some commands support environment variables:

VariablePurposeExample
APP_NAMESpecify app nameAPP_NAME=demo npm run start:app
NODE_ENVSet environmentNODE_ENV=production npm run build
PORTChange dev server portPORT=4300 npm start
NODE_OPTIONSNode.js optionsNODE_OPTIONS="--max-old-space-size=8192"

Next Steps​

Need Help? See FAQ for more information.