blazor.server.js file not found

Question

I created a new ASP.NET Core 3.0 Web application and selected the Model-View-Controller option. I wanted to add Blazor Server side, so I added the below to the Startup.cs file.

services.AddServerSideBlazor(); 
endpoints.MapBlazorHub();

and added the script file

<script src="_framework/blazor.server.js"></script>

in my Layout file.

I created a simple component that displays what I enter in a textbox, and added the component to my Index.cshtml view. It works within Visual Studio, but when I push it up to my internal 2016 server, the component is rendered but the text is not displayed. The app can't seem to find the blazor.server.js file.

Is there some other deployment step I am missing to push up the JS file?

Lactescent

Answer 1

Finally figured it out, I had to add <base href="~/" /> in the head section of the "_Layout.cshtml".

Found the answer here.

Lactescent

Answer 2

In my case,

app.UseStaticFiles(new StaticFileOptions
{
    ServeUnknownFileTypes = true,
    DefaultContentType = "application/octet-stream"
});

is what caused the issue. Replace it with:

app.UseStaticFiles();

solved the problem. I figured maybe DefaultContentType is where the problem is.

Anyone knows better why that is the case please update this answer.

Tennessee

Tom, your answer put me in the right direction. Blazor tweaks the static files settings and if you override them by using your own StaticFileOptions, it will break Blazor. You can fix this by doing a second call to UseStaticFiles. This will be fixed in a future version. See github.com/dotnet/aspnetcore/issues/19578 – Visayan

Answer 3

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/static-files?view=aspnetcore-5.0

Use two calls to UseStaticFiles in Startup.Configure (Startup.cs):

Configure the custom file provider in the first call with StaticFileOptions. The second middleware serves blazor.server.js, which uses the default static files configuration provided by the Blazor framework. C#

using Microsoft.AspNetCore.StaticFiles;

...

var provider = new FileExtensionContentTypeProvider();
provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";

app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
app.UseStaticFiles();

Ondrea

Answer 4

As blazor.server.js is a static file, be sure to add app.UseStaticFiles(); in startup.cs.

Pasadis

Where is the file? I searched my project and cannot find it – Villagomez

Answer 5

In my case, I created a .Net 6 MVC app with Blazor functionality and found out that WebOptimizer with the default settings breaks blazor.server.js with a similar path not found error.

Microsoft states here that, "ASP.NET Core doesn't provide a native bundling and minification solution" (although seems other .Net frameworks did at one time?) and "ASP.NET Core is compatible with WebOptimizer." However, I spent quite a lot of time trial and erroring to find out otherwise. Originally, I thought it was only the StaticFileOptions, but it seems to modify the native path that blazor.server.js uses with just the default setup.

Currently, I have simply disabled WebOptimizer, but will edit this post if I find a work around. I love WebOptimizer otherwise, and hope I can find an exclusion option or something to that effect. Please post a comment or proposed solution if you find one first.

Update: One solution seems to be a globbing pattern:

services.AddWebOptimizer(pipeline =>
{
    pipeline.MinifyJsFiles("js/**/*.js", "lib/**/*.js");        
});

This tells WebOptimizer to only look in specific places in wwwroot (and I assume exclude everything else, at least for js files). The wildcards seem fairly inclusive for what is needed in my project, but may need tweaking and mindfulness moving forward. Solution was found here on github:

Exclude file from minification

Skeptic

Answer 6

Update Nginx to latest version. I have same problem with 1.18 (default version for Ubuntu 20.04) and resolved this after update to last release.

Mat