Blazor WASM hosted as Azure Static Web App and how to handle direct links

-

Long time no post! i have been busy trying to "lunch" my PWA app https://www.homeyummies.net , one of the challenges i faced was when i communicate direct links to the users like https://www.homeyummies.net/register that gave the user an Azure 404 page although it's a valid path on the Blazor WASM app, but as this is an SPA and routing is happening at client-side, when calling this directly the server looks for https://www.homeyummies.net/register/index.html and as it doesn't find it, it return 404.

a couple of google searches and i did find some solutions out there for that, and when trying to implement them i got a major issue, handling this issue can only be really tested after deployment as part of the solution do relay on what are you hosting the Blazor app on, i did try a couple of them but nothing really worked without issues!
but when i combined a couple of them together it did form a good solution for and i though to share it

so the solution have 3 parts:

1.Custom 404

first thing is to configure whatever you are hosting the Blazor WASM to server a custom 404 page, for my scenario that was Azure Static Web App service, you can find here that you need to have "staticwebapp.config.json" in app root so i added that file on my app wwwroot directory with this content

 {
   "responseOverrides": {
     "404": {
       "rewrite": "/404.html"
     }
   }
 }


2.Custom 404 Code

now that we have the redirect it's time to create that 404.html file on your Balzor WASM app wwwroot folder, and do some magic there so it redirect the URL as a parameter to your app root, other solutions didn't take into account that URLs can have params and such, and i needed to redirect with all these included, this is why i choose to Base64 encode the URL, my 404.html ended up being

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Home Yummies</title>
    <script type="text/javascript">
        
        var l = window.location;
        var relativeReturnUrl = window.location.pathname + window.location.search;

        l.replace(
            '/?returnUrl=' + btoa(relativeReturnUrl)
        );

    </script>
 </head>
 <body>
 </body>
 </html>


3.Index.razor code

Now that we got redirected to home page the server will respond and the Blazor WASM app will be loaded, we need now to get the "returnUrl" parameter value, decode it and redirect to it, which can be done with this code: 

 @using Microsoft.AspNetCore.WebUtilities

 @inject NavigationManager _navigationManager

protected override void OnInitialized()
    {
        var uri = _navigationManager.Uri;

        var queryString = _navigationManager.ToAbsoluteUri(uri).Query;

        var queryParams = QueryHelpers.ParseQuery(queryString);

        if (!queryParams.Any() || !queryParams.ContainsKey("returnUrl"))
        {
            base.OnInitialized();
            return;
        }
        
        string returnUrl= queryParams["returnUrl"].ToString();
        var base64EncodedBytes = System.Convert.FromBase64String(returnUrl);
        returnUrl = System.Text.Encoding.UTF8.GetString(base64EncodedBytes);
        
    _navigationManager.NavigateTo($"{returnUrl}");
    }

Now your Balzor WASM application hosted using Azure Static Web App should redirect any url to index and index should be able to take care of it

Popular posts from this blog

how to copy NuGet packages from one project to another

-
You probably faced that problem at least once, here you are working on your modules trying to build a new model for your solution, create a new dll project and ... here it comes, NuGet packages, you need to have manually install all these NuGet packages that you know form the base of needed libraries for your new module or plug-in, and you need to get every package plus the versions right. If you are like me this would be a soul crushing task to do, so in order for me to be more "efficient" i searched for a way to copy that to the new project, at first i thought well that is easy, just copy "package.json" file, right? , wrong see for some reason this didn't work for me, i was not able to simply do this and restore packages, things went crazy and it seems it's like taking forever! so i have to come up with something even more "efficient" so here you go, hope this save you sometime and but smile on your face just execute below on Visual Studio
Read more

How to load a DLL and runtime, invoke a method by name, get result object and use it as a parameter on another unkown DLL .NET Core

-
That post title took me a while to come up with, but my idea is pretty simple, what id you need sort of a bootstrap that don't reference DLLs, still be able to manage a simple operation of of invoking methods and pass results to the next DLL on the list. C# and .NET Core as a strong type based doesn't really have obvious ways to accomplish this, but i think i got to it with the following code, what do you think? string sourceAsmName = "DllToLoadName"; Assembly sourceAsm = AssemblyLoadContext.Default.LoadFromAssemblyPath(AppContext.BaseDirectory + sourceAsmName + @".dll"); AssemblyLoadHelper.LoadReferencedAssemblies(sourceAsm); Type sourceType = sourceAsm.GetType(sourceAsmName + "." + source); MethodInfo? sourceMethod = sourceType.GetMethod("extract"); object? sourceInstance = Activator.CreateInstance(sourceType, new object[] { _config, _logger }); Task sourceTask = (Task)sourceMethod.Invoke(sourceInstance, null); _logger.LogInformati
Read more

Blazor how to generate that SHA256 check

-
So ... I see that Balzor + .NET 5 (where did Core go?!!) is now do have what i want to get my things running but of course as always something was missing, see Blazor lazy loading is just the thing i was looking for but it doesn’t work unless i reference the module/razor component library on the main project, which i exactly what is don't want. Fortunately this time everything was kind of there, just a bit trouble to do myself. See if you create a client side Razor app, you get blazor.boot.json file generated and on that file you get lazyAssembly entry which supposed to make browsers only get these assemblies if needed (can't see this working on Firefox or Chrome but that's another story), and if you list your assembly there and follow instructions in here magic happen and the page you created on your razor component library works! But, first you need to be able to calculate that sha256 value for your assembly! Which at first i couldn’t figure out how, but then found this
Read more