dennytim / modern-app Goto Github PK

• - add admin app

      nx generate @nrwl/angular:application frontend/admin --style=scss

• - configure tags
• - change ports for launching
• - configure IDE, lint, reformat etc

• - install dependencies

   yarn add @nestjs/typeorm typeorm pg

• - import module typeorm into app.module
• - configure .env file

    PORT=3000
    DB_TYPE=postgres
    DB_NAME=MODERN_APP_DB
    DB_HOST=localhost
    DB_HOST_NAME=postgres
    DB_PORT=5433
    DB_USER_NAME=postgres
    DB_USER_PASSWORD=123456
    PGADMIN_PORT=5555
    PGADMIN_DEFAULT_EMAIL=[email protected]
    PGADMIN_DEFAULT_PASSWORD=admin
    FRONTEND_CLIENT_PORT=4201

• - create db

    version: '3.1'
    
    services:
      postgres:
        image: postgres:13-alpine
        hostname: ${DB_HOST_NAME}
        ports:
          - ${DB_PORT}:5432
        environment:
          POSTGRES_USER: ${DB_USER_NAME}
          POSTGRES_PASSWORD: ${DB_USER_PASSWORD}
          POSTGRES_DB: ${DB_NAME}
        volumes:
          - postgres-data:/var/lib/postgresql/data
        restart: unless-stopped
        networks:
          - backend
    
      pgadmin:
        image: dpage/pgadmin4
        depends_on:
          - postgres
        ports:
          - ${PGADMIN_PORT}:80
        environment:
          PGADMIN_DEFAULT_EMAIL: ${PGADMIN_DEFAULT_EMAIL}
          PGADMIN_DEFAULT_PASSWORD: ${PGADMIN_DEFAULT_PASSWORD}
        restart: unless-stopped
        networks:
          - backend
    
    volumes:
      postgres-data:
    
    networks:
      backend:

scripts:

    "db:start": "cp .env ./docker-compose && cd docker-compose && docker-compose up -d",
    "db:stop": "cd docker-compose && docker-compose stop && rm .env"

• - connect db

    export const environment = {
      production: false,
      connection: {
        type: process.env.DB_TYPE,
        host: process.env.DB_HOST,
        port: process.env.DB_PORT,
        username: process.env.DB_USER_NAME,
        password: process.env.DB_USER_PASSWORD,
        database: process.env.DB_NAME,
        dropSchema: false,
        synchronize: true,
        logging: true,
        entities: [
          'dist/apps/backend/api/src/**/*.entity{.ts, .js}'
        ],
        migrations: [
          'dist/apps/backend/api/migrations/*{.ts, .js}'
        ],
        cli: {
          'migrationsDir': 'db/migrations'
        }
      }
    };

• - setup all dependencies

yarn add graphql-type-json
yarn add @nestjs/passport passport @nestjs/jwt passport-jwt bcrypt
yarn add -D @types/passport-jwt

Nest authentification

• - add general lib of interfaces
• - create users module
• - create auth module
• - configure entities and migrations

Configurations files

tsconfig.entities.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../dist",
    "types": ["node"],
    "target": "es5",
    "module": "commonjs"
  },
  "exclude": ["src/**/*.spec.ts"],
  "include": ["src/app/**/*entity.ts"]
}

tsconfig.migrations.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../dist",
    "types": ["node"],
    "target": "es5",
    "module": "commonjs"
  },
  "exclude": ["src/**/*.spec.ts"],
  "include": ["src/migrations/**/*.ts"]
}

scripts:

"backend:api:entities": "node_modules/.bin/tsc --project apps/backend/api/tsconfig.entities.json",
"backend:api:migrations:run": "node_modules/.bin/tsc --project apps/backend/api/tsconfig.migrations.json && node_modules/.bin/ts-node node_modules/.bin/typeorm migration:run -t=false",
"backend:api:migration:create": "node_modules/.bin/ts-node node_modules/.bin/typeorm migration:create -n",

• - generate migration for test user
  generator bcrypt

• - test features

configure Data scalar

• css style guide

• scss style guide

• angular style guide

• - add general styles

• - add ability for reassigning styles inside different applications separately

• - add ability to use general and reassigned styles for libs

