Playbook
    1.
    Install global Prerequisites

Install

Install Global Packages

1
yarn global remove lerna
2
yarn global remove commitizen
3
yarn global remove @angular/cli
4
yarn global remove @nrwl/cli
5
yarn global remove @nestjs/cli
6
yarn global remove bloomrpc-mock
7
8
yarn global add lerna
9
yarn global add commitizen
10
yarn global add @angular/cli
11
yarn global add @nrwl/cli
12
yarn global add @nestjs/cli
13
yarn global add bloomrpc-mock
14
15
16
17
# verify globally installed packages
18
yarn global list
19
# find out which packages need to be updated. Options: `--latest`
20
yarn global upgrade-interactive
21
# set scss as default css processor
22
ng config -g defaults.style=scss
23
ng config -g [email protected]/angular:component.style scss
24
ng config -g cli.packageManager yarn
25
# (optional) set scss as default style for ngx-formly
26
ng config -g [email protected]/schematics:component.style scss
27
# check your global defaults
28
ng config -g
29
# (optional) how to find reverse dependencies for a package?
30
yarn why jasmine-marbles
Copied!

Install Chrome Extensions

Scaffold Project

steps below are for setting up a new project from the scratch.
for nx help yarn run help
Explicitly Passing Arguments to Angular CLI
nx/ng commands now accept a delimiter to distinguish the end of options for Nx and the beginning of options to Angular CLI with a (like npm run) according to Guideline 10 of POSIX.2 utility syntax guidelines.
yarn affected -- --target lint --uncommitted --parallel -- --fix

Create Workspace

1
ng new yeti -c=@nrwl/workspace --preset=empty --style=scss --npm-scope=yeti --app-name=yeti -v
2
3
cd yeti
4
5
# set yarn2 for project
6
# yarn set version berry
7
8
# make sure we are up-to-date
9
ng update --all --allow-dirty --force
10
# also update versions in package.json
11
yarn upgrade-interactive --latest
12
13
# add nx plugins (schematics)
14
# you can add more nrwl-nx plugins to your workspace as needed
15
ng add @nrwl/angular --defaults
16
ng add @nrwl/nest
17
ng add @xmlking/nxp-ddd
18
19
# Set workspace defaults
20
ng config cli.packageManager yarn
21
ng config [email protected]/angular:component.style scss
22
ng config [email protected]/angular:component.prefix yeti
23
ng config [email protected]/angular:component.displayBlock true # optional, default `inline`
24
ng config [email protected]/angular:component.changeDetection OnPush
25
26
TODO: move assets and styles to shated
27
https://github.com/nrwl/nx-examples/tree/master/libs/shared # assets
28
https://github.com/LayZeeDK/ngx-nrwl-airlines-workspace/tree/master/libs/shared # Env
29
30
# generate webapp app
31
# use fullTemplateTypeCheck or strictTemplates
32
# ng g @nrwl/angular:app yeti-web-app --routing --style=scss --strict=true --tags="domain:yeti,type:app,platform:web"
33
ng g @xmlking/nxp-ddd:application yeti # optional flags: --platform <web/mobile/desktop/node>
34
35
# NOTE: Remove `"types": []` from apps/webapp/tsconfig.app.json to allow global types. ???
36
37
# generate api app with nestjs
38
ng g @nrwl/nest:app yeti-api --frontend-project=yeti-app --linter=eslint --tags="domain:yeti,type:api,platform:node"
Copied!

Dependencies

