CODEWITHSUNDEEP
c#.netblazorblazor-webassemblyasp.net-blazor
Hardy Wen
Hardy Wen

Reputation: 122

Blazor 6.0 Publish doesn't produce the index.html file

I have written something using blazor wasm and am trying to publish the project on Github Pages. However, when I try the dotnet publish -c Release command, it only produces a list of files as followed:

  1. wwwroot folder containing all the static sources but without an index.html file
  2. the .json, .dll, web.config and an .exe file.

Generally, if I want to upload the page to Github Pages, I would need an index.html file which would be automatically generated by blazor publish I believe, but there isnt.

How can I solve this issue? Thanks a lot!

Upvotes: 2

Views: 2799

Answers (1)

gunr2171
gunr2171

Reputation: 17579

Your project's wwwroot folder needs to contain an index.html file. That's what gets initially served to the browser and is the root of all other file requests (images, dlls, etc). Unlike a web.config file (used for IIS), this file is NOT generated for you - you maintain the file.

You can always create a new Blazor WebAssembly project to get an example of what the index.html file should look like, but this is the current template file at time of writing.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="BlazorApp1.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

You can customize it yourself afterwards to fit your needs. Note that the <div id="app"> is where your app get injected into, unless you customize it.

Simply putting this file in the project's wwwroot folder will have it copied to the published directory's wwwroot folder during compilation.

Upvotes: 3

Related Questions