Setup and development

• Setup and development
  • First-time setup
  • Installation
    • Database
    • Configuration
    • Dev server
  • Generators
  • Naming & cheatsheet

First-time setup

Make sure you have the following installed:

• Node (at least the latest LTS)
• Docker Compose (at least 2.23.3)

Installation

Install reactjs

npx nx add @nx/react
npx nx g @nx/react:app apps/front-end

Install nextjs

npx nx add @nx/nest
npx nx g @nx/nest:app apps/back-end

# Install dependencies from package.json
pnpm install

Note: don't delete pnpm.lock before installation

Database

TypeORM

Configuration

Before start fill correct configurations in .env.dev file in sources

apps/...

DB_HOST=""
DB_PORT=""
DB_USERNAME=""
DB_PASSWORD=""
DB_DATABASE=""
DB_SYNC=""
PORT=

If you using react + vite, please follow the guidelines configured below. Replace "front-end" to your project name

project.json

{
  "name": "front-end",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "app/front-end/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nx/vite:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/apps/front-end"
      },
      "configurations": {
        "development": {
          "mode": "development"
        },
        "production": {
          "mode": "production"
        }
      }
    },
    "serve": {
      "executor": "@nx/vite:dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "front-end:build"
      },
      "configurations": {
        "development": {
          "buildTarget": "front-end:build:development",
          "hmr": true
        },
        "production": {
          "buildTarget": "front-end:build:production",
          "hmr": false
        }
      }
    },
    "preview": {
      "executor": "@nx/vite:preview-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "front-end:build"
      },
      "configurations": {
        "development": {
          "buildTarget": "front-end:build:development"
        },
        "production": {
          "buildTarget": "front-end:build:production"
        }
      }
    },
    "test": {
      "executor": "@nx/vite:test",
      "outputs": ["{options.reportsDirectory}"],
      "options": {
        "reportsDirectory": "../../coverage/apps/front-end"
      }
    },
    "lint": {
      "executor": "@nx/eslint:lint",
      "outputs": ["{options.outputFile}"]
    },
    "serve-static": {
      "executor": "@nx/web:file-server",
      "options": {
        "buildTarget": "front-end:build"
      }
    }
  },
  "tags": []
}

If you using nestjs + webpack, please follow the guidelines configured below. Replace "front-end" to your project name

{
  "name": "back-end",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/back-end/src",
  "projectType": "appslication",
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "target": "node",
        "compiler": "tsc",
        "outputPath": "dist/apps/back-end",
        "main": "apps/back-end/src/main.ts",
        "tsConfig": "apps/back-end/tsconfig.apps.json",
        "assets": ["apps/back-end/src/assets"],
        "webpackConfig": "apps/back-end/webpack.config.js",
        "isolatedConfig": true,
        "buildLibsFromSource": true,
        "generatePackageJson": true
      },
      "configurations": {
        "development": {},
        "production": {}
      }
    },
    "serve": {
      "executor": "@nx/js:node",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "back-end:build"
      },
      "configurations": {
        "development": {
          "buildTarget": "back-end:build:development"
        },
        "production": {
          "buildTarget": "back-end:build:production"
        }
      }
    },
    "lint": {
      "executor": "@nx/eslint:lint",
      "outputs": ["{options.outputFile}"]
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "apps/back-end/jest.config.ts"
      }
    }
  },
  "tags": []
}

Dev server

# Launch dev
docker compose up --build --wait -d

# Launch watch
docker compose watch

Generators

This project includes generators to speed up common development tasks. Commands include:

Note: Make sure you already have the hygen globally installed

# Install nest-cli globally
pnpm install -g hygen

For React:

# Generate a new service
hygen ui-module new

For Nestjs:

# Generate a new service
hygen api-module new