Test a JavaScript client-side web application that calls Microsoft Graph

  • Article

In this tutorial, you learn how to use Dev Proxy to test a sample JavaScript client-side web application that calls Microsoft Graph.

Prerequisites

This part of the tutorial assumes that you installed and configured Dev Proxy on your machine. If not, do that now.

To follow this tutorial, you need:

Tip

We recommend that you use a Microsoft 365 Developer Tenant with content packs installed. Get your free tenant by signing up to the Microsoft 365 Developer Program.

Clone and configure the sample app

Start Dev Proxy

Dev Proxy comes with a preset configuration for testing apps that send requests to Microsoft Graph and SharePoint Online APIs.

  • Open a command prompt, enter devproxy --config-file "~appFolder/presets/m365.json" and press Enter to start Dev Proxy with configuration for Microsoft 365.

Launch the sample app

  • Open a command prompt and change to the samples directory.
  • Enter npx lite-server and press Enter to start the sample app web server.

Screenshot of the sample app running in Microsoft Edge browser on macOS. The app shows a large Microsoft logo with two buttons below it. A primary button with the text 'With SDK' and a secondary button with the text 'Without SDK'.

Test the sample app

  1. In the running app, select the Without SDK button.

Caution

If you got an empty page after clicking the Without SDK button, check that you have configured the Azure AD App Registration. The issue occurs when the .env file containing the Client ID of your app registration is missing.

  1. Select the Login button and complete the sign in flow.

Screenshot of the sample app running in Microsoft Edge browser on Windows 11. The app shows a large Microsoft logo with two buttons below it. A primary button with the text 'Login' and a secondary button with the text 'Back'.

Dev Proxy introduces faults into your application by intercepting requests to Microsoft Graph. It uses 50% chance for failing requests with a random supported HTTP error status code.

View the proxy output and take a moment to refresh the sample app. See how the sample app handles (or not, in this case) the failures introduced by the proxy.

Screenshot of the sample app running in Microsoft Edge. User avatars aren't shown in the app. The Microsoft Edge Developer Tools are open to the side with errors shown in the console log.

  1. Press Ctrl + C to stop Dev Proxy.

Next step

Explore How-to guides