adding 3rd party modules/libs
1
cd yeti
2
#---------------------------
3
# Add i18n
4
ng add @angular/localize
5
#---------------------------
6
# Add PWA
7
ng add @angular/[email protected] --project webapp
8
#---------------------------
9
# Add universal for SSR
10
ng add @nguniversal/express-engine --clientProject webapp
11
#---------------------------
12
# `ng deploy`
13
# Add architect for deploying webapp
14
# ng add [provider] [angular-cli-ghpages, @angular/fire, @zeit/ng-deploy, @azure/ng-deploy, @netlify-builder/deploy]
15
# gh-pages deployment
16
# ng add angular-cli-ghpages
17
# firebase deploy
18
# https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md
19
ng add @angular/fire # Note: add this, only after adding `@nguniversal/express-engine`
20
# (optional) Add architect for npm release
21
ng add ngx-deploy-npm
22
#---------------------------
23
# Add ngx-semantic-version (http://d-koppenhagen.de/blog/2019-11-ngx-semantic-version)
24
ng add ngx-semantic-version
25
#---------------------------
26
# Add nebular
27
ng add @nebular/theme
28
yarn add @nebular/auth
29
yarn add @nebular/security
30
yarn add -D @fortawesome/fontawesome-free
31
#---------------------------------
32
33
#---------------------------------
34
# compo docs
35
ng add @twittwer/compodoc
36
# adds a `compodoc` target to the specified project in your `angular.json`
37
ng g @twittwer/compodoc:config <project> [options]
38
ng g @twittwer/compodoc:config webapp --workspaceDocs
39
# Generate your docs:
40
ng run <project>:compodoc
41
ng run webapp:compodoc
42
#---------------------------------
43
44
# Add ngx-markdown for SSG(Static Site Generator) and Content Management
45
ng add ngx-markdown
46
yarn add prismjs
47
#---------------------------
48
# Add Flex-Layout
49
yarn add @angular/flex-layout
50
#---------------------------
51
# (optional) Add in-memory-web-api
52
yarn add angular-in-memory-web-api
53
#---------------------------------
54
# Add NGXS manually (prefered)
55
# We are using NGXS for State Management and [@rx-angular/template](https://github.com/rx-angular/rx-angular/blob/master/libs/template/README.md) for zoneless Rendering System
56
yarn add @ngxs/devtools-plugin @ngxs/{store,router-plugin,form-plugin,storage-plugin,devtools-plugin}
57
# (optional) extra ngxs plugins
58
yarn add @ngxs-labs/immer-adapter
59
yarn add @ngxs-labs/select-snapshot
60
yarn add immer
61
# add `Push Pipe` & `Let Directive` Rendering System
62
yarn add @rx-angular/template
63
#---------------------------------
64
# (optional) Add formly
65
ng add @ngx-formly/schematics --ui-theme=material
66
#---------------------------------
67
# (optional) Add Filepond
68
yarn add ngx-filepond \
69
filepond-plugin-file-encode \
70
filepond-plugin-file-validate-size \
71
filepond-plugin-file-validate-type \
72
filepond-plugin-image-crop \
73
filepond-plugin-image-preview
74
#---------------------------------
75
# Add @UntilDestroy() to auto unsubscribe rxjs
76
yarn add @ngneat/until-destroy
77
#---------------------------------
78
# Add gRPC
79
yarn add google-protobuf
80
yarn add -D @types/google-protobuf
81
yarn add grpc-web
82
yarn add -O grpc-tools
83
# to generate TS interfaces from proto
84
yarn add -O ts-proto
85
yarn add -O grpc_tools_node_protoc_ts
86
#---------------------------------
87
# for metagen CLI tool (node tools/scripts/metagen.mjs)
88
yarn add -O parse-md
89
90
# (optional) Add Socket.io
91
yarn add socket.io-client
92
yarn add -D @types/socket.io-client
93
94
#---------------------------------
95
ng add @ngneat/dialog
96
#---------------------------------
97
98
#---------------------------------
99
# add Convoyr plugins
100
# Enriching HTTP clients with capabilities related to security, performance or resilience
101
yarn add @convoyr/core
102
yarn add @convoyr/plugin-auth
103
yarn add @convoyr/plugin-cache
104
yarn add @convoyr/plugin-retry
105
#---------------------------------
106
107
# Add miscellaneous
108
yarn add ngx-perfect-scrollbar smooth-scrollbar ngx-page-scroll screenfull
109
110
# Add Dev Tools
111
# tools you needed in CI/CD inv
112
yarn add -D loaders.css
113
yarn add -D api-ai-javascript
114
yarn add -D codecov
115
yarn add -D rimraf
116
117
# install without saving
118
yarn add trianglify --no-save --no-lock
119
120
#---------------------------------
121
## bundle analyzer
122
# yarn add -O webpack-bundle-analyzer
123
ng add @ngx-builders/analyze
124
yarn global add source-map-explore # will be removed later
125
# usage
126
ng run [YOUR_PROJECT_NAME]:analyze --no-build
127
128
# old way
129
yarn add source-map-explore
130
ng build --prod --sourceMap
131
npx source-map-explore dist/**/main*2015*js
132
#---------------------------------
133
134
### Add Optional Tools
135
# tools you only needed on Dev laptop
136
yarn add -O lint-staged
137
# alternative builder for nestjs (optional)
138
yarn add -D ts-node-builder
139
140
yarn workspace @yeti/api add @xmlking/jwks-rsa @nestjsx/crud @nestjs/{terminus,cqrs,passport,swagger,microservices,typeorm}
141
yarn workspace @yeti/api add nodemon supertest -O
142
yarn workspace @yeti/api add @types/{helmet,passport,passport-jwt,supertest,nodemailer} -D
143
144
yarn workspace @yeti/api add @grpc/proto-loader
145
yarn workspace @yeti/api add grpc
146
147
yarn workspace @yeti/tools add cpx --dev
Copied!
update 3rd party modules/schematics use --allow-dirty --next --force` flags as needed
1
nx migrate latest
2
# ng update --next if needed
3
ng update @angular/core
4
ng update @angular/cli
5
ng update @angular/material
6
ng update @angular/pwa
7
ng update @ngx-formly/schematics --ui-theme=material
8
ng update @nrwl/workspace
9
ng update @nrwl/angular
10
ng update @nrwl/nest
11
ng update @nguniversal/express-engine
Copied!

Tasks

Install Deps

1
yarn
Copied!

Update Deps

1
ng update
2
ng update @angular/cli
3
ng update @angular/core
4
ng update --all
5
# interactively update non-ng modules, with `--latest`
6
# this will also update package.json file with information of the new versions of the updated packages
7
yarn upgrade-interactive --latest
Copied!

Build

1
# Create a translation source file
2
ng xi18n --output-path apps/webapp/src/local
3
4
ng build api
5
# start with hugh memory if ndded
6
NODE_OPTIONS=--max-old-space-size=4096 ng build api --prod
7
NODE_OPTIONS=--max-old-space-size=4096 ng build webapp --prod
Copied!

Run

1
# dev run
2
ng serve
3
# run mock mode
4
ng serve -c=mock
5
# use proxy (if you have CORS disabled backend API)
6
ng serve -c=mock --proxy-config proxy.conf.js
7
# to bind to host IP, to demo from laptop
8
ng s --host
9
# ES2015 support: Set tsconfig.json target value as "es2015" and use --aot
10
ng serve -c=mock
11
# run prod mode
12
ng serve -c=prod
13
14
# build and run web
15
docker-compose up --build web
16
# run web
17
docker-compose up web
Copied!

Uint Test

1
ng test <module>
Copied!

E2E Test

1
ng e2e webapp
2
# headless tests (CI)
3
ng e2e webapp --headless
4
ng e2e webapp --headless --browser chrome
5
# Production target
6
ng e2e webapp --prod
7
# Watching for changes
8
ng e2e webapp --watch
Copied!

Serve from dist

use this to test service-workers
1
# 1st terminal - Start the build in (optional) watch mode
2
ng build --prod --watch
3
# 2nd in terminal - Start the static web server. this will use config from bs-config.json
4
npx lite-server
Copied!

Check

check if you on current versions.
1
node -v
2
yarn -v
3
lerna -v
4
ng -v
5
npx nx --version
6
nest info
7
# list workspaces
8
yarn workspaces info
Copied!

IntelliJ/WebStorm

Right click on apps/webapp/src/styles in project vie --> Make Directory as --> Resources Root. Right click on apps/webapp/src in project vie --> Make Directory as --> Resources Root. Right click on docs in project view --> Make Directory as --> Excluded. Right click on dist in project view --> Make Directory as --> Excluded. Right click on coverage in project view --> Make Directory as --> Excluded.

Reference

Last modified 9mo ago