Do-it-yourself step-by-step instructions to create this project structure from scratch.
Software | Version | Optional |
---|---|---|
Node | v10.0.0 | |
NPM | v6.0.0 | |
Angular CLI | v6.0.0 | |
@nrwl/schematics | v1.0.2 |
# install or Update Node with brew or NVM
brew update
brew install node
#brew upgrade node
# upgrade npm to at least 5.8.0
npm install -g npm
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 @nrwl/schematics
npm install -g @nrwl/schematics
npm install -g @angular/cli
# 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 set defaults.styleExt scss
steps below are for setting up a new project from the scratch.
create-nx-workspace nx-starter-kit --bazel
cd nx-starter-kit
npm install
adding 3rd party modules/libs
cd nx-starter-kit
npm i @angular/flex-layout @angular/material @angular/cdk @angular/material-moment-adapter hammerjs web-animations-js \
ngx-perfect-scrollbar screenfull angular2-moment \
@swimlane/ngx-datatable @swimlane/ngx-charts angular-in-memory-web-api angular-oauth2-oidc
# install without saving
npm install trianglify --no-save --no-lock
npm i -D loaders.css @types/hammerjs standard-version
# temp workaround
npm i -D @angular/http
npm i -D ng-packagr
npm i -D api-ai-javascript
npm i d3
npm i nvd3
npm i -D @types/nvd3
npm i -D @types/d3
Add
--dry-run
option to following commands to see which artifacts will be created, without actually creating them.
# generate default app
ng g app default --routing --style=scss --service-worker
# add `core` module to `default` app
ng g module core --app=default --module=app
# add shared services for `core` Module
ng g service core/services/InMemoryData --app=default --module=core --spec=false
ng g service core/services/PageTitle/PageTitle --app=default --module=core
ng g service core/services/serviceWorker/serviceWorker --app=default --module=core --dry-run
# generate `Lazy-loaded Feature Modules`
ng g lib home --routing --lazy --parent-module=apps/default/src/app/app.module.ts --tags=layout,entry-module
ng g lib dashboard --routing --lazy --parent-module=apps/default/src/app/app.module.ts --tags=layout,entry-module
ng g lib NotFound --routing --lazy --parent-module=apps/default/src/app/app.module.ts --tags=entry-module
ng g lib experiments --routing --lazy --parent-module=libs/dashboard/src/dashboard.module.ts --tags=child-module
ng g lib widgets --routing --lazy --parent-module=libs/dashboard/src/dashboard.module.ts --tags=child-module
ng g lib crud --routing --lazy --parent-module=libs/dashboard/src/dashboard.module.ts --tags=child-module
ng g lib material --spec=false --tags=shared-module --dry-run
ng g lib animations --nomodule -tags=utils --dry-run
ng g lib Tree --nomodule --tags=utils --dry-run
ng g lib utils --nomodule --tags=utils --dry-run
ng g lib shared --tags=shared-module # add `shared` module which will encapsulate angular and 3rd party modules, needed for all `Lazy-loaded Feature Modules`
# generate containers, components for `shared` Module
ng g service services/entity/entity --app=shared --module=shared
ng g directive directives/min --app=shared --module=shared --export=true
ng g component components/entityTable --app=shared --module=shared --export=true
ng g component containers/entity --app=shared --module=shared --skip-import
ng g component containers/entityForm --app=shared --module=shared --skip-import
# generate containers for `NotFound` Module
ng g component containers/NotFound --app=not-found
### generate `Reusable lib Modules`
# generate components for `AppConfirm` Module
ng g lib AppConfirm --tags=public-module --dry-run
ng g component AppConfirm --app=app-confirm --flat --dry-run
ng g service AppConfirm --app=app-confirm --module=app-confirm --spec=false --dry-run
# generate components for `fullscreen` Module
ng g lib Fullscreen --tags=public-module --dry-run
ng g component fullscreen --app=fullscreen --flat --dry-run
# generate components for `Draggable` Module
ng g lib Draggable --tags=public-module
ng g directive directives/Draggable --module=draggable --export=true --dry-run
# generate components for `Breadcrumbs` Module
ng g lib Breadcrumbs --tags=public-module
ng g component breadcrumbs --app=breadcrumbs --flat --dry-run
ng g service breadcrumbs --app=breadcrumbs --module=breadcrumbs --dry-run
# generate components for `ScrollToTop` Module
ng g lib ScrollToTop --tags=public-module
ng g component ScrollToTop --app=scroll-to-top --flat --dry-run
ng g lib scrollbar --tags=public-module
# generate components for `ContextMenu` Module
ng g lib ContextMenu --tags=public-module
ng g component ContextMenu --app=context-menu --flat --dry-run
ng g directive ContextMenuTrigger --app=context-menu --flat --dry-run
# generate components, services for `ThemePicker` Module
ng g lib ThemePicker --tags=public-module
ng g component ThemePicker --app=theme-picker --flat --dry-run
ng g service ThemeStorage --app=theme-picker --module=theme-picker --dry-run
ng g service StyleManager --app=theme-picker --module=theme-picker --dry-run
# generate components for `Quickpanel` Module
ng g lib Quickpanel --tags=private-module
ng g component Quickpanel --app=quickpanel --flat --dry-run
# generate components for `NxPipes` Module
ng g lib NxPipes --tags=public-module
ng g pipe truncate/Characters --app=nx-pipes --dry-run
ng g pipe truncate/Words --app=nx-pipes --dry-run
# generate components for `LoadingOverlay` Module
ng g lib LoadingOverlay --tags=public-module
ng g component LoadingOverlay --app=loading-overlay --flat --dry-run
# generate components for `svgViewer` Module
ng g lib svgViewer --tags=public-module
ng g component svgViewer --app=svg-viewer --flat --dry-run
# generate components for `chatBot` Module
ng g lib chatBot --tags=public-module --dry-run
ng g component components/chatBot --app=chat-bot --dry-run
# generate components for `socketioPlugin` Module
ng g lib socketioPlugin --tags=public-module --dry-run
ng g service socketioSubject --app=socketio-plugin --dry-run
# generate components for `jsonDiff` Module
ng g lib jsonDiff --tags=public-module
ng g component jsonDiff --app=json-diff --flat --dry-run
ng g component jsonDiffTree --app=json-diff --flat --dry-run
# generate components for `toolbar` Module
ng g lib toolbar --tags=private-module --dry-run
ng g component toolbar --app=toolbar --flat --dry-run
ng g component components/search --app=toolbar --dry-run
ng g component components/searchBar --app=toolbar
ng g component components/Notifications --app=toolbar
ng g component components/UserMenu --app=toolbar
ng g directive components/ClickOutside/ClickOutside --app=toolbar --dry-run
# generate components for `sidenav` Module
ng g lib sidenav --tags=private-module --dry-run
ng g component sidenav --app=sidenav --flat --dry-run
ng g component components/sidenavItem --app=sidenav --dry-run
ng g directive IconSidenav --app=sidenav --module=sidenav --dry-run
# generate components for `auth` Module
ng g lib auth --tags=private-module,core-module --dry-run
ng g component components/login --app=auth
# generate components for `auth` Module
ng g lib navigator --tags=private-module,core-module --dry-run
ng g service services/menu --app=navigator --module=navigator --dry-run
ng g class models/menuItem --app=navigator --type=model --dry-run
ng g class state/menu --app=navigator --type=state --dry-run
# generate containers, components for `home` Module
ng g component components/header --app=home
ng g component containers/homeLayout --app=home
ng g component containers/landing --app=home
ng g component containers/blog --app=home
ng g component containers/about --app=home
# generate containers, components for `dashboard` Module
ng g component components/rainbow --app=dashboard --dry-run
ng g component containers/dashboardLayout --app=dashboard --dry-run
ng g component containers/overview --app=dashboard --dry-run
# generate containers, components for `widgets` Module
ng g component containers/wizdash --app=widgets --dry-run
# generate containers, components for `crud` Module
ng g component containers/accounts --app=crud --module=crud --dry-run
# generate containers, components for `experiments` Module
ng g component containers/experimentsLayout --app=experiments --dry-run
ng g component containers/experiments --app=experiments --dry-run
ng g component components/hammerCard --app=experiments --dry-run
ng g directive components/Hammertime/Hammertime --app=experiments --dry-run
ng g component containers/ContextMenu --app=experiments --dry-run
# scaffolding ngrx for root module i.e., app.module.ts
ng g ngrx app --app=default --module=apps/default/src/app/app.module.ts --only-empty-root
# add `account` state for `dashboard` Feature Module
ng g ngrx account --directory=state/account --app=dashboard --module=libs/dashboard/src/dashboard.module.ts
npm install
cp .env.example .env
ng test --browser=ChromeHeadless
# build project
ng build --app=default --prod -oh=media
# dev run
ng s --extract-css --preserve-symlinks -o
# run mock mode
ng s -e mock --extract-css --preserve-symlinks
# use proxy (if you have CORS disabled backend API)
ng s -e mock --extract-css --preserve-symlinks --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 s -e mock --extract-css --preserve-symlinks --aot -o
# run prod mode
ng s -e 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=default -oh=media --watch
# 2nd terminal - Start the web server (start server on port 4200)
npx lite-server --baseDir="dist/apps/default"
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
ng build --app=default --prod -oh=media -e mock --base-href /is360-nx/
# push gh-pages
npx ngh --dir dist/apps/default
npx standard-version
"release": "standard-version && git push — follow-tags origin master && npm publish"
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