Do-it-yourself step-by-step instructions to create this project structure from scratch.
you need following tools. versions listed here are minimal versions tested.
Software | Version | Optional |
---|---|---|
Node | v10.11.0 | |
NPM | v6.4.0 | |
Angular CLI | v6.2.4 | |
@nrwl/schematics | v6.4.0 | |
@nestjs/cli | v5.5.0 |
# install or Update Node with brew or NVM
brew update
brew install node
#brew upgrade node
# upgrade npm to at least 6.x.x
npm install -g npm
Install redux-devtools for Chrome (optional)
follow instructions here to install kubernetes toolchain:
- Docker for Mac (edge version)
- Helm (optional)
- kubectx (optional)
For Mac, install via Brew. Instructions
brew install bazel
bazel version
# you can upgrade to a newer version of Bazel with:
brew upgrade bazel
# if needed
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -license
bazel clean --expunge
npm remove -g @angular/cli
npm remove -g @nrwl/schematics
npm remove -g @nestjs/cli
npm remove -g semantic-release-cli
npm remove -g commitizen
npm install -g @angular/cli
npm install -g @nrwl/schematics
npm install -g @nestjs/cli
npm install -g semantic-release-cli
npm install -g commitizen
# verify globally installed packages
npm list -g --depth=0
# find out which packages need to be updated
npm outdated -g --depth=0
# set scss as default css processor
ng config -g schematics.@nrwl/schematics:component.styleext scss
ng config -g cli.packageManager npm
@ set jest as default TestRunner
ng config -g schematics.@nrwl/schematics:library.unitTestRunner jest
# check your global defaults
more cat ~/.angular-config.json
# show dependency tree for specified package.
npm ls jasmine-marbles
steps below are for setting up a new project from the scratch.
for nx help npm run help
# create workspace Ref: https://nrwl.io/nx/guide-nx-workspace
create-nx-workspace ngx-starter-kit --prefix=ngx
# or
ng new ngx-starter-kit --collection=@nrwl/schematics --prefix=ngx --verbose
# or if you want *bazel* builds instead of *webpack*
ng new ngx-starter-kit --collection=@nrwl/schematics --prefix=ngx --bazel --verbose
cd ngx-starter-kit
> remove all ngrx NPM pagages from package.json
# setup your workspace to run tests with jest.
ng generate jest
# Ref: https://nrwl.io/nx/unit-testing-with-jest
# you may have to manually remove karma files (karma.conf.js) and dependencies from package.json
# make sure we are up-to-date
ng update
# and update as suggested. e.g.,
ng update @nrwl/schematics
ng update --all
# also run `npm outdated` and update versions in package.json then run `npm install`
# generate webapp app
ng g app webapp --routing --style=scss --prefix=ngx --unit-test-runner=jest --tags=app-module
# generate api app
ng g node-app api --framework=express --unit-test-runner=jest --tags=api-module --dry-run
adding 3rd party modules/libs
cd ngx-starter-kit
# Add PWA
ng add @angular/pwa --project webapp
# Add Material
# Ref: https://material.angular.io/guide/schematics
# Ref: https://material.angular.io/guide/getting-started
ng add @angular/material
npm i hammerjs
npm i -D @types/hammerjs
npm i moment ngx-moment
npm i @angular/material-moment-adapter
# Add Flex-Layout
npm i @angular/flex-layout@next
# Add in-memory-web-api
npm i angular-in-memory-web-api
# Add oauth2-oidc
npm i angular-oauth2-oidc
# Add ngxs
npm i @ngxs/devtools-plugin @ngxs/store @ngxs/router-plugin
# Add formly
ng add @ngx-formly/schematics --ui-theme=material
# Add Filepond
npm i ngx-filepond \
filepond-plugin-file-encode \
filepond-plugin-file-validate-size \
filepond-plugin-file-validate-type \
filepond-plugin-image-crop \
filepond-plugin-image-preview
# Add Socket.io
npm i socket.io-client
npm i -D @types/socket.io-client
# tslint rules
npm i -D rxjs-tslint-rules
# Add miscellaneous
npm i ngx-perfect-scrollbar smooth-scrollbar ngx-page-scroll screenfull immutable
# Add Dev Tools
npm i -D standard-version
npm i -D angular-cli-ghpages
npm i -D @compodoc/compodoc
npm i -D loaders.css
npm i -D api-ai-javascript
# temp workaround
npm i -D @angular/http
# install without saving
npm install trianglify --no-save --no-lock
# Do you want to use tslint and prettier without conflicts?
npm i -D tslint-config-prettier
# to check any conflects
npx tslint-config-prettier-check ./tslint.json
# install testCafe for e2e testing and remove protractor
npm i -D testcafe testcafe-angular-selectors testcafe-live
# for CI/CD automation and release
# first time semantic-release setup
semantic-release-cli setup
npm i -D semantic-release @semantic-release/{changelog,git,github,npm}
npm i -D commitizen cz-conventional-changelog
npm i -D @commitlint/{config-conventional,cli}
npm i -D husky@next
npm i -D lint-staged
Add
--dry-run
option to following commands to see which artifacts will be created, without actually creating them.
# generate `Lazy-loaded Feature Modules`
ng g lib home --routing --lazy --prefix=ngx --parent-module=apps/webapp/src/app/app.module.ts --unit-test-runner=jest --tags=layout,entry-module
ng g lib dashboard --routing --lazy --prefix=ngx --parent-module=apps/webapp/src/app/app.module.ts --unit-test-runner=jest --tags=layout,entry-module
ng g lib NotFound --routing --lazy --prefix=ngx --parent-module=apps/webapp/src/app/app.module.ts --unit-test-runner=jest --tags=entry-module
ng g lib experiments --routing --lazy --prefix=ngx --parent-module=libs/dashboard/src/lib/dashboard.module.ts --unit-test-runner=jest --tags=child-module
ng g lib widgets --routing --lazy --prefix=ngx --parent-module=libs/dashboard/src/lib/dashboard.module.ts --unit-test-runner=jest --tags=child-module
ng g lib grid --routing --lazy --prefix=ngx --parent-module=libs/dashboard/src/lib/dashboard.module.ts --unit-test-runner=jest --tags=child-module
ng g lib animations --module false -tags=utils --unit-test-runner=jest --dry-run
ng g lib Tree --module false --publishable=true --tags=utils --unit-test-runner=jest --dry-run
ng g lib utils --module false --tags=utils --unit-test-runner=jest --dry-run
# add `core` module which will be only inported into root/app module.
ng g lib core --prefix=ngx --tags=core-module --unit-test-runner=jest --dry-run
# add global services for `core` Module
ng g service services/InMemoryData --project=core --spec=false --dry-run
ng g service services/PageTitle --project=core --dry-run
ng g service services/ServiceWorker --project=core --dry-run
ng g service services/MediaQuery --project=core --dry-run
ng g service services/DeepLink --project=core --dry-run
# `material` module to encapulate material libs which is impoted into any `Lazy-loaded Feature Modules` that need material components
ng g lib material --spec=false --tags=shared-module --unit-test-runner=jest --dry-run
# add `shared` module which will encapsulate angular and 3rd party modules, needed for all `Lazy-loaded Feature Modules`
ng g lib shared --prefix=ngx --tags=shared-module --unit-test-runner=jest
# generate containers, components for `shared` Module
ng g service containers/entity/entity --project=shared
ng g directive directives/min --project=shared --export=true
ng g directive components/ClickOutside --project=shared --export=true
ng g component components/entityTable --project=shared --export=true
ng g component containers/entity --project=shared --skip-import
ng g component containers/entityForm --project=shared --skip-import
# generate containers for `NotFound` Module
ng g component containers/NotFound --project=not-found --dry-run
### generate `Reusable lib Modules`
# generate components for `AppConfirm` Module
ng g lib AppConfirm --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest --dry-run
ng g component AppConfirm --project=app-confirm --flat --dry-run
ng g service AppConfirm --project=app-confirm --spec=false --dry-run
# generate components for `Draggable` Module
ng g lib Draggable --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest
ng g directive directives/Draggable --project=draggable --export=true --dry-run
# generate components for `Breadcrumbs` Module
ng g lib Breadcrumbs --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest
ng g component breadcrumbs --project=breadcrumbs --flat --dry-run
ng g service breadcrumbs --project=breadcrumbs --dry-run
# generate components for `ScrollToTop` Module
ng g lib ScrollToTop --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest
ng g component ScrollToTop --project=scroll-to-top --flat --dry-run
ng g lib scrollbar --prefix=ngx --tags=public-module --publishable=true
# generate components for `ContextMenu` Module
ng g lib ContextMenu --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest
ng g component ContextMenu --project=context-menu --flat --dry-run
ng g directive ContextMenuTrigger --project=context-menu --flat --dry-run
# generate components, services for `ThemePicker` Module
ng g lib ThemePicker --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest
ng g component ThemePicker --project=theme-picker --flat --dry-run
ng g service ThemeStorage --project=theme-picker --dry-run
ng g service StyleManager --project=theme-picker --dry-run
# generate components for `Notifications` Module
ng g lib Notifications --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest --dry-run
ng g component notifications --project=notifications --flat --dry-run
ng g class notification --type=model --project=notifications --dry-run
ng g service notifications --project=notifications --dry-run
# generate components for `Quickpanel` Module
ng g lib Quickpanel --prefix=ngx --tags=private-module --unit-test-runner=jest
ng g component Quickpanel --project=quickpanel --flat --dry-run
# generate components for `NgxPipes` Module
ng g lib NgxPipes --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest
ng g pipe truncate/Characters --project=ngx-pipes --dry-run
ng g pipe truncate/Words --project=ngx-pipes --dry-run
# generate components for `LoadingOverlay` Module
ng g lib LoadingOverlay --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest
ng g component LoadingOverlay --project=loading-overlay --flat --dry-run
# generate components for `svgViewer` Module
ng g lib svgViewer --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest
ng g component svgViewer --project=svg-viewer --flat --dry-run
# generate components for `led` Module
ng g lib led --prefix=ngx --tags=public-module --publishable=true
ng g component led --project=led --flat --dry-run
# generate components for `chatBox` Module
ng g lib chatBox --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest --dry-run
ng g component chatBox --project=chat-box --flat --dry-run
ng g component components/typingIndicator --project=chat-box --dry-run
ng g component components/chatCard --project=chat-box --dry-run
ng g component components/TextToSpeechPreferences --project=chat-box --dry-run
ng g service services/nlp --project=chat-box --dry-run
ng g service services/SpeechToText --project=chat-box --dry-run
ng g service services/TextToSpeech --project=chat-box --dry-run
ng g service services/chat --project=chat-box --dry-run
# generate components for `socketioPlugin` Module
ng g lib socketioPlugin --prefix=ngx --tags=public-module --publishable=true --spec=false --unit-test-runner=jest --dry-run
ng g service socketioSubject --project=socketio-plugin --dry-run
# generate components for `openTracing` Module
ng g lib openTracing --prefix=ngx --tags=public-module --publishable=true --spec=false --unit-test-runner=jest --dry-run
ng g service services/ZipkinTracing --project=open-tracing --dry-run
ng g interceptor interceptors/tracing --project=open-tracing --dry-run
# generate components for `jsonDiff` Module
ng g lib jsonDiff --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest
ng g component jsonDiff --project=json-diff --flat --dry-run
ng g component jsonDiffTree --project=json-diff --flat --dry-run
# generate components for `clap` Module
ng g lib clap --prefix=ngx --tags=public-module --spec=false --publishable=true --unit-test-runner=jest
ng g component clap --project=clap -s -t --spec=false --export --flat --dry-run
ng g component components/counterBubble --project=clap -s -t --spec=false --flat --dry-run
ng g component components/totalCounter --project=clap -s -t --spec=false --flat --dry-run
ng g component components/fab --project=clap -s -t --spec=false --flat --dry-run
# generate components for `toolbar` Module
ng g lib toolbar --prefix=ngx --tags=private-module --unit-test-runner=jest --dry-run
ng g component toolbar --project=toolbar --flat --dry-run
ng g component components/search --project=toolbar --dry-run
ng g component components/searchBar --project=toolbar
ng g component components/UserMenu --project=toolbar
ng g component components/FullscreenToggle --project=toolbar --dry-run
ng g component components/SidenavMobileToggle --project=toolbar --dry-run
ng g component components/QuickpanelToggle --project=toolbar --dry-run
# generate components for `sidenav` Module
ng g lib sidenav --prefix=ngx --tags=private-module --unit-test-runner=jest --dry-run
ng g component sidenav --project=sidenav --flat --dry-run
ng g component components/sidenavItem --project=sidenav --dry-run
ng g directive IconSidenav --project=sidenav --dry-run
# generate components for `auth` Module
ng g lib auth --prefix=ngx --tags=private-module,core-module --prefix=ngx --style=scss --unit-test-runner=jest --dry-run
ng g component components/login --project=auth --dry-run
# generate components for `navigator` Module
ng g lib navigator --prefix=ngx --tags=private-module,core-module --unit-test-runner=jest --dry-run
ng g service services/menu --project=navigator --dry-run
ng g class models/menuItem --project=navigator --type=model --dry-run
ng g class state/menu --project=navigator --type=state --dry-run
# generate containers, components for `home` Module
ng g component components/header --project=home
ng g component containers/homeLayout --project=home
ng g component containers/landing --project=home
ng g component containers/blog --project=home
ng g component containers/about --project=home
# generate containers, components for `dashboard` Module
ng g component components/rainbow --project=dashboard --dry-run
ng g component containers/dashboardLayout --project=dashboard --dry-run
ng g component containers/overview --project=dashboard --dry-run
# generate containers, components for `widgets` Module
ng g component containers/wizdash --project=widgets --dry-run
# generate containers, components for `grid` Module
ng g component containers/AccountsTable --project=grid --dry-run
ng g component components/AccountDetail --project=grid --dry-run
ng g component components/AccountEdit --project=grid --dry-run
ng g class models/account --type=model --project=grid --dry-run
ng g service services/account --project=grid --dry-run
ng g component containers/AccountsGridList --project=grid --dry-run
# generate containers, components for `experiments` Module
ng g component containers/animations --project=experiments --dry-run
ng g component containers/ContextMenu --project=experiments --dry-run
ng g component containers/FileUpload --project=experiments --dry-run
ng g component components/hammerCard --project=experiments --dry-run
ng g directive components/Hammertime/Hammertime --project=experiments --dry-run
ng g component containers/virtualScroll --project=experiments --dry-run
ng g component containers/StickyTable --project=experiments --dry-run
ng g component containers/clapButton --project=experiments -s -t --spec=false --dry-run
ng g component containers/knobDemo --project=experiments --dry-run
ng g component containers/ledDemo --project=experiments --dry-run
ng g component containers/ImageComp --project=experiments --dry-run
# generate components for `ImageComparison` Module
ng g lib ImageComparison --prefix=ngx --tags=public-module --spec=false --publishable=true --dry-run
ng g component ImageComparison --project=image-comparison --export --flat --dry-run
# generate workspace-schematic `store`
ng g workspace-schematic store
# run workspace-schematic `store`
# *** always delete ./dist folder when you change schematic implementation ***
npm run workspace-schematic store models/sumoDemo -- --project=grid --dry-run
npm install
cp .env.example .env
ng update
ng update @angular/cli
ng update @angular/core
ng update --all
# dev run
ng serve
# run mock mode
ng serve -c=mock
# use proxy (if you have CORS disabled backend API)
ng serve -c=mock --proxy-config proxy.conf.js
# to bind to host IP, to demo from laptop
ng s --host
# ES2015 support: Set tsconfig.json target value as "es2015" and use --aot
ng serve -c=mock --aot -o
# run prod mode
ng serve -c=prod
# build and run web
docker-compose up --build web
# run web
docker-compose up web
use this to test service-workers
# 1st terminal - Start the build
ng build --app=webapp -oh=media --watch
# 2nd terminal - Start the web server (start server on port 4200)
npx lite-server --baseDir="dist/apps/webapp"
generate docs
# generate docs
npx compodoc -p tsconfig.json -d docs
# serve docs
npx compodoc -s -d docs
deploy demo to gh-pages
# build for gh-pages
build:mock --base-href /ngx-starter-kit/
# push gh-pages
npx ngh --dir dist/apps/webapp
npm whoami
npx standard-version
"release": "standard-version && git push — follow-tags origin master && npm publish"
Analyzing bundle size
npm run bundle-report
check if you on current versions.
node -v
npm -v
ng -v
npx nx --version
The prod image serves the minified app (sources compiles with a minimal set of dependencies), via an Nginx server. It is self-contained, and can therefore be pushed to a Docker registry to be deployed somewhere else easily.
To start the container, use:
$ docker-compose up web # optional: --build, see below
Now open your browser at http://localhost:80
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.
- Nx and Angular CLI