Mapping to wwwroot in ASP.NET 4 - but with MVC - asp.net

I am trying to make only static files accessible which are in the wwwroot subfolder of my .NET 4.x project, following the accepted answer from Map to wwwroot in ASP.Net 4?
This means that the MVC script Scripts/LoginPage/app.js will no longer be accessible at all, while wwwroot/Scripts/LoginPage/app.js will be accessible through http://localhost:8080/Scripts/LoginPage/app.js.
However, the project has MVC pages with Bundles, and I am now trying to configure the bundles correctly. The old bundle config is like this:
bundles.Add(
new ScriptBundle("~/Bundles/Scripts/loginpages/index").Include(
"~/Scripts/LoginPage/application.js",
"~/Scripts/LoginPage/index.js"));
The MVC page is rendering the bundle like this:
#Scripts.Render("~/Bundles/Scripts/loginpages/index")
If I just keep everything as is, the page contains the unbundled scripts as follows:
<script src="/Scripts/LoginPage/application.js"></script>
<script src="/Scripts/LoginPage/index.js"></script>
but the files themselves are not accessible.
If I move the scripts but keep the bundle config unchanged, scripts are not included in the HTML at all.
If I move the scripts into the wwwroot subfolder, and change my bundles to reference the scripts in that subfolder:
bundles.Add(
new ScriptBundle("~/Bundles/Scripts/loginpages/index").Include(
"~/wwwroot/Scripts/LoginPage/application.js",
"~/wwwroot/Scripts/LoginPage/index.js"));
then in the debug version this yields the following result HTML:
<script src="/wwwroot/Scripts/LoginPage/application.js"></script>
<script src="/wwwroot/Scripts/LoginPage/index.js"></script>
but the content of the wwwroot folder (which includes the unbundled scripts) will be available at /, not /wwwroot/, thus the files are not found.
How can I configure my scripts/bundles correctly?

Related

Problem with css / js path is not opening in asp.net core blazor

I am shifting my development environment from windows to mac, and when I run the code after the complete setup, my website doesn't loads and doesn't shows any style and js doesn't work.
I have this path of the file, everything was working on my windows very fine but when I run it from the mac then the file path is not loading, how do I fix this? I am trying to search whole web, couldn't find this answer and ended up here :(
<link href="/_content/FileUploading.SearchEngine.Shared/content/styles/bootstrap.min.css" rel="stylesheet">
<link href="/_content/FileUploading.SearchEngine.Shared/content/styles/style.css" rel="stylesheet">
<link href="/_content/FileUploading.SearchEngine.Shared/content/styles/dashboard.css" rel="stylesheet">
<link href="/_content/FileUploading.SearchEngine.Shared/content/scripts/script.js" rel="stylesheet">
This become the url of the path of the file = https://localhost:5002/_content/FileUploading.SearchEngine.Shared/content/styles/dashboard.css
This doesn't loads.
I have this path of the file, everything was working on my windows
very fine but when I run it from the mac then the file path is not
loading, how do I fix this?
It would be nicer if you could share your configuration details regarding how you are calling the path and where is your actual resources are located. The issue you are having might be causing due to numerous reasons.
As you may know, a BlazorWebView control has a configured host file (HostPage), typically wwwroot/index.html. The HostPage path is relative to the project. All static web assets (scripts, CSS files, images, and other files) that are referenced from a BlazorWebView are relative to its configured HostPage.
Thus, web root of the HostPage determines which subset of static assets are available. Therefore, its recommended placing the HostPage at the root of the wwwroot folder of the app, which provides the greatest flexibility for supplying static assets from the app, RCLs, and via subfolders of the app and RCLs.
How to Resolve:
Static File Middleware configuration :
Let's consider, your resouce files are outside of your wwwroot folder; Therefore, In non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly. For you scenario if your static are placed outside, please check if you are using as following:
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(builder.Environment.ContentRootPath, "StaticFilesFolderName")),
RequestPath = "/StaticFilesFolderName"
});
Then you should refer that files as following on your _Layout.cshtml file:
<link rel="stylesheet" href="~/StaticFilesFolderName/site.css" asp-append-version="true" />
Note: Please have a look this official document.
Program.cs File:
builder.WebHost.UseStaticWebAssets();
Note: If you have static file configuration you should have UseStaticWebAssets in your program.cs file just below the builder.
Check App based path:
As explained earlier, this might happening due to your resource path while moving to MAC. In this scenario its recommended to use relative based path reference on top of your base href in _Layout.cshtml after that you can place rest of your resource file. So if your resource are inside wwwroot place your base href top of your other path reference and access it by hostname/your_resource_path.
<base href="~/" />
and following should also work:
<base href="~/YourApp/" />
Note: The trailing slash is required in some scenrio if you would get any css loading issue.
Static files in non-Development environments:
Be aware of non development environment as well because Blazor apps run locally, static web assets are only enabled by default in the Development environment therefore, to enable static files for environments other than Development during local development and testing we have to call UseStaticWebAssets on the WebApplicationBuilder.
Output:

