ASP.NET 5 - Getting a 404 error, but when I dig in with the console on chrome, I see it is looking in an old directory - html

I'm referencing these files in my index.html:
<link href="wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="wwwroot/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<script src="wwwroot/lib/jquery/dist/jquery.min.js"></script>
<script src="wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="wwwroot/lib/angular/angular.min.js"></script>
<script src="wwwroot/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="wwwroot/app/app.js"></script>
<script src="wwwroot/app/controllers/home.controller.js"></script>
But when I build the project with IIS Express in visual studio, I get a 404 error for each one. When I look at the console and resources tabs in Chrome to see where it's trying to pull the files from, I see that the directory is an old one from a previous, similar project.
I've tried clearing my cache in several different ways and deleting the old project altogether, but nothing is working...

wwwroot is the root WWW directory. You should remove these path prefixes from your script's and css's links.
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/angular/angular.min.js"></script>
<script src="~/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="~/app/app.js"></script>
<script src="~/app/controllers/home.controller.js"></script>

Related

css file is not loading on localhost using xampp

I'm trying to include css and js files in my php files on localhost:
<link rel="stylesheet" href="http://localhost/neu/css/bootstrap.min.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="http://localhost/neu/css/jquery-ui.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="http://localhost/neu/scripts/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="http://localhost/neu/scripts/jquery-ui.js"></script>
<script type="text/javascript" src="http://localhost/neu/scripts/bootstrap.min.js"></script>
I'm using xampp with this structure:
css-files:
php-files:
On the source view of the site I can click on the links for the .css and .js files and the correct files are shown.
I also tried href="neu/css/... but the same, the .css and .js are not loading on my page.
Also tried loading the .css from outside (like <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">) but the same.
So it is possible that xampp is blocking somehow the links? Thanks
Edit:
Screenshot from Developer Tools:
If your root folder is neu then I dont think its necessary to add hat in the address. try using ....href="css/... Also I sometimes experience no change in style when I add css until I clear cache.... I think in your case is the address and then try clearing cache

A href tag not working

I am creating download links to PDFs of Chinese articles I have written, but for some reason, the links are not working. I stopped at the first li because I could not figure it out. Even when I change it to a simple a href to my home page, it still does not work.
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="Chinese.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Yellowtail" />
<link rel="stylesheet" href="animate.css">
<script type="text/javascript" src="home.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery-2.1.1.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-2.1.1.min.js"><\/script>')</script>
<script src="Chinese.js"></script>
<div class="samples">
<li><a href="XiJinPing.pdf" download>習近平反貪</a></li>
<li>伊波拉與伊斯蘭國:世界末日的徵兆</li>
<li>人類是否應探索太空?</li>
<li>社會的價值觀與同性戀</li>
<li>兩岸的未來</li>
</div>
Originally I thought you meant the links to the files were not working. (Which is why I suggested the following)
The download attribute is not supported in IE or Safari. Which browser are you using? Do you get an error message? Make sure your XiJinPing.pdf file is in the same directory as the HTML file.
Is the source actually being served or just opened in the browser?
http://www.w3schools.com/tags/att_a_download.asp
Now that I have re-read the question it appears that you mean the link tags are not working.
The first CSS (shift.css) only adds a font-face to know if it works you will need to add that font-face to an item through a style.
div {
font-family: Shift;
}
jsFiddle
The second thing you need to do is add the javascript for bootstrap.
Also if you run into Cross Scripting errors, you may need to use HTTPS versions of the links to your css files or vice versa. Chrome blocks traffic automatically but a shield will show up in the address bar and you can select it to allow the traffic anyway.
You should also close the link tags.

HTML doesn't load webpack-built files

My build on webpack-dev-server works fine, but when I compile with NODE_ENV=production webpack --config html file outputs blank page.
In dev-server html I load files this way
<script src="http://localhost:8000/build/vendor.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:8000/build/main.css" media="screen" />
<script src="http://localhost:8000/build/main.js"></script>
And in production html (resides in /build/):
<script type="text/javascript" src="vendor.js"></script>
<link rel="stylesheet" type="text/css" href="main.css" media="screen"/>
<script type="text/javascript" src="main.js"></script>
Configs differ in following:
Production env removes
react-hot style-loader css-loader less-loader loaders,
entries 'webpack/hot/dev-server' 'webpack-dev-server/client?http://0.0.0.0:8000', HotModuleReplacementPlugin(), #eval devtool
Production env adds:
style css less loaders, optimize.OccurenceOrderPlugin(), optimize.UglifyJsPlugin({comments: /a^/, compress: {warnings: false}}, sourcemap devtool
Thanks for help!

stylesheet does not work after publishing

<link type ="text/css" href="../../Content/jquery.treeview.css" rel="Stylesheet" />
<link type ="text/css" href="../../Content/screen.css" rel="Stylesheet" />
<script src="/../../js/jquery.js" type="text/javascript"></script>
<script src="/../../js/jquery.cookie.js" type="text/javascript"></script>
<script src="/../../js/jquery.treeview.js" type="text/javascript"></script>
i am working with mvc. i have these css and js links in my view. it works perfectly when i work on localhost. but after publishing, it seems like these css or js files does not work. i checked authorization settings of these files and there is nothing wrong.
Try using
<link type="text/css" href="#Url.Content("~/content/jquery.treeview.css")" rel="Stylesheet"/>
Instead of giving path like this. i think you should provide the full path. After giving the full path, it will work everywhere.
<link type ="text/css" href="http://www.domain.com/Content/jquery.treeview.css" rel="Stylesheet" />
<link type ="text/css" href="http://www.domain.com/Content/screen.css" rel="Stylesheet" />
<script src="http://www.domain.com/js/jquery.js" type="text/javascript"></script>
<script src="http://www.domain.com/js/jquery.cookie.js" type="text/javascript"></script>
<script src="http://www.domain.com/js/jquery.treeview.js" type="text/javascript"></script>
Can you post the URL where you are having the problem? It sounds like an issue with your relative
paths.
Here is what you can do:
Open up the site in Chrome
View page source
Up in the header, right click on the link to your CSS file and select Open Link in New Window
My guess is that you will get a Not Found error. Look at the URL to the non-existent CSS file
and see if it matches up to where you think it is.
Best,
Cynthia
The recommended way to insert URLs of contents in your MVC web application is by using Url helper.
E.g.
Css:
<link type="text/css" href="#Url.Content("~/Content/jquery.treeview.css")" rel="Stylesheet" />
Scripts:
<script src="#Url.Content("~/js/jquery.js")" type="text/javascript"></script>

How do I reference my javascript files with this folder structure?

This is a very simple thing that I can't seem to get to work. What is the correct way for referencing my resources folder in my script and link tags? Is there a trick to this since my URLs are mapped to Spring resources? Do I have to do anything special since my resources folder isn't in my WEB-INF folder? Do I need to move it into the WEB-INF folder? If I do move it there, how would it be referenced inside the WEB-INF folder. I have tried everything I can think of, including....
With folder in current position -
/WebContent/resources/scripts/jquery-1.6.1.min.js
/resources/scripts/jquery-1.6.1.min.js
../resources/scripts/jquery-1.6.1.min.js
../../resources/scripts/jquery-1.6.1.min.js
/../resources/scripts/jquery-1.6.1.min.js
/../../resources/scripts/jquery-1.6.1.min.js
With folder inside WEB-INF -
/resources/scripts/jquery-1.6.1.min.js
../resources/scripts/jquery-1.6.1.min.js
../../resources/scripts/jquery-1.6.1.min.js
/../resources/scripts/jquery-1.6.1.min.js
/../../resources/scripts/jquery-1.6.1.min.js
Are any of these right?
I'm getting this in my console when I use 'resources/scripts/jquery-1.6.1.min.js' -
May 23, 2011 11:30:19 AM org.springframework.web.servlet.DispatcherServlet noHandlerFound
WARNING: No mapping found for HTTP request with URI
[/ProjectName/resources/styles/global.css] in DispatcherServlet with name 'spring'
home.jsp -
<html>
<head>
<title>
title goes here
</title>
<script type="text/javascript" src="/WebContent/resources/scripts/global.js"></script>
<script type="text/javascript" src="/WebContent/resources/scripts/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/WebContent/resources/styles/global.css" media="screen" />
<script type="text/javascript">
$(document).ready(
function(){
alert('hello');
});
</script>
</head>
<body>
${message}
<input id="inputField"></input>
</body>
</html>
Replace for this:
<script type="text/javascript" src="resources/scripts/global.js"></script>
<script type="text/javascript" src="resources/scripts/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/styles/global.css" media="screen"