Blazor WebAssembly Standalone App shows blank page in Azure environment

Question

I just upgraded my backend (ASP.NET Core) and frontend (Blazor WebAssembly) from .NET 6 to .NET 8.

I had to do few changes to make it work and succeed in my Azure DevOps pipelines but locally everything works now basically.

Now that it's deployed in my Azure environment whenever I navigate to the webapp I get a blank page with "loading..." for a little while and then it disappears. Normally it should render my home page by then but the website stays blank.

I didn't find any failures in the loggings (tried chrome devtools, Azure Application Event Logs, Application insights,...).

I suppose it has something to do with the upgrade but it beats me that it works locally and that I don't see any errors.

When I click inspect source code I see my index.html.

Hoping to find someone who can help me troubleshoot the problem or who experienced the same situation.

Thanks in advance!

Answer 1

As we don't have access to your code base to pin point the exact cause of the issue, try the following steps and I believe you will get the expected result.

1. Network Requests: Look at the network tab in Chrome DevTools to ensure that all necessary files are being loaded correctly. Pay special attention to 404 or 500 errors.

 

2. Check Blazor Configuration

WebAssembly Configuration: Ensure that your Blazor WebAssembly app is correctly configured for production. Check your wwwroot/index.html for proper configurations.

 

3. Review Static Files Deployment

Static Files: Ensure that all static files, including the Blazor WebAssembly wasm files, DLLs, and other resources, are being deployed correctly to Azure. Missing or improperly served static files can cause the app to fail to load.

 

4. Application Settings and Environment Variables

Environment Variables: Ensure that your Azure environment has all the necessary environment variables and settings configured.

Configuration Differences: Check for differences between your local and Azure configurations. Sometimes configurations such as connection strings, API endpoints, or app settings may differ.

 

5. Update Service Worker

Service Worker Issues: If you're using a service worker, ensure that it's updated correctly. An old service worker might cause issues.

 

see:

 

self.addEventListener('install', (event) => {

    self.skipWaiting();

});

self.addEventListener('fetch', (event) => {

    // Fetch event handling logic

});

 

6. Clear Browser Cache

Browser Cache: Clear the browser cache or try loading the app in incognito mode to rule out caching issues.

 

7. Rebuild and Redeploy

Clean Rebuild: Perform a clean rebuild of your solution to ensure there are no leftover artifacts from previous builds.

Run:

dotnet clean

dotnet build

dotnet publish -c Release

Redeploy: Redeploy the freshly built application to Azure.

 

8. Azure App Service Configuration

App Service Logs: Enable detailed logging in Azure App Service to capture more information about what might be going wrong during the deployment or runtime.

Azure Settings: Verify that the app settings in Azure match the required configurations for .NET 8.

 

9. Enable Blazor Debugging

Blazor Debugging: Enable debugging in your Blazor WebAssembly app to get more detailed error messages.

 

Run: 

dotnet watch --no-build run

10. Update NuGet Packages

NuGet Packages: Ensure all NuGet packages are up to date and compatible with .NET 8. Sometimes outdated or incompatible packages can cause runtime issues.