Gizmo-web NPM | npm.io

Setting up your Web

Introduction

The Gizmo.Web project, an Angular SPA that serves CIM, Business Planning, Pipeline Management, and other InterAction-related, client-side code. As a developer, You will use Gizmo.Web for front-end development and to get familiar with our product functionality and interface.

🛑 To set up the entire project end-to-end, please refer to "Getting Started". 🛑

Starting Web

Open Gizmo.Web in VSCode
In a terminal, run npm i -g vsts-npm-auth.
Run npm run npm-auth to authenticate your local npm to the Azure InterAction Packaging.
Run npm ci to install all npm packages.
- If you get a 401 while running npm ci, try following the instructions at this link, click on 'connect to feed' and under the 'npm' -> 'Other' instructions.
Run npm start to run Web against the test01-loblaw VM.

Testing Web

Open localhost:4200 in your browser.
Ensure that it doesn't crash in a fiery ball of server errors, and you're all good. 🔥

Development server and other package.json commands

Serve code

npm start for a dev server that points to deployed version of Gizmo.API.Gateway . Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files. Hot Module Replacement is enabled
npm start-local for a dev server using configuration=local. This configuration uses a local-running instance of Gizmo.Api.Gateway. By default this is set to port 62325 and you should change your gateway to match to avoid conflicts
npm start-docker for a dev server using configuration=docker. This configuration uses complete docker
npm start-local-docker for a dev server using configuration=local-docker. This configuration uses a local-running instance of Gizmo.Api.Gateway but the rest would be instances in docker.
npm start-prod for a dev server using configuration=production. This runs AOT and bundling like we use when deployed uses loblaw environment.

Testing

npm run test - isolated testing with fdescribes and fits
npm run test-parallel - Run entire suite quickly. Uses karma-parallel with 4 concurrent browsers
npm run test-ci - Run entire suite like its run during CI/CD process. Uses karma-parallel with CPU count - 1 concurrent headless browsers
npm run test-ci-2 - Current CI/CD configuration. Run entire suite like its run during CI/CD process. Uses karma-parallel with 2 concurrent headless browsers
npm run test:code-coverage - run tests with code-coverage turned on. Uses one browser. No parallel browsers.

Code Generation

.\auto-generate.ps1 - code generation against loblaw completely automated. no need to cut/paste anymore. {GraphQL} code generator

Various Other Commands

npm run bundle-report to see a report of bundle sizes and how they are packaged and imported in the application.
docker build -t gizmo-web . - build a docker image pointing at InterAction Docker Stack
docker run gizmo-web -p 4100:433 - run the image in docker

Allow https: from localhost in chrome:

chrome://flags/#allow-insecure-localhost

Code scaffolding

Structure and Style Guide

Wiki for project structure

Please refer to Angular Style Guide concerning naming conventions and general structure guidelines.

Lazy-loaded functional-area feature modules are placed in ./src/app/
Modals that can be launched from main toolbar should be placed in ./src/app/contact-management/modal/. Other modals can be placed in their feature module folder.
Shared modules are placed in ./src/app/. Examples: GridModule, ContactsGridModule
Inside a feature module folder create a components folder for shared components of the feature. Components you can navigate to should have their own top level folder in the feature module. Examples FavoriteListComponent, WorkingListComponent

Further help

If you run to any issues during your environment setup, refer to the Troubleshooting section of our Getting Started doc for common error messages.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.