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.
Related
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
load favicon.ico from referenced project does not work (_host.cshtml)
loading of scripts and css files of referenced projects works, but not for the favicon. it's located in the wwwroot of referenced project.
neither work
<image href="_content/Common.Server.UI/favicon.ico" rel="stylesheet" />
<link href="_content/Common.Server.UI/favicon.ico" rel="stylesheet" />
What am I doing wrong?
Thw browser says 404 for the favicon.
rel "Specifies the relationship between the current document and the linked document". The relationship attribute should be "icon" not stylesheet which is used for .css files.
<link rel="icon" type="image/png" href="images/icon.png">
or type ico for .ico files ect.
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" />
I would like to change the output folder of the ajax minifier so that when i build my project, all javascripts end up in the output folder instead of a copy next to the original file.
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<Target Name="AfterBuild">
<ItemGroup>
<JS Include="SourceScripts\*.js" /> <!--Output="Scripts\*.js"-->
</ItemGroup>
<ItemGroup>
<CSS Include="**\*.css" Exclude="**\*.min.css" />
</ItemGroup>
<AjaxMin
JsSourceFiles="#(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js"
CssSourceFiles="#(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
</Target>
Something like this. I have one folder called SourceScripts and one mirrored folder called Scripts. When i build, i want the scripts in SourceScripts (and its folders) to be minified and copied to the Scripts folder (same folder structure). Is this possible?
We are using VS 2010.