Blazor WASM hosted project on IIS : 404 errors when DLL are loaded

Question

My app is a blazor app, web assembly and hosted.

I installed IIS in windows, and added a site named PBM. Then, I published my app with webassembly, here are some parameters:

(it says the deployment mode is framework dependant, and the target runtime is 'portable').

Here is the directory structure in IIS:

The errors I get are 404 while the app is loading, and especially when the DLL are loaded: (here is the debug windows of chrome)

The error of integrity seems as I read somewhere not the origin of the problem, its real origin is the 404 (not found) error.

I saw that there is no _framework directory in the PBM folder. Is this normal? There is one in wwwroot(is seems to be the one of the client project?. But there are DLL in the PBM folder:

Please notice I changed the index.html (usually located in the wwwroot directory of the client project)to index.cshtml (in the Pages directory of the Server project), in order to use multiple configurations.

Can you tell me how to fix these 404 errors with the DLLs?

thank you.

EDIT @Lex Li: here is my web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processPath=".\Application.Server.exe" stdoutLogEnabled="true" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />
    </system.webServer>
  </location>
</configuration>

It seems there is no particular change to default file types.

EDIT @Just the benno: here is my Startup.cs file:

public class Startup
{
    public string ConnectionString { get; set; }

    public Startup(IWebHostEnvironment env)
    {
        var builder = new ConfigurationBuilder()
            .SetBasePath(env.ContentRootPath)
            .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true);

        Configuration = builder.Build();
    }

    public IConfiguration Configuration { get; set; }

    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();
        services.AddRazorPages();

        services.AddDbContext<DB>(options => {
            options.UseSqlServer(Configuration.GetValue<string>("Configuration:Connection"));
        });
        
        services.AddScoped<DB>();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        Tools.ConnectionString = Configuration.GetValue<string>("Configuration:Connection");

        app.UsePathBase(Configuration.GetValue<string>("Configuration:AppBasePath"));

        if (Configuration.GetValue<bool>("Configuration:IsProduction"))
        {
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
            Console.WriteLine("prod");
        }
        else
        {
            app.UseDeveloperExceptionPage();
            app.UseWebAssemblyDebugging();
            Console.WriteLine("dév");
        }

        if (Configuration.GetValue<bool>("Configuration:IsProduction"))
            app.UseBlazorFrameworkFiles("/PBM");
        else
            app.UseBlazorFrameworkFiles();

        app.UseStaticFiles();

        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();
            endpoints.MapControllers();
            endpoints.MapFallbackToPage("/BlazorApp");
        });
    }
}

For the DLL files's locations, I thought there were 2 DLL groups : one for the Server project(located in 'app folder'/_framework and the second one for the client project(located in 'app folder'/wwwroot/_framework. (see here at microsoft.com :

The client Blazor WebAssembly app is published into the /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot folder of the server app, along with any other static web assets of the server app. The two apps are deployed together.

My problem being that the DLLs of the server project aren't in the right place.

But I can make a mistake.

Here is the folders content: 'app root folder': I can see Blazor.Canvas.dll, which is a dll of the client.

'wwwroot'/_framework:

EDIT: BlazorApp is an alternative to index.html, because I couldn't inject the IConfiguration instance in index.html, so I use BlazorApp.cshtml instead. It is located in the server project, in the Pages directory. Its content:

