Hosting Blazor 2022 Projects on Itch


Blazor is a way of writing web apps that can intermingle C# and html.  Since it has a web assembly form, it can also be uploaded to itch.  Here are a few tips to keep in mind for your project to work. Once you have created your project, adjust the following settings:

Set your single page to index.html

Right now, multi page Blazor apps do not work, you are limited to the initial page. This is due to the URL requirements on hosting, so to start we will pick our main (and only) page by putting this at the top:

@page "/index.html"

Adjust Index.html head base

Blazor uses base to know where to look for info, but we won't know the relative URL till uploaded. In the head replace base with the following:

<head>
    ...
    <base />
    <script>
        var path = window.location.pathname.split('/');
        var base = document.getElementsByTagName('base')[0];
        if (window.location.host.includes('localhost')) {
            base.setAttribute('href', '/');
        } else if (path.length > 2) {
            let str = '/';
            for (let i = 1; i < path.length - 1; i++)
            {
                str += path[i];
                str += '/'
            }
            base.setAttribute('href', str);
        }
    </script>
    ...
</head>

This allows you to test on local host and still be able to publish without any changes. It simply looks at the URL and changes base accordingly.

You are all set. Enjoy and let me know about your projects with Blazor!

Files

wordle-hint-helper-html.zip Play in browser
Version 1 Mar 01, 2022

Leave a comment

Log in with itch.io to leave a comment.