ASP .NET MVC 4.5 Style Bundling not outputting anything - c#

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.

Related

Why does my blazor page result in 404 errors on github pages?

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 :)

Why bootstrap isn't loaded Quick Install Package

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 .

Serving .cshtml files on IIS globally

I am trying to setup intranet IIS 8.5 (Win8.1) to globally serve .cshtml (Razor) files. The corresponding Application Pool is set to v4.0.
The files are simple Web Pages, not MVC. Here is an example of one:
<html>
<body>
#foreach (var i = 0; i < 10; i++)
{
<li>Item #i</li>
}
</body>
</html>
By removing the mapping of .cshtml files to System.Web.ForbiddenHandler on the IIS server's Handler Mappings I was able to get past the initial hurdle of ASP.NET telling me that
This type of file is not served.
However, the .cshtml files are now served verbatim to the browser, instead of being run through the Razor rendering process.
One would think that it should be easy to serve Razor pages from IIS, but it isn't. I need to somehow convince IIS to interpret these pages as Razor views; I suspect I am missing some mapping to the appropriate handler (I don't want MVC though - just simple Web Pages).
Here are some additional constraints:
I would definitely like to avoid including a bin folder with the requisite Razor assemblies in each of the sites on the server. The server hosts many sites, and I don't want to have to copy the bin folder everywhere. It should be possible to configure it globally, once and for all.
Ideally, I would not even need a local web.config for each site. The sites that are being served are a patchwork of technologies, containing .html, .shtml, .php, .asp, .aspx, and - hopefully - .cshtml files and should not be dependent on a single technology or config.
Creating a Visual Studio project is expressly out of the question. I should be able to use any text editor to modify the .cshtml files.
.NET Core is not installed on the machine and is not an option. Must use full Framework up to 4.6.2.
I am aware of many other SO questions that are similar, but don't quite solve my problem.
This question for example, was closed as "unclear" before it could have been answered, yet it was pretty clear to me! I am having the exact same problem.
The accepted answer to this question simply resorts to copying the bin folder. This is something I specifically don't want to do.
This answer says you can run an MVC application without installing MVC on your server, again by copying a bin folder into the local root. I do want to install Razor (but not necessarily MVC) onto my server globally.
Essentially, what I am trying to do is to use Razor syntax in a way reminiscent of classic ASP, or ASPX, without the baggage of MVC.
Can it be done?
I believe what you're looking for is a feature called ASP.NET Web Pages. If you use ASP.NET Core 2.0, the most recent new project templates uses Pages, rather than controllers and views. I've never read this doco, but I guess it should help you get started (or just create an ASP.NET Core 2.0 project from the new project wizard)

NET.CORE and ASPX 404. Is it possible to host aspx files and bring them in with iframes in net core wwwroot folder

Fairly new to net core as we are currently migrating from .NET environment. Is there a way to add a folder(or simply drop aspx files into wwwroot of web app) and have it run side by side so url structure doesn't break.
I have even tried to add a folder with a sample file in wwwroot called test/test.html and it load fine BUT adding an aspx within the same folder and trying to run it returns 404 (test/file.aspx) yet the file is physically there?
The compilation and configuration is very standard of a plain project net core 1.1 web app and is enabled to use static files as test.html works, any ideas suggestions?

Style bundling not working after IIS deployment (MVC 4)

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.

Categories