Where to put ~/Areas/../Views/xxx.cshtml specfic js files in ASP.NET

I am porting a website from MVC4 to ASP.NET Core 3.0
My major views have view specific complex script files which I used to put in the /Areas/AreaName/Scripts/ directory and access them with something like.
I used to put these in a script directory in the area.
<script src="~/Areas/AreaName/Scripts/*ViewName*Scripts.js"></script>
Doing that now results in a fully dedicated file name like
<script src="C:\Users\..\..\..\..\*ViewName*Dripts.js"></script>
Which is clearly not the way to go for obvious reasons.
Do all scripts including view specific scripts now go in the ~/wwwroot/... directory
Static files are stored within the project's web root directory. The default directory is {content root}/wwwroot . The simplest way is create area folders in wwwroot\js , and add area specific js flies into corresponding folder . You can also serve files outside of web root(/wwwroot), see document for code sample .

Serving a web app from a nested folder in ASP.NET as if it was root

I am working with an Angular 2 app that is being served with a simple ASP.NET WebApplication.
The whole code is bundled into 1 folder with webpack. Currently when I want to (re)deploy the ng app I have to delete old bundle and index.html files and paste in new ones, then include them in VS project and publish.
How would I go about serving all those files from a dist/ folder in my asp.net app without changing the autogenetared files?
I tried putting the folder, that includes index.html, there, and adding path to that index file in web.config, but then I also need to update the autogenerated paths to bundles on index.html, because by default it still looks at the root dir.
you may set base tag in your html.
<head>
<base href="/dist/" >
</head>
so all the URL will be relative to that.
And you may access your application by navigating to
<root url>/dist/index.html
Hope this helps!!

Using js/css compression frameworks at both asp/aspx files

I have a website which has both asp and aspx pages. Can I use System.Web.Optimization, Combres etc frameworks for both.
Another problem is that these pages doesn't have code-behind as they are generated from the same template at deployment time. Also, I don't have any bin folder at root of website, but at individual virtual directories in IIS. That is, my root of website only has these static asp/aspx files, global.ascx, web.config, css and js files.
So, I can't use something like below because these DLL's doesn't exist at root bin folder:
<%=System.Web.Optimization.Scripts.Render("~/AdminJS.js")%>
<%=Url.CombresLink("AdminJS") %>
A simple solution like <script type='text/javascript' src='/cms/bundling/scripts/admin.js?v=123'></script>
Let me know if more clarity is required.
It shall be great help if I could implement these frameworks.

Stylesheets in new Spring MVC 4

I started a new web project in Spring MVC 4(Spring Boot) and my question is where I must put my css files? I'm using thymeleaf template engine and my folder structure as in picture
as can u see, I trying create a CSS folder under the resources folder, but the link <link rel="stylesheet" href="/resources/css/main.css" /> from index.html is not working. any ideas?
Per the howto docs:
Spring Boot by default will serve static content from a folder called /static (or /public or or /resources or /META-INF/resources) in the classpath or from the root of the ServeltContext.
There's also a sample or two, e.g. this one.
Make sure you are packaging your project as a war in your pom.xml.
The /src/main/resources folder is usually deployed to WEB-INF/classes, so it won't be accessible directly from the context.
However, The /src/main/webapp is normally deployed to / (root of your web app), which is accessible from the context.
You should put your web resources under /src/main/webapp (e.g. /src/main/webapp/css). These are then automatically deployed under the context root of your web application. They are then accessible from e.g. /css.
<link rel="stylesheet" th:href="#{/css/main.css}" />
I'd also move your templates to /src/main/webapp/WEB-INF/templates.
If you read the SpringBoot documentation you will see that Spring Boot will automatically add static web resources located within any of the following directories:
/META-INF/resources/
/resources/
/static/
/public/
You have created folder named "css" and you put your file "main.css" inside this folder.
So you should use relative path when referencing this file inside your HTML
<link rel="stylesheet" href="/css/main.css" />

Resources