//BUILD 2018 DEMO

Pre-Requisites

• VSCode or Visual Studio 2017
• .NET Core 2.0
• PWABuilder CLI Tool (install it with npm install -g pwabuilder)

Running the application locally in Visual Studio

1. Open the demo-app.sln Solution file in VS 2017
2. Press F5 to run and debug the web application.

Running the application locally in Visual Studio Code

1. From VSCode, use the Open Folder option from the File Menu and select the webapp folder.

2. Press F5 to run and debug the web application.

   (The first time, VSCode will ask for an Environment, select .NET Core and press F5 again)

3. (Alternatively) From a terminal/cmd run dotnet run from the webapp folder.

Sideloading the PWA in Windows 10

1. Open a terminal/cmd on the root repository folder.

2. Run pwabuilder run windows10 package\BUILD2018DEMO to sideload and start the PWA. (Make sure the application is running, otherwise the PWA won't work)

Configuring Push Notifications

In order to recieve Push Notifications in the PWA when you send emails from Outlook, the application's backend needs to be available to the outside world, so Microsoft Graph can invoke the listening endpoint in the NotificationsController.

1. Create a Windows App registration in the Windows Dev Center (You'll need to register for a Windows Developer account).

2. Create a Notification Hub in Azure (more information).

3. Configure the Notification Hub with Windows Native Notifications (WNS), using the PackageSID + Secret from your Windows App registration in the Windows Dev Center (more information).

4. Open appsettings.json and update the HubConnectionString and HubName settings.

5. Either deploy the application or expose your http://localhost:5000/ using ngrok to the outside world.

6. When using ngrok, update the ClientApp/services/config.ts with the https url provided by ngrok. E.g.:

   export const BackendBaseUrl: string = 'https://XXXXX.ngrok.io'

7. Update the APPX Manifest with the Package Indentity Name and Publisher Identity:

   From: <Identity Name="INSERT-YOUR-PACKAGE-IDENTITY-NAME-HERE" Publisher="CN=INSERT-YOUR-PACKAGE-IDENTITY-PUBLISHER-HERE" Version="1.0.0.0" ProcessorArchitecture="neutral"/>

   To: <Identity Name="12836YourPublisherName.BUILD2018DEMO" Publisher="CN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" Version="1.0.0.0" ProcessorArchitecture="neutral"/>

8. Re-install your PWA using the steps above, Installing the PWA in Windows 10.

9. Open the PWA and login.

10. (Recommended) Install the Microsoft Edge DevTools Preview to debug and see errors in the Microsoft Graph API Subscription requests. Press F12 once the tools are installed and the PWA opened.