title | description | author | ms.author | ms.date |
---|---|---|---|---|
Test a JavaScript client-side web application that calls Microsoft Graph |
Learn how to use Dev Proxy with a sample JavaScript client-side web application that calls Microsoft Graph. |
garrytrinder |
garrytrinder |
04/08/2024 |
In this tutorial, you learn how to use Dev Proxy to test a sample JavaScript client-side web application that calls Microsoft Graph.
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:
- Microsoft 365 tenant.
- Account with permissions to create Microsoft Entra app registrations.
- Git (see GitHub’s set up Git guide).
- nodejs LTS.
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.
- Download the sample app
- Follow the instructions to configure the app.
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.
- Open a command prompt and change to the
samples
directory. - Enter
npx lite-server
and press Enter to start the sample app web server.
:::image type="content" source="../media/test-app-js-welcome.png" alt-text="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'.":::
- 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.
- Select the
Login
button and complete the sign in flow.
:::image type="content" source="../media/test-app-js-login.png" alt-text="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.
:::image type="content" source="../media/test-app-js-requests.png" alt-text="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.":::
- Press Ctrl + C to stop Dev Proxy.
[!div class="nextstepaction"] Explore How-to guides