• - connect different frameworks

• - add ability for customization frameworks on the application layer/scope

$ yarn add @angular/material @angular/cdk @angular/animations
$ yarn add bootstrap@next
$ ng add @ng-bootstrap/ng-bootstrap 
$ ng add @ng-bootstrap/ng-bootstrap --project frontend-admin

• Theming material

• - создать abstract-storage.interface.ts
• - создать local-storage.interface.ts
• - создать session-storage.interface.ts
• - создать cookie-storage.interface.ts
• - создать memory-storage.interface.ts
• - создать cookie-service.interface.ts, cookie-service-option.interface.ts
• - собрать все в общий storage-options.interface.ts
• - добавить новую utils библиотеку storage
• - сделать:
  * base-cookie.service.ts
  * документация по NGX Cookie Service
  * base-cookie.storage.ts
  * base-local.storage.ts
  * base-memory.storage.ts
  * base-session.storage.ts
• - добавить storage.util.ts

На данном этапе необходимо выполнить следующее:

• - добавить комментарии к файлам graphql
• - добавить генерацию документации для приложений
• - настройка compodoc | Nx документация
• - решить проблему нескольких приложений и README.md в корне репозитория
• - настроить скрипты
• - добавить документацию на github page
• - настроить экшен для автогенерации документации

name: Generate documentation
on:
 # Triggers the workflow on push or pull request events but only for the master branch
 push:
   branches: [ master ]
 pull_request:
   branches: [ master ]
 # Allows you to run this workflow manually from the Actions tab
 workflow_dispatch:

jobs:
 build:
   runs-on: ubuntu-latest
   steps:
     - 
       name: Copy branch [master]
       uses: actions/checkout@v2
     - 
       name: Install NodeJs
       uses: actions/setup-node@v2
       with:
         node-version: '14'
     - 
       name: Install dependencies
       run: npm install      
     - 
       name: Run compodoc
       run: npx nx affected --all --target=compodoc    
     - 
       name: Deploy to GitHub Pages
       if: success()
       uses: crazy-max/ghaction-github-pages@v2
       with:
         target_branch: gh-pages
         build_dir: docs
       env:
         GITHUB_TOKEN: ${{ secrets.ACTION_GH_PAGE }}

• - connect support Nest applications

ng add @nrwl/nest

• - init BE api

 ng g @nrwl/nest:app backend/api --frontendProject=frontend-client

• - add proxy to admin-app

• - add tags

• - add documentation
• - update compodoc

• - установить зависимости

ng add @nguniversal/express-engine

• - отрефакторить, добавить app.browser.module.ts
• - поправить main.browser.ts main.server.ts
• - привести в порядок server.ts
• - внести изменения в angular.json
• - внести изменения в настройки компилятора tsconfig.server.json tsconfig.app.json
• - добавить скрипты package.json

"frontend-client:ssr:build": "ng build frontend-client --prod && ng run frontend-client:server:production",
"frontend-client:ssr:serve": "node dist/frontend-client/server/main.js",

Initial step

commit convention

• - initialization Nx ws

creating Nx workspace | Nx docs

  npx create-nx-workspace --preset=angular

• - change npm to yarn
• - initialization github repo
• - configure templates issues

• - add dependencies
  GraphQL docs:

yarn add @nestjs/graphql apollo-server-express graphql-tools graphql

• - set up project configuration and check it
• - connect playground

На данном этапе необходимо выполнить следующее:

• - подключить devtools
• - создать библиотеку для store

$ nx generate @nrwl/angular:lib frontend-client/data-access/store
$ rename root-store.module.ts

• - добавить основной стор

• - подключить router store

• - определить правила именования экшенов

• - сгенерировать библиотеку стора Users и настроить ее теги

nx generate @nrwl/angular:lib frontend/shared/data-access/user-store
ng g @nrwl/angular:ngrx user --module=libs/frontend/shared/data-access/user-store/src/lib/user-store.module.ts

• - добавить работу с apollo-angular

$ yarn add  apollo-angular @apollo/client

• - добавить в environment - путь к graphql
• - написать actions
• - написать state
• - написать reducer
• - написать selectors
• - написать effects
• - написать facade