@page "/"
@using Microsoft.Extensions.Configuration
@using Microsoft.Extensions.Hosting
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnv
@inject IConfiguration Config

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Application</title>

    @if (Config.GetValue<bool>("Configuration:IsProduction"))
    {
    <h1>PROD</h1>
    <base href="/PBM/" />
    }
    else
    {
    <h1>DEV</h1>
    <base href="/" />
    }

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="js/AnchorLink.js"></script>
    <script src="js/focus.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>

    <!-- This is the glue between Blazor and Chart.js -->
    <script src="_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js"></script>


    <!-- composant AnchorNavigation-->
    <script>
        function whitifyDashboardMenuItems() {
            document.getElementById("syntheseMenu").classList.remove("active");
            document.getElementById("patientsMenu").classList.remove("active");
            document.getElementById("preopMenu").classList.remove("active");
            document.getElementById("transfusionMenu").classList.remove("active");
            document.getElementById("postopMenu").classList.remove("active");
            document.getElementById("suiviJ30Menu").classList.remove("active");
            document.getElementById("dmsMenu").classList.remove("active");

            return 0;
        }
        function BlazorScrollToId(id) {
            const element = document.getElementById(id);
            if (element instanceof HTMLElement) {
                element.scrollIntoView({
                    behavior: "smooth",
                    block: "start",
                    inline: "nearest"
                });
            }
        }
        function BlazorScrollDirectToId(id) {
            const element = document.getElementById(id);
            if (element instanceof HTMLElement) {
                element.scrollIntoView({
                    behavior: "auto",
                    block: "start",
                    inline: "nearest"
                });
            }
        }
        function changeMenuAfterStartup() {
            const dms = document.getElementById("dmsMenu");
            if (dms instanceof HTMLElement)
                dms.classList.remove("active");
            const synthese = document.getElementById("syntheseMenu");
            if (synthese instanceof HTMLElement)
                synthese.classList.add("active");
            return 0;
        }
        function iFrameTestMethod() {
            var iframe = document.getElementById('iFrameTest');
            console.log(iframe);
            //var content = iframe.contentDocument.body;
            if (iframe.readyState == 'complete') {
                console.log('hoho');
            }
        }


        function checkScrollSpy() {
            var scrollSpys = [].slice.call(document.querySelectorAll(".scrollspy-example"));
            var scrollSpysLength = scrollSpys.length;

            for (var i = scrollSpysLength; i--;) {
                var $spy = $(scrollSpys[i]);

                $.fn['scrollspy'].call($spy, $spy.data());
            }
        }
        function resizeIFrameToFitContent(iFrame) {
            alert("in resizeIFrameToFitContent");
            iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
            alert(iFrame.height);
        }
        function resizeiFrames() {
            alert("in resizeiFrames");
            var iFrame = document.getElementById("iFrame1");
            resizeIFrameToFitContent(iFrame);

            // or, to resize all iframes:
            var iframes = document.querySelectorAll("iframe");
            for (var i = 0; i < iframes.length; i++) {
                resizeIFrameToFitContent(iframes[i]);
            }
            return 0;
        }
        function autoResize(iframe) {
            alert(iframe);
            var h0 = iframe.contentWindow;
            alert(h0);
            var h = iframe.contentWindow.document.body.scrollHeight + "px";
            alert("h:" + h);
            iframe.style.height = h;
        }
        window.SetFocusToElement = (element) => {
            element.focus();
            return 0;
        };
        function getHeight(element) {
            return element.offsetHeight;
        }
        caches.delete("blazor-resources-/").then(function (e) {
            console.log("'blazor-resources-/' cache deleted");
        });
        function RefreshIFramesDashboard() {
            var elts = document.getElementsByClassName("refresh");
            for (var elt of elts) {

                //elt.contentWindow.location.reload();
                //elt.parentNode.replaceChild(elt.cloneNode(), elt);
            }
        }
        function RefreshIFramesDashboard(newCohort) {
            var elts = document.getElementsByClassName("refreshParent");
            for (var elt of elts) {
                //elt.contentWindow.location.reload();
                //elt.parentNode.replaceChild(elt.cloneNode(), elt);
                elt.innerHTML = elt.innerHTML.replace(/Cohort=./, "Cohort=" + newCohort);
            }
        }
    </script>
</head>

<body data-spy="scroll" data-target="#list-example" data-offset="85" class="scrollspy-example" style="position:relative;overflow-y: scroll;scroll-behavior: smooth;">

    <app>Loading...</app>

    <script src="_content/MudBlazor/MudBlazor.min.js"></script>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

thank you.

Please review your web.config, as .dll files should have been configured properly by default, learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/… — Lex Li
– Lex Li, Commented Jul 17, 2021 at 17:26
The DDL files should be inside the wwwroot folder of the BPM folder. It seems like they are a level up. Could you check if they are there? Could you paste the Startup.cs file of your hosting application? — Just the benno
– Just the benno, Commented Jul 17, 2021 at 19:53
Do you have prove that <base href="/PBM/" /> works in this way (and this file) ? Looks like it would be set too late. The @page "/" route must already have been resolved. — Henk Holterman
– Henk Holterman, Commented Jul 19, 2021 at 10:38

samwu · Accepted Answer · 2021-07-19 05:39:14Z

0

Try to add MIME Types to iis to slove this issue:

Open IIS Manager and click on your server level settings.
In Features View, double-click MIME Types.
In the Actions pane, click Add.
In the Extension box, type .dll. In the MIME Type box, type application/octet-stream.
Click OK.

answered Jul 19, 2021 at 5:39

samwu

5,2864 gold badges18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lolveley Over a year ago

I corrected the DLL MIME type in IIS at all the levels : site, application and folder containing the DLLs. But I still have got a 404 error. The requested path astauned me : it's 'localhost:8080/PBM/_framework/Blazored.SessionStorage.dll', but I have no _framework folder in PBM folder; so I created a virtual directory in PBM, targeting PBM/wwwroot/_framework but I still have the 404 error.

samwu Over a year ago

You can use failed request tracking to view detailed error information.

Collectives™ on Stack Overflow

Blazor WASM hosted project on IIS : 404 errors when DLL are loaded

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related