elite3e3

3E 3.0 (Nikita) UI

This contains the Angular + Material based Single Page Application.

Back to Parent

Prerequsites & Learning

• Git

• Typescript

• CSS

• Angular

• RxJs

• NgRx

Dependencies

NPM Download Node.js if it's not already installed. If installed, running npm --version in command line should produce an output such as: `x.x.x' (at least 5.6.0).

Development Environment

Just UI Stuff

1. Install global NPM packages; Angular CLI, TypeScript and tslint via

npm install -g @angular/cli typescript tslint

2. If using a virtual machine and get a network error, update npm config

npm set proxy "http://webproxy.e.corp.services:80/"

3. If using Windows and it complains about Python, perform a global install of the windows build tools

npm install -g windows-build-tools

4. Make sure you are inside the UI directory and install all other node modules via

npm install

5. Serve up the application using the Angular CLI

ng serve

6. Open Chrome, Edge or Firefox and navigate to

http://localhost:4200

7. You will be presented with an endpoint picker with two configurations of the same QA instance. This is so that both AAD authentication and Windows Auth can be tested during development.

UI + API + Framework

8. Follow the steps in the API README document on how to install a local instance of 3E

9. Follow the steps in the API README document on how to setup the new API and overlay it across the top of your prebuilt local instance of the 3E framework.

10. Run ng build and make sure build completes successfully. Optionally, run the following to output production build to local 3E environment:

ng build --output-path=C:\3EProject\3E\api\src\AspNetCore\API.AspNetCore\wwwroot\ui

11. Open Chrome, Edge or Firefox and navigate to

http://localhost/3E/web

12. The new UI is designed to detect an instance of 3E running from the same location and should automatically resolve the endpoint without showing a picker and land you on the home dashboard.