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:
wwwroot folder containing all the static sources but without an index.html file
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!
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.
Reload
<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.
Connected the style file via "Add > Existing item > Add link"
<ItemGroup>
<Content Include="..\WebApplication2\wwwroot\css\site2.css" Link="wwwroot\css\site2.css">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
</ItemGroup>
Added to _Layout.cshtml
<link rel="stylesheet" href="~/css/site2.css"/>
The problem is that when building in the wwwroot folder, I see a file with styles, but in the browser this file is empty and, accordingly, the style is not loaded.
Link to the source code: https://github.com/Slogg/WebAppStyleLinkTest
In project WebApplication3, I connect style site2.css from project WebApplication2
I have a .net core web application. I'm taking advantage of bundling both my css and js files. I'd like it so, after I build, the non minified files are not copied into the release folder. The idea is not to publish files that aren't going to actually be used. I've always relied on default behavior so I'm curious how I can control the output of my build and thus creating lighter weight packages.
You can put this in your csproj file to exclude files from the publish output:
<ItemGroup>
<NonMinifiedFiles Include="wwwroot\**\*.js;wwwroot\**\*.css"
Exclude="**\*.min.js;**\*.min.css" />
<Content Update="#(NonMinifiedFiles)" CopyToPublishDirectory="Never" />
</ItemGroup>
Following the Getting Started with EF Core on ASP.NET Core with a New database tutorial from Microsoft on an existing project leaves me with a very blank and non functional page for my entities:
No errors are thrown, but the elements on the page don't work and are obviously not styled correctly. Here is what it should look like based on the tutorial:
I guess the problem is, that I'm not starting with the template from the project (see code), but rather an existing project. I have no idea though what might be missing from my code...
Since I also don't where my problem lies, I wont just post all code from the program. If anything may be important I'm glad to add it.
Sidenote: an earlier problem with 404 errors on the same URL was occuring because the following lines were missing:
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
ASP.NET Core templates are styled with Boostrap by default.
Unfortunately, it appears as though the Bootstrap files were not included in the sample project. Most likely due to a .gitignore. They are included if you start with a new web project using dotnet new or the templates included in visual studio.
Here you can see that the Layout.cshtml while in a development environment is looking for
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
But because the Bootstrap was not checked in with the source code, you didn't receive it.
You can find out how more information, and how to actually retrieve the dependencies through Bower in this Microsoft Doc
However, as the page notes Bower is now deprecated for new projects. Bower itself recommends Yarn or Webpack, and Microsoft recommends LibMan or Webpack.
Lastly, there's no real need to even have a local copy of boostrap on your machine if you're just testing out the sample project. The easiest thing to do is include the CDN version regardless of the environment setting.
Views/Shared/_Layout.cshtml
Replace
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
With
<environment include="Development">
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" />
How is
<None Include="C:\foo.bar" />
different from
<Content Include="C:\foo.bar" />
?
The MSDN article on the build action property explains the differences.
None - The file is not included in the project output group and is not compiled in the build process. An example is a text file that contains documentation, such as a Readme file.
Content - The file is not compiled, but is included in the Content output group. For example, this setting is the default value for an .htm or other kind of Web file.
One difference is how they get published; "None" items don't get included in a publish, "Content" items do; for example, on the "Application Files" dialog on the Publish tab.
I am not 100% sure (I read the MSDN description of Build Action property) but just copying that answer from MSDN to StackOverflow does not answer the question completely for me.
The difference of None and Content only has an effect on Web projects. For a command line project, WinForm project or UnitTest project (in my case) etc. None and Content have no different behavior.
MSDN: "project output group" or "Content output group" only terms used in a Web project, right?
In my situation, my MSBuild file had an ItemGroup for image resources that appeared as follows:
<ItemGroup>
<Content Include="Resources\image001.png" />
<Content Include="Resources\image002.png" />
<Content Include="Resources\image003.png" />
<Content Include="Resources\image004.png" />
<None Include="Resources\image005.png" />
<None Include="Resources\image006.png" />
<None Include="Resources\image007.png" />
</ItemGroup>
While my project was building fine, this left me wondering why I had a mix of Content and None item type elements in my ItemGroup. This MSDN article (for Visual Studio 2010) gave me the guidance I was looking for:
Note that when the resource editor adds an image, it sets Build
Action to None, because the .resx file references the image
file. At build time, the image is pulled into the .resources file
created out of the .resx file. The image can then easily be accessed
by way of the strongly-typed class auto-generated for the .resx file.
Therefore, you should not change this setting to Embedded
Resource, because doing this would include the image two times in
the assembly.
Resolution: With this guidance, using a text editor, I changed the Content item type elements to None.
Also, for an overview of MSBuild items, see this MSDN article.
Content files are not included in a build, but are included in a publish.
None files are not included in a build or publish, unless they are configured that way by you. For instance, a "Copy to Output Directory" setting of "Always" or "Newer", will cause them to be included in both a build and publish.
I have a project that contains no compilable items (it stores html and javascript for jasmine unit tests).
One day my solution (that contained said project) stopped compiling saying "The target "Build" does not exist in the project".
I added an import to bring in the compiler, which worked fine on my machine but failed using msbuild on the build server.
<Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
I then changed a line from
<None Include="SpecRunner.html" />
to
<Content Include="SpecRunner.html" />
and it worked on the build server as well.
You need None in a template project file to include files you define in the .vstemplate otherwise they are lost in the creation & translation process. They get left behind in the temp folder it uses to build everything and then deleted shortly after.
In my case .Pubxml is one of those files among None list. It's not meant for solution building or as a static file for web project. But to publish the site to Azure, the configurations are present in this.
As per Microsoft article these are the major types we see among .csproj file tags:
None - The file is not included in the project output group and is not
compiled in the build process. An example is a text file that contains
documentation, such as a Readme file.
Compile - The file is compiled into the build output. This setting is
used for code files.
Content - The file is not compiled, but is included in the Content
output group. For example, this setting is the default value for an
.htm or other kind of Web file.
Embedded Resource - This file is embedded in the main project build
output as a DLL or executable. It is typically used for resource
files.