This README has two sections:

1. Build, debugging, and deployment instructions
2. API call notes
3. Dependency list

Build, debugging, and deployment instructions

Install dependencies and compile code

Hot Reload:

npm install
webpack --mode development

Production Build:

npm install
webpack --mode production

Create extension for deployment

Hot Reload:

• Verify that name is set to Metrics Widget-dev (it's in two places!)
• Verify that contributions/id is set to metrics-widget-dev
• Run the following command prompt:

  tfx extension create --manifest-globs vss-extension.json --overrides-file configs/dev.json --token [token]
  

Production Build:

• Verify that name is set to Metrics Widget (it's in two places!)
• Verify that contributions/id is set to metrics-widget
• Run the following command prompt:

  tfx extension create --manifest-globs vss-extension.json --overrides-file configs/release.json -token [token]
  

Launch the dev server

Hot Reload:

webpack-dev-server --mode development

and press F5 while in VSCode.

1. Go to https://localhost:3000/dist/hub/hub.html in Firefox and bypass the untrusted certificate page

OR

2. Go to the dashboard on which the widget is hosted.

Production Build:

• Go to the dashboard on which the widget is hosted.

Note: If running hot reload, make sure that the webpack-dev-server is running and that you're on Firefox.

Deployment notes

Configuring environment variables

To call the Azure DevOps REST API, make sure you have the necessary environment variables.

• Make sure a .env file exists in the project root, and inside the file make sure you have the following variables:

• PAT = [Insert personal access token here]
  UHM_URL = "https://dev.azure.com/[Union Home Mortgage URI]/_apis/"
  USERNAME = [Your Azure username]
  

Dependency List

This project is built using React + Typescript, and is bundled and compiled with Webpack. It uses the following node package libraries:

• Axios (https://axios-http.com/docs)
• Azure-devops-extension-sdk
• Azure-devops-ui (https://developer.microsoft.com/en-us/azure-devops/develop/styles)
• Chart.js, React-chartjs-2 (https://react-chartjs-2.js.org/components)
• Dotenv-webpack