Web Components & Angular

Build with 💜 with Design System

Web-components with Angular & NestJS starter for enterprise-grade full-stack projects, built under a clean architecture that helps to scale and maintain a fast workflow.

🚀 Quick Start

npm start

Or in two separate commands :

npm run dev

npm run start:server

🌟 Features

Client

• Strict mode
• Lazy loading
• Smart and pure components pattern
• Self-contained components and encapsulated modules
• Components types (e.g. component, features)
• Amazing directory structure
• Unit tests with Jest instead of Karma & Jasmine
• Dark mode
• Migration from TSLint to ESLint
• GitHub Actions workflows for unit tests and build

Server

• Smart Logging (human-readable or JSON if console is not interactive)
• Proxy
• Auth ready

🛠️ Make some initial tweaks

• Change application title:

  • Go to apps/client/src/index.html and inside the title tag, replace "AngularNestjsStarter" with your app name.\
  • Go to apps/client/src/app/app.component.ts and change the property appName

• Change your favicon:

  Go to apps/client/src and replace the current favicon.ico

• Start hacking:

  • Go to libs/features/home/src/lib/home.component.html and replace content with your own !

• Enable auth:

  • Go to apps/server/src/main.ts and uncomment
  • Go to apps/server/src/app/app.module.ts and uncomment

For more details about web-components here are the Cookbook 📖

Environement variables

Variable	Default value
PORT	3000
OIDC_CLIENT_ID
CLIENT_SECRET
SESSION_SECRET	Generated uiid
FFDC	https://api.fusionfabric.cloud
OIDC_ISSUER	https://api.fusionfabric.cloud/login/v1/sandbox
OIDC_SCOPES	openid profile
OIDC_ORIGIN	http://localhost:3000

Duplicate the .env.template and rename it to .env 👌🏼

🧙‍♂️ Commands

Command	Description
nx	See available commands
dev	Builds client in watch mode
start:server	Builds the server in watch mode
start	Builds the client and then starts the server in watch mode
build:prod	Builds both client and server in production mode
test:cov	Run test and outptus coverage

Below are some more advanced commands that might speed up your development flow:

Generate a new features

Run ng g @nrwl/angular:lib my-feature --directory=features --simpleModuleName to generate a features library.

Generate a new cdk

The Component Dev Kit (CDK) is a set of components shared accross you project.

Start by creating your cdk lib by running ng g @nrwl/angular:lib foo --directory=cdk --simpleModuleName.

And then run ng g component foo --project=cdk-foo --flat to generate a new component.

Generate a library

Run ng g @nrwl/angular:lib my-lib to generate a library.

You can also use any of the plugins above to generate libraries as well.

Libraries are shareable across libraries and applications. They can be imported from @finastra/mylib.

Running unit tests

Run npm t to execute the unit tests via Jest.

Run npm run test:cov to execute the unit tests and output coverage.

Run nx affected:test to execute the unit tests affected by a change.

Understand your workspace

Run nx dep-graph to see a diagram of the dependencies of your projects.

Further help

• Finastra's Developer Portal
• Finastra's Design System
• Angular Documentation
• NestJS Documentation
• Nx Documentation