Skip to content

Latest commit

 

History

History
111 lines (93 loc) · 5.48 KB

README.md

File metadata and controls

111 lines (93 loc) · 5.48 KB
Raw

Azure App Services Diagnostics Portal And Applens

This is the repository for Azure App Service diagnostics experience.

Build Status

Steps to upgrade to Angular 8 and run projects locally:

  • Install Node 12.*
  • Install Angular-CLI 8
    • npm install -g @angular/cli@8
  • Build the diagnostic-data lib, Applens and Diagnostics Portal:
    • npm run build
  • Run the project locally:

First time set up prerequisites

  • Node 12.*
  • Node Package Manager (npm)
  • Typescript npm install -g typescript
  • Angular-CLI npm install -g @angular/cli@8

Project Structure

root
│
└───AngularApp
│   │   This is the home of the angular code for App Service Diagnostics Portal and Applens
|   |
|   |   angular.json - This is the angular-cli configruation file
│   │
│   └───projects
|       |   This is the list of projects registered in angular.json
|       |
│       └───app-service-diagnostics
|       |   |    This is the code for the external App Service Diagnostics Portal
|       |
|       └───applens
|       |   |    This is the code for Applens
|       |
|       └───diagnostic-data
|           |    This is a library containing the common component and services
|           |    that are used to generate detector views in ASD/Applens.
|           |    Any component or feature that you want to use both internally
|           |    or externally should be put here
│
└───Backend
│   │   ASP.Net Core Backend for App Service Diagnostics Portal
|
└───ApplensBackend
│   │   ASP.Net Core Backend for Applens

Getting Started

  • Clone repo git clone https://github.com/Azure/Azure-WebApps-Support-Center.git
  • Navigate to the angular root folder AngularApp and run npm install (This will install all the required packages.)

App Service Diagnostics Portal

Set Up a Local Development Environment

  1. Create a Local Environment Settings file
    • Copy AngularApp\projects\app-service-diagnostics\src\environments\environment.ts to create AngularApp\projects\app-service-diagnostics\src\environments\environment.local.ts
    • Set key "useApplensBackend" to true
  2. Get Resource Auth Token from ARM Client:
    • Install ArmClient: choco install armclient
      • Ensure source chocolatey is enabled: choco source enable -n=chocolatey
    • Log in to ArmClient: ARMClient.exe login
    • Run ARMClient.exe token {SubscriptionID} with your Subscription ID, which will copy the Auth Token to the clipboard
  3. Add Auth Token and ResourceID to Local Environment Settings:
    • Paste the ArmClient token from the above step into authServiceToken in environment.local.ts
    • Copy the ID of a Resource you want to test, and paste it into authServiceResourceId in environment.local.ts
  4. Skip Authorization in ApplensBackend
    • Open appsettings.Development.json
    • Set "ServerMode": "internal"
  5. Create a self-signed certificate for Applens
    • Navigate to AngularApp\ssl
    • Follow the instructions in AngularApp\ssl\README.md to create a self-signed certficate and install the certificate for your local machine in Trusted Root
  6. Run the SSL server
    • Run npm run ssl-local
    • Navigate to https://localhost:3000 to confirm the server is up
    • Access the resource denoted by the Resource ID you copied using the Local Portal Test URL
    • This will load the iframe from https://localhost:3000. Must be running in ssl mode.
    • Any changes made to the locally hosted project will be automatically refreshed in the Portal

Testing Local Changes in the Portal

  • In order to test your local changes in the portal, you can use the following links:
    • Local: This will load the iframe from https://localhost:3000. Must be running in ssl mode (npm run ssl).
    • Staging: This will load the iframe from https://supportcenter-bay-staging.azurewebsites.net

Back End

  • Right now the back end is optional as it is not required for functionality of the angular project.
  • You will need appropriate secrets to be added to appsettings.Development.json.
  • Open the Backend project in Visual Studio 2017 and run it in IIS Express mode.

Production Build

  • The production build commands for the angular projects are as follows:
    • npm run build-applens - Build Applens. Build output is placed in ApplensBackend/wwwroot.
    • npm run build-asd - Build App Service Diagnostic Portal. Build output is placed in Backend/wwwroot.
    • npm run build - Build both App Service Diagnostic Portal and Applens.
  • If you have the appropriate Publishing Profiles, you can deploy these changes to the staging slots.
  • TODO: Azure Dev Ops Integration