Broken template

I was trying to use this template: https://blazor-wasm.web-templates.io/

I notice I am experiencing the same issue as online. The markdown pages say they cannot be found.

https://blazor-wasm.web-templates.io/about
https://blazor-wasm.web-templates.io/deploy
https://blazor-wasm.web-templates.io/privacy

All show an error when you try to navigate to them:
image

What is the fix for this?

Should now be fixed in the latest blazor-wasm template MyApp.csproj, just needed to include *.md files when publishing:

<ItemGroup>
    <Content Include="_pages\**" CopyToPublishDirectory="PreserveNewest" />
    <Content Include="_videos\**" CopyToPublishDirectory="PreserveNewest" />
</ItemGroup>
1 Like

The next thing I notice is the menu on Mobile. The X to close it doesn’t work.

However it seems to work on the /admin-ui route

may be missing some styles, are you running tailwind? i.e:

$ npm run ui:dev

It does it on the live sample as well here:
Live template if you view it on your mobile.

It works for me in both iOS browsers and in desktop browsers with mobile resolutions.

Hmmm. I’m on my Google Pixel. My colleague had the same issue as well. I’ll check it when I get back to my desktop.

The screen capture from above is from my pixel device and shows what I see.

That’s what it should look like, I’ve updated the css for the live demo after running the tailwind build.

Your local website should also work after running tailwind.

1 Like

Interestingly when I run the npm run ui:dev command I get tailwindcss v3.3.6 which is broken, but when I grab your css from the live template, it’s tailwindcss v3.3.5 which does work.

Thank you for fixing the live template :slight_smile:

1 Like

Pretty sure tailwindcss v3.3.6 doesn’t have anything to do with it as this is the diff between the 2 versions.

The older version didn’t have an updated app.css which was missing the styles, running any of the tailwind ui:dev or ui:build npm scripts would’ve re-synced app.css and included the missing styles.

That’s weird!

Replacing the older CSS is what fixed it. I confirmed this by re-running the npm run ui:dev command, and it changed it back to 3.3.6, which then broke the functionality for me.

Here’s what I get when I do a manual DIFF between the two versions, and it’s a lot more than git hub is reporting, as my text compare is counting 10 difference changes:








I’m sure one of these will be responsible for the X closing the menu in mobile.

UPDATE: This missing one here fixes my issue:

[data-collapsed] [data-collapse=hidden] {
  display: none
}

The [data-collapse*] styles is what toggles sidebar visibility which are defined in tailwind.input.css. Running tailwind build should be including these styles in the generated app.css.

Does the build produce something different than the run?

$ npm run ui:dev

My diff above was between the working 3.5 you put in the live template, and the 3.6 I get from running that npm command.

ui:dev produces an unminified build for development, ui:build produces an optimized build for production, both should include the same styles as per its tailwind configuration.

Next issue I see with this template is with the copy of the values into the clipboard on this page

deploy:170 Uncaught ReferenceError: copy is not defined
    at HTMLDivElement.onclick (deploy:170:81)

Good catch, this was a missing function used in another template. I’ve added it to the blazor-wasm and blazor templates to resolve the issue. Thanks!

Where do I find the fixes for this so that I can fix my local version?

Sorry, all templates are under NetCoreTemplates organization on github which is what x new uses to match a repository when creating a new project, so the fix is available (x --clean to clear cache). The specific fix was in the following commit.

1 Like

The next issue I am having is a strange one. Same template, deployed following the guidelines however I cannot seem to duplicate this issue with the live template (nor locally).

I am getting a 403 Forbidden when trying to fetch the /_framework/blazor.boot.json file.

I have traced it back to service stack showing it as forbidden by curling it from within the docker host vm:

Any ideas?

This was an issue we also found but should have resolved via:

SetConfig(new HostConfig {
    IgnorePathInfoPrefixes = { "/appsettings", "/_framework" },
});

In the Configure.AppHost.cs, can you check if your app has this change? It was made in this commit.

1 Like