I'm building the ASP.Net Core Web Application
I installed bootstrap using Quick Install Package. So now I have it in my dependencies:
Also, there's a folder "node_modules" with bootstrap and everything is fine there, all classes are where they're supposed to be:
Then I created a view and in html wrote the following:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
When I hover the mouse over the href, I see a warning:
Path C:\Users\Shep\SportsStore\SportsStore\wwwroot\~node_modules not found
Well, it's true, because there's no such folder, but how to keep it from looking in wwwroot and use the specified folder? My wwwroot is empty, I guess it's because I didn't use bower
If I use the full path (href="C:/Users/Shep/SportsStore/SportsStore/node_modules/bootstrap/dist/css/bootstrap.css"), it seems right, but I bootstrap classes are unavailable:
<body>
<div class="panel-info">
</div>
</body>
and if I hover the mouse over, I see "Unknown CSS class 'panel-info'" even though there's this class in bootstrap.css
.panel-info {
border-color: #bce8f1;
}
I'm not using Angular and haven't created any js files of my own yet.
I have seen lots of similar issues and haven't found suitable solution, sorry if it's a duplicate
In ASP.NET Core, the runtime supports a piece of middleware called StaticFiles that allows anything in the /wwwroot folder to be accessible from the browser. But since the node_modules directory is outside of /wwwroot ,that problem occurs .
You can use Library Manager/Bundler and Minifier to copy the files into wwwroot . There are a lot of solutions you could find from here .
Related
In a Blazor WebAssembly .NET Core hosted application, after changing the {PROJECT NAME}.Client project name to "{PROJECT NAME}.Admin" (changing the client project name), scope identifies for CSS isolation in the {PROJECT NAME}.Admin.styles.css file and rendered objects in the DOM are different.
What I did
I created a .NET core hosted Blazor WebAssembly application with authentication. Ran the application. Worked fine.
Then I changed the project name of {PROJECT NAME}. Client project to "{PROJECT NAME}.Admin". And changed basically everywhere there was "Client" to "Admin".
Everywhere the namespace was mentioned
The Client Folder in the project folder
Then I added the project references.
When I ran the project...
This was the landing page.
The Issue
All the functionality works fine. All the components are rendered. But only Bootstrap styling is applied to the MainLayout and NavMenu components as they use CSS isolation. The isolated CSS files generated files scope identities aren't the same as what is rendered to the DOM.
Image of {PROJECT NAME}.Admin.styles.css file
Image of Rendered HTML
The page renders fine if I change the scope Identities manually. But it resets when I Run the application the next time.
I'm just playing around with Blazor. So I'm expecting a fix to this problem rather than some alternate method or workaround to do the styling. I'm new to online forums. Sorry for providing unnecessary information or providing less information. Please request any additional information needed.
Deleting the CSS isolated files and creating them again from the beginning made it work! How ever rebuilding the solution or cleaning the solution did not work. Still no clue of what was going on.
What worked for me was deleting the obj and bin folders, besides renaming the link to the css file to {AssemblyName}.styles.css.
Setting it to ProjectName does not work if it differs from AssemblyName.
This way it was not necessary for me to delete and recreate the specific css files.
Note: I'm using Blazor Server with ASP.NET 5
Another workaround (not a solution as it should already "just work") is mentioned under "Customize scope identifier format" in: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0 .
Basically add something like this to your csproj file:
<ItemGroup>
<None Update="Pages/Example.razor.css" CssScope="my-custom-scope-identifier" />
</ItemGroup>
If you provide a specific scope identifier like this and ensure you clear your browser cache, it seems to force the scope identifier that gets bundled in the {AssemblyName}.styles.css to match what gets rendered in the html
I had the same issue. Rebuilding the solution fixed it for me. Possibly rebuilding just the relevant application would have been enough too.
I spent many hours on the same issue. In my case it was sufficient to use "Clean" on the project (in Visual Studio: right click on the project, and select the "Clean" option).
It has the same effect as deleting the bin and obj folders as mentioned in another answer.
I'm trying to set up a Github Pages site for my Blazor project. Even with a brand new blazor project I have had no success. I consistently hit 404 errors with an unmodified new project, following the instructions people have given on this question.
You can find my current attempt at https://billybillyjim.github.io and the repro is at https://github.com/billybillyjim/billybillyjim.github.io
My current process has been this:
Create a brand new Client-side Blazor page in Visual Studio 2019 Preview (3.0.100-preview6-012264).
Go to Github Pages and create a repo named billybillyjim.github.io
Clone the repo to a local folder using the Desktop Github app.
Using the Publish option in the Build menu of VS2019 I select a folder profile.
After a successful build I move the files created from the published folder to the repo folder.
I commit and push to github.
I add a .nojekyll file, and add the SPA javascript scripts to both a new 404.html and to the index.html.
Trying to load the page gives me a 404.
"Failed to load resource: the server responded with a status of 404 ()"
This error is for every dll file.
Things I have tried:
Putting everything in a folder, changing the base href in index.html, and setting the SPA script segmentCount to 1.
Removing underscores and updating the file references in index and the two blazor.js files.
Changing the href in index.html to to the repo name as described at the end of the instructions here.
I've compared my setup to the example page at https://github.com/blazor-demo/blazor-demo.github.io has a very similar setup to mine, but it's a year old and seems to use a very different set of dlls and a different blazor.js.
I am entirely new to web development, so I think it's very likely I am completely misunderstanding something simple.
The two key things that got it working for me were:
providing a base path in the blazor index page
removing leading underscores from folders (e.g. the _framework and _bin folders).
Fixing the base path
You need to do this because the files in the Blazor app are referenced to the root of the site, and a GitHub Pages site has the name of you project as the first part of the path.
In the index.html change:
<base href="/" />
to:
<base href="/YOURPROJECTNAME/" />
This makes the browser add in your project name to the start of the path of any files it fetches.
If you are storing your Blazor app nested in another subdirectory, you'll also need to include that in the base path.
You can tell if this isn't working by looking at the dev tools of your browser and examining the paths of any 404s it's hitting.
Fixing the leading underscores
I had to:
Remove the underscores from the folders
Rename the references to _framework and _bin in index.html and framework\blazor.webassembly.js
Automating it
I used some PowerShell post-publish of the app to combine both of these steps: (Note that you'll need to set the <base> tag to the correct value for your project)
(Get-Content .\public\blazor-sample\index.html) `
-replace '<base href="/" />', '<base href="/lifti/blazor-sample/" />' `
-replace '_framework', 'framework' |
Out-File .\public\blazor-sample\index.html
Rename-Item .\public\blazor-sample\_framework "framework"
Rename-Item .\public\blazor-sample\framework\_bin "bin"
(Get-Content .\public\blazor-sample\framework\blazor.webassembly.js) `
-replace '_framework', 'framework' `
-replace '_bin', 'bin' |
Out-File .\public\blazor-sample\framework\blazor.webassembly.js
I finally figured it out! I don't know how I didn't notice before, but my repo was not actually accepting my bin folder, which contains all the application's dlls. So it seems (Maybe by default?) Github pages ignores bin folders. First I tried to edit my repo's gitignore file, but it didn't seem to update to show files, so I had to manually add the files using git add -f framework/bin/ and then commit and push. Now the site is working!
For anyone finding this post and having issues trying to work with Blazor in Azure Static Web Apps, try creating a fallback route as this seems to fix the 404 errors you get when doing a refresh or by typing in a route manually.
In the root of your project folder (typically where App.razor and Program.cs are located), create a new JSON file named staticwebapp.config.json and put something like the following in it:
{
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
}
}
Assuming you are using GitHub, don't forget to push your changes, wait for the CI/CD action to finish, and then test. You should now be able to refresh a page and type in routes manually.
See Configure Azure Static Web Apps for details about the file and what else it can do. More specific detail about the example above (and a detailed explanation of why it's needed) can be found in the Fallback Routes section of the same page.
Worth noting, this method did NOT require modifying the base href or removing any _'s from bin or framework folders. I tested using the base "Blazor WebAssembly App" template in Visual Studio 2022.
Hosting a Blazor app on Git pages is a pain. I tried multiple ways and it results in error somehow. However, if you are looking for a free limited deployment option for a Blazor app then you can try Firebase.
You can refer to my article https://ankitsharmablogs.com/hosting-a-blazor-application-on-firebase/ for a step-by-step guide of hosting a Blazor app on Firebase.
What worked for me was:
1.Set your base href like this: <base href="home" />
2. Add a page directive to Index.razor so it looks like this:
#page "/"
#page "/home"
Use navigationManager.NavigateTo("home"); instead of navigationManager.NavigateTo("/");
You don't need to rewrite your base href in Github Pages.
Happy coding!
Indeed, anyone still looking for Answer in 2022
GitHub expects pages to be generated by Jekyll static site generator. So it will not read any folder starting with an underscore _.
You can now disable this behaviour by
adding a .nojekyll file to the wwwroot folder.
For GitHub Actions
If you are using GitHub Actions for deploying, add this step before copying the files
- name: Disable Jekyll
run: touch release/wwwroot/.nojekyll
Happy hosting. Don't forget to upvote if you find this helpful, so more people can benefit from the update :)
I'm having troubles with my style sheets bundling after deployment to IIS.
I've created a simple solution to demonstrate my problem.
I've created a simple test project (VS 2012, MVC 4) with a single controller and a view containing an "Hello World" string.
I've created a (test) CSS under the content folder with simple simple color changing
Content\helloWorldCss\helloWorldStyle.css
Then, I've edited my BundleConfig.cs class and added the path to my CSS as a new bundle:
bundles.Add(new StyleBundle("~/Content/helloWorldCss").Include("~/Content/helloWorldCss/helloWorldStyle.css"));
Then, I've added the new bundle to my the _Layout.cshtml:
#Styles.Render("~/Content/helloWorldCss")
When I run my application via VS (or Page inspector) my CSS is being applied successfully and everything seems to be OK. However, when I publish/deploy my project to IIS (through VS), I can view my HTML but my CSS is not being applied.
The following file exists after deployment:
Content\helloWorldCss\helloWorldStyle.css
What really puzzles me is that when I alter my _Layout.cshtml and add a "regular" ref to the same CSS instead of using the bundle ref, the CSS is applied after publishing without any issues.
<link href="#Url.Content("~/Content/helloWorldCss/helloWorldStyle.css")" rel="stylesheet" type="text/css" />*
I will appreciate any help and advice on this.
I think you've got a name collision here. ASP.NET MVC will create a file on http://example.org/Content/helloWorldCss after minification and you already have a folder with the same path. Can you try it again after renaming your bundle?
BundleConfig.cs:
bundles.Add(new StyleBundle("~/Content/helloWorld").Include("~/Content/helloWorldCss/helloWorldStyle.css"));
_Layout.cshtml:
#Styles.Render("~/Content/helloWorld")
This is what i do.
IIS Config>Authentication>RightClickOn Anonymous Auth>Click Edit> Check Application pool identity
When you use VS publish to a test server, it uses defaultAppPool.
For the styling and SimpleMembership to work you need:
Install ASP.NET 4.0 on your server.
cmd -- cd C:\Windows\Microsoft.NET\Framework\v4.0.30319\
Type aspnet_regiis.exe -ir
Add an ASP.NET 4.0 app pool in IIS.
Set your site to use ASP.NET 4.0 as app pool.
Add an ASP.NET 4.0 security login in SQL Server and give it dbcreate role.
I have an ASP .NET MVC 4 app with BundleConfig.cs in the App_Start folder and a call to this class and the RegisterBundles method within the Global.asax.
Everything works fine regarding the Script bundling, but the style bundling produces nothing.
var bundle = new StyleBundle("~/bundles/css")
.Include("~/Themes/Rikkle.Web/Styles/app.min.css");
BundleTable.Bundles.Add(bundle);
I access the above bundle on the page like so:
<link href="/bundles/css" rel="stylesheet" type="text/css"/>
I am manually calling the link as opposed to using #Styles.Render() because the page output NOTHING when I call this (again, all script bundling still works). When I go to localhost:xxx/bundles/css in the browser I get a Status Code of 200, everything is fine, just that the payload is nothing. When I go to localhost:/themes/rikkle.web/styles/app.min.css in the browser, it pulls up without an issue.
Also, I am referencing System.Web.Optimization, the latest drop from Nuget, in both my views folder web.config and the main web.config.
This question is answered by: Bundler not including .min files
Essentially, if you have "min," as in "app.min.css," then the bundling blows up.
I have created common UI.css file and would like to share it between several projects. I have put it into separated folder and linked it using Existing Item... -> “Add as Link”. The file appears in solution explorer window as file with shortcut icon and I can open that file for editing with double click. The problem is that file is not copied to project and I can't use insert it into asp.net master template as
<link href="styles/ui.css" rel="Stylesheet" type="text/css" />
I get error that file is not found. How to share css file between projects?
Add as link does just as it suggests, simply adds a link to the file to the project file without actually making a copy of the file and moving it to the directory, so your code above will never work.
In terms of actually achieving this, perhaps if both of your sites are in the same solution you could add the css file to the solution as a solution file, I'm not 100% sure where these get put but you should be able to reference them the same way from either web site.
see MSDN and MSDN
To overcome this problem some time ago I created a 'MSBuild.WebApplication.CopyContentLinkedFiles' nuget package. This package adds MsBuild target which copies all content files added as link to project folder during build.