Blazor WASM deploys to Azure static web site and displays blank index.html page

Question

Working with a .Net 7 Blazor Web Assembly Client solution that works well in development environment . Deploys from Github actions to azure portal . The index page app div show my loading message. The shared pages from MainLayout eg. navigation do not display.

Answer 1

It sounds like the shared pages from MainLayout are not displaying after deploying your Blazor WebAssembly app to Azure Static Web Apps. One possible reason for this could be that the static files are not being served correctly. You may need to configure your app to serve static files correctly in the Azure environment.

You can refer to the "ASP.NET Core Blazor static files" document in the Microsoft Learn link provided for more information on how to configure static files in a Blazor app. Additionally, you can refer to the "Deploy a Blazor app on Azure Static Web Apps" document for guidance on deploying a Blazor app to Azure Static Web Apps.

---

References:

• ASP.NET Core Blazor static files
• Deploy a Blazor app on Azure Static Web Apps

Answer 2

@Chris Roper It seems like you are having trouble deploying your Blazor Web Assembly Client solution to Azure Static Web Apps. Based on the information you provided, it is difficult to determine the exact cause of the issue. I can provide you with some general troubleshooting steps that may help you resolve the issue.

First, you can check the deployment logs to see if there are any errors or warnings during the deployment process. To do this, go to the Azure portal for your Static Web App, select Development Tools -> Advanced Tools, then select Go ->. In the new browser tab, select Browse Directory -> Deployment Logs. Review the logs and look for any errors or warnings related to your deployment.

Second, you can check if the application source code deployed correctly to each web app. To do this, go to the Azure portal for the web app, select Development Tools -> Advanced Tools, then select Go ->. In the new browser tab, select Browse Directory -> Site wwwroot. Verify that the following files are in the directory:

• package.json
• node_modules.tar.gz
• /src/index.js

Also, verify that the package.json's name property is the same as the web name, either frontend or backend. If you changed the source code and need to redeploy, use az webapp up from the directory that has the package.json file for that app.

Third, you can check if the application started correctly. Both the web apps should return something when the home page is requested. If you can't reach /debug on a web app, the app didn't start correctly. Review the error logs for that web app.

If none of these steps help you resolve the issue, please provide more information about the error or issue you are facing.