Nic. Christiansen Gruppen

This project powers a platform for Nic. Christiansen Gruppen to host a multitude of brands.

Current brands:

• https://www.bag.dk/
• https://www.bydauto.dk/
• https://www.changan.dk/
• https://www.ford.dk/
• https://www.honda.ee/
• https://www.honda.fi/~~~~
• https://www.honda.lt/
• https://www.honda.lv/
• https://www.hyundai.dk/
• https://www.nc.dk
• https://www.nc.dk/en
• https://www.ncgfleet.dk
• https://www.ncgleasing.dk
• https://www.terminalen.dk

This project was generated with Angular CLI using Nrwl Nx.

Build status

Name	Status
master

Getting Started

node version

Use node version 14 or higher

Install dependencies

change directory to project root folder and write pnpm install

Run the backend

Copy .envexample to .env and fill out the username and password

Run pnpm start:backend and keep it running.

Run a frontend client

Open new terminal/powershell etc. and run one of the commands below.

Default project configured in angular.json is hyundai.

Run pnpm start, which is a shortcut for ng serve hyundai

or pnpm start:hyundai, which is a shortcut for ng serve hyundai

or pnpm start:bag, which is a shortcut for ng serve bag

Have a look at package.json for other sites start commands.

What happens

1. The backend is using Nest.js to serve the BFF API layer on http://localhost:3000/api/static/index.html (swagger)
2. The backend makes requests to Umbraco running in Umbraco Cloud
3. The frontend proxies /api/* to the backend using webpack dev server
4. The frontend is served using Angular

Server-Side Rendering (SSR)

Testing

Run pnpm start:ssr to build and serve the Angular Universal bundles with the default project

Launch http://localhost:4000 to see the site.

What happens

1. Express.js runs a webserver (server.ts) which uses ngUniversalExpress to request a prerendered version of the app
   • On localhost Express.js will proxy /api/* to itself
2. Express provides a serverUrl to Angular which is set to http://localhost:${PORT} because Angular Universal can only issue HTTP requests on absolute URLs
3. Angular uses TransferHttpCacheModule from @nguniversal/common to automatically cache all HTTP requests
4. The client takes over when the server has pre-rendered the application and checks the transferred state

CI/CD setup

When code is pushed to the master branch, Azure DevOps will automatically build and push a package to the Azure Image Repository (Docker) and deploy that to the dev environments.

https://dev.azure.com/ImpactNCG/ncg

Nrwl Extensions for Angular (Nx)

Documentation

Nx is an open source toolkit for enterprise Angular applications.

Nx is designed to help you create and build enterprise grade Angular applications. It provides an opinionated approach to application project structure and patterns.

Running unit tests

Run ng test to execute the unit tests via Karma.~~~~

Running the linter

Run pnpm lint

Storybook

At the moment it's only hyundai we are building and deploying. Build/deploy is done with Chromatic. URL can be found when you login to chromatic.

You can run the following command pnpm sb:hyundai to start storybook for hyundai.

Hosts file / Site context

Currently localhost is coupled to dev.hyundai.dk, so if you want to run e.g. BAG, then aside from running pnpm start:bag you will also need to move 'localhost' from: contexts-hyundai.ts to contexts-bag.ts.

This is a little cumbersome, but you can get around this by setting up local urls for each site in your hosts file.

Current local urls:

    # NIC
    127.0.0.1		bag.local
    127.0.0.1		bydauto.local
    127.0.0.1		changan.local
    127.0.0.1		ford.local
    127.0.0.1		honda-fi.local
    127.0.0.1		honda-lt.local
    127.0.0.1		honda-lv.local
    127.0.0.1		honda.local
    127.0.0.1		hyundai-se.local
    127.0.0.1		hyundai.local
    127.0.0.1		nc.local
    127.0.0.1		ncgfleet.local
    127.0.0.1		ncgleasing.local
    127.0.0.1		terminalen.local

NOTE: You still need to add the port number e.g. `https://bag.local:4200`.