Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Properly publishing/deploying a blazor project to github pages

I'll start this by saying I'm definitely working a bit above my paygrade here. I'll be doing my best to describe this problem and make it easiest to answer.

I've made a Blazor project in Visual Studio and this is connected to the GitHub repository here in the gh-pages branch. After reading Blazor's hosting and deploying guide here, I published the project in Visual Studio and copied the files in the /bin/Release/netstandard2.0/publish/ChargeLearning/dist folder to the root of the repository resulting in a repository with this file structure:

ChargeLearning
    ChargeLearning
    _content
    _framework
    css
    sample-data
    ChargeLearning.sln
    index.html

At this point I think am already neck-deep in bad practice.

Regardless, attempting to load the index.html results in 404 errors in the console for most of the files in the html header like bootstrap (as the blazor deploying guide warned).

So I followed the instructions there as best as I could, attempting to implement this single page app (SPA) fix for gh-pages linked in the guide.

I added the 404.html file to the ChargeLearning repository now when I load the page it displays just one 404 error, for the blazor.webassembly.js file.

I then add the redirect script from the SPA fix to my willthamic.github.io repository which when I open the direct url to the blazor.webassembly.js file seems to redirect properly but github shows my home page and I now realize that it has been severely mangled and now images aren't loading.

I feel like I am doing a lot of things wrong here which makes it difficult to isolate and solve a single problem at once.

If you have specific advice on how to properly deploy this or even small things on how to do what I'm trying to do a little more properly I would greatly appreciate it.

Thanks in advance.

like image 802
Will Hamic Avatar asked Jan 18 '19 19:01

Will Hamic


People also ask

How do I publish a Blazor project?

Publish the app Publish a hosted Blazor WebAssembly solution from the Server project. Select the Publish {APPLICATION} command from the Build menu, where the {APPLICATION} placeholder the app's name. Select the publish target. To publish locally, select Folder.

How do I publish a Blazor WebAssembly to GitHub?

To achieve this, navigate to the Action tab in the GitHub repository and click the set up a workflow yourself option to create a new GitHub workflow action. Clicking set up a workflow yourself will navigate to the Edit new file page. This file will instruct GitHub actions to build and deploy your project using YAML.


2 Answers

The blazor.webassembly.js file was stored in a directory beginning with an underscore (_framework), which github's jekyll ignores when deploying the website. After adding a file named .nojekyll to the root of the repository there was still a 404 error which confused me for a very long time. It then turned out I needed to make a change to another file to cause the website to be rebuilt, finally correcting the issue.

I still feel as though I am doing many things which could be bad practice, but that is for another day. If someone has any advice relating to that I will award the bounty for it.

like image 56
Will Hamic Avatar answered Oct 11 '22 23:10

Will Hamic


Looking at the current state of your gh-pages branch I'm guessing you've mixed the files that were in the publish directory with the source files from your solution? If so, you just need to clean the source files out of the gh-pages branch so only the files you copied from the publish directory are present.

Other than that what you have now looks to be correct.

like image 26
Chris Sainty Avatar answered Oct 11 '22 23:10

Chris Sainty