ARCHIVE NOTE elements development is continued in https://github.com/rfprod/nx-ng-starter

Angular Elements NodeJS Widget Server Starter

Description

The project consists of a basic NodeJS server, and Angular client application.

NodeJS provides procedural API (without database), and serves client application static assets.

Client application consists of application core, and feature modules.

Each client application feature module can be built as a standalone widget based on custom elements (Angular Elements).

This widgets can be consumed by an arbitrary website, and can be interacted with using JavaScript API.

Deployment urls

Name	Url
NgElementsStarter	🔗#1 🔗#2
Balance element	🔗#1
Balance element (widget usage example)	🔗#1
Balance element (widget bootstrap script)	🔗#1
Catalogue element	🔗#1
Catalogue element (widget usage example)	🔗#1
Catalogue element (widget bootstrap script)	🔗#1
Orders element	🔗#1
Orders element (widget usage example)	🔗#1
Orders element (widget bootstrap script)	🔗#1
Passport element	🔗#1
Passport element (widget usage example)	🔗#1
Passport element (widget bootstrap script)	🔗#1
Compodoc documentation	🔗#1
Coverage report	🔗#1

Preferred package manager

• Yarn

Committing changes to repo

Using commitizen cli is mandatory, reference.

Provided all dependencies were installed, and this requirements are fulfilled cz-cli#conventional-commit-messages-as-a-global-utility this command must be used.

git cz

General project info

This project was generated with Angular CLI version 7.0.6.

Dependencies installation

To install global dependencies use command

npm run install:global

or

bash shell/install.sh global

To install project dependencies use command

npm run install:project

or

bash shell/install.sh project

or do

cd ./functions
npm i
cd ..
yarn install

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

To start the project in development mode use command

npm start

To run a specific client module check package.json commands that are prefixed with serve:, and serve::

npm run start:prod
npm run start:server

npm run serve:app
npm run serve:balance
npm run serve:catalog
npm run serve:orders
npm run serve:passport

Production server

Run npm run server

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

To build a specific widget check package.json commands that are prefixed with build::

npm run build:all:express
npm run build:all:firebase
npm run build:app:prod
npm run build:app:prod:firebase
npm run build:app:stats
npm run build:balance:prod
npm run build:balance:stats
npm run build:catalog:prod
npm run build:catalog:stats
npm run build:orders:prod
npm run build:orders:stats
npm run build:passport:prod
npm run build:passport:stats

Analyze bundle

To analyze a specific bundle check package.json commands that are prefixed with analyze::

npm run analyze:app
npm run analyze:balance
npm run analyze:catalog
npm run analyze:orders
npm run analyze:passport

Running unit tests

Run ng test to execute the unit tests via Jest.

For specific testing commands check package.json, commands prefixed with test::

npm run test:single-run
npm run test:single-run:report
npm run test:single-run:report-to-dist

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Cypress.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Documentation

Angular

Angular Elements

Angular Material

GitHub Actions

Firebase JS Reference