Use Dev Proxy with SharePoint Framework (SPFx) solutions

SharePoint Framework (SPFx) is a development model for extending SharePoint, Microsoft Teams, Microsoft Viva and Microsoft 365. When you build SPFx solutions, you can use Dev Proxy to intercept web requests made by your solution and see how it handles API errors.

Intercept web requests made by your SPFx solution

SharePoint Framework solutions are client-side applications that run in the web browser. Before you start Dev Proxy, you need to configure it to intercept requests made by your SPFx solution. Often, you want to intercept requests to Microsoft Graph and SharePoint REST APIs. If you use custom APIs, you want to intercept requests to them as well. You can define the URLs to intercept in the urlsToWatch property in the Dev Proxy configuration file.

{
  // [...] trimmed for brevity
  "urlsToWatch": [
    "https://graph.microsoft.com/*",
    "https://*.sharepoint.com/*"
    // other URLs to watch
  ]
}

When you start Dev Proxy on your machine, it automatically intercepts web requests made by your SPFx solution and simulates configured responses. You don't need to change your SPFx solution to use Dev Proxy.

Configure Dev Proxy to not intercept SharePoint Framework workbench requests

When building SPFx solutions, you use the SharePoint Framework workbench to test your web parts. SharePoint Framework workbench runs in the web browser and uses SharePoint APIs to load web parts. By default, Dev Proxy intercepts all web requests from your web browser, including the requests made by the SharePoint Framework workbench. As a result, it can prevent you from testing your web parts.

To avoid Dev Proxy blocking the requests made by the SharePoint Framework workbench, configure Dev Proxy to not intercept requests to the web part API. In your Dev Proxy configuration file, exclude the API by updating the urlsToWatch property.

{
  // [...] trimmed for brevity
  "urlsToWatch": [
    "!https://*.sharepoint.com/_api/web/GetClientSideComponents*"
    // other URLs to watch
  ]
}