> Markdown version of [/videos/390-debugging-static-web-apps?t=525](https://www.wearedevelopers.com/videos/390-debugging-static-web-apps?t=525). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Debugging Static Web Apps Eliminate local CORS issues by unifying your frontend and APIs with the Azure SWA CLI. This reverse proxy lets you mock authentication and hit cross-stack breakpoints locally. - **Speakers:** Stacy Cashmore - **Event:** World Congress 2022 - **Published:** June 15, 2022 - **Duration:** 21:29 - **URL:** https://www.wearedevelopers.com/videos/390-debugging-static-web-apps ## Summary Modern web applications often combine single-page applications (SPAs) with serverless APIs, creating complexities in local development. While platforms like Azure Static Web Apps streamline cloud deployments by unifying resources, local environments previously lacked the missing bridge to connect frontends and APIs natively, resulting in frequent CORS issues and isolated port conflicts. The Azure Static Web Apps CLI (SWA CLI) resolves this friction by acting as a reverse proxy, standing up a unified local development server that accurately mirrors production routing and gateway behavior. Using a Blazor WebAssembly front-end and an Azure Functions back-end, developers can leverage the SWA CLI to start both environments seamlessly behind a single localhost port. This immediately eliminates cross-origin roadblocks while maintaining deep IDE integration in Visual Studio, enabling engineers to hit cross-stack breakpoints and utilize real-time hot reload features. Beyond live development servers, the CLI empowers developers to serve distributed, production-ready static files directly. By bypassing standard dev servers like Kestrel, teams can accurately expose routing misconfigurations and faulty navigation fallbacks long before they hit a live environment. One of the most powerful developer-experience upgrades provided by the SWA CLI is localized authentication mocking. Engineers can simulate logins across identity providers, natively injecting synthetic user profiles and dynamically assigning application roles without configuring external test accounts or navigating bureaucratic cloud credentials. To further optimize the developer inner loop, teams can implement a `swa-cli.config.json` file. This configuration strategy abstracts highly verbose startup flags into straightforward CLI aliases—standardizing local infrastructure setup and drastically lowering the onboarding barrier for new repository contributors. **Keywords:** azure static web apps, swa CLI configuration, blazor webassembly debugging, azure functions integration, local CORS resolution, serverless API hosting, mocking authentication roles, developer inner loop, cross-stack breakpoints, hot reload workflows, static fallback routing, swa-cli.config.json patterns, production artifact simulation, identity provider mocking ## Chapters 1. **Hosting modern static web apps on Azure** (00:05) — Azure Static Web Apps simplifies deployments by combining serverless APIs and global static hosting into a unified resource. 1. **Proxying local API requests with a CLI tool** (03:46) — Connecting disparate local development servers requires leveraging the static web app CLI to proxy backend API requests. 1. **Hitting breakpoints and testing hot reload in Visual Studio** (06:38) — Attaching standard debugging tools to a routed local proxy enables full-stack breakpoint analysis and live interface updates. 1. **Consolidating local servers into a single terminal window** (08:45) — Combining client server execution and backend initialization into one terminal command reduces multi-tab development clutter. 1. **Mocking user authentication and roles locally for static apps** (11:22) — Simulating cloud identity providers locally eliminates the administrative overhead of managing real social media test accounts. 1. **Serving published static content locally to mirror production environments** (14:53) — Testing directly against distributed build outputs reveals fallback misconfigurations and routing errors hidden by development servers. 1. **Configuring startup commands with the CLI configuration file** (17:08) — Embedding startup flags into a shared JSON configuration file normalizes complex command execution for the engineering team. 1. **Exploring frontend development choices beyond standard JavaScript frameworks** (19:11) — Transitioning between JavaScript and C-sharp highlights differing frontend development experiences for varied engineering backgrounds. ## Related Moments - [Integrating endpoints with Azure Static Web Apps](https://www.wearedevelopers.com/videos/1194-say-goodbye-to-building-boring-apis-with-azure-data-api-builder) (from "Say goodbye to building boring APIs with Azure Data API Builder") - [Introduction to serverless websites with Blazor and Azure Functions](https://www.wearedevelopers.com/videos/115-blazor-and-azure-functions-for-serverless-website) (from "Blazor and Azure functions for Serverless Website") - [Designing a serverless web architecture for frontend applications](https://www.wearedevelopers.com/videos/115-blazor-and-azure-functions-for-serverless-website) (from "Blazor and Azure functions for Serverless Website") - [Unifying frontend and backend development with ASP.NET Core Blazor](https://www.wearedevelopers.com/videos/699-blazor-the-new-spa-framework-for-everyone-who-hates-javascript) (from "Blazor – the new SPA Framework for everyone who hates JavaScript") - [Recapping serverless architectures and Swift cloud integrations](https://www.wearedevelopers.com/videos/133-server-side-serverless-in-swift) (from "Server Side Serverless in Swift") - [Debugging serverless code locally using IDE cloud extensions](https://www.wearedevelopers.com/videos/269-serverless-on-cloud) (from "Serverless on Cloud") ## Related Articles - [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers) - [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet) - [Dev Digest 132 - Binging WADFlix?](https://www.wearedevelopers.com/magazine/473-dev-digest-132-binging-wadflix) - [Developers vs Scammers, Bad Design, AI is Pointless, AJAX is 20 and more - The Best of LIVE 2025 - Part 1](https://www.wearedevelopers.com/magazine/661-developers-vs-scammers-bad-design-ai-is-pointless-ajax-is-20-and-more-the-best-of-live-2025-part-1) ## Related Jobs - [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group** - [Senior Software Engineer](https://www.wearedevelopers.com/jobs/ext/591545-senior-software-engineer) at **Twilio** - [Software Engineer Frontend (all genders welcome) in the field of Water Line Integrity Solutions](https://www.wearedevelopers.com/jobs/ext/127888-software-engineer-frontend-all-genders-welcome-in-the-field-of-water-line-integrity-solutions) at **Rosenxt Group** - [Senior Software Engineer, Client Apps Platform](https://www.wearedevelopers.com/jobs/ext/1773893-senior-software-engineer-client-apps-platform) at **GitHub** - [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group** - [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**