Using PhpStorm, I ran index.html in the browser (Chrome). It finds the CSS file referenced, but throws a 404 error when trying to find main.js
. The file was generated by gulp
and it is there. The file permissions seem correct as well (664). Any idea what's going on?
I also typed the URL to the index.html
directly in Chrome and have the same issue so it's not PhpStorm's web server. The CSS is loading because I can see the bootstrap-like navbar that I coded in the body
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/img/favicon.ico">
<title>Mobile Web App</title>
<style type="text/css">
body {
padding-top: 70px;
}
</style>
<link rel="stylesheet" href="assets/libs/bootswatch-dist/css/bootstrap.min.css">
<base href="/">
</head>
<body>
...
<script type="text/javascript" src="assets/js/main.js" defer></script>
</body>
</html>
EDIT: Checked DevTools and it's fetching the CSS file at http://localhost:63342/app-folder/assets/libs/bootswatch-dist/css/bootstrap.min.css
but the JS file at http://localhost:63342/assets/libs/bootswatch-dist/css/bootstrap.min.css
. That seems to be the issue but I'm not certain how to fix it.
Here's how I got it working.
index.html
in Chrome it launches at localhost:XXXX/app-folder/index.html
where app-folder
is just the project folder in PhpStorm. It basically launches it's own built-in web server which is probably better than accessing the file directly in the browser.localhost:XXXX/app-folder/
and it will work (notice the trailing slash).base
as /app-folder/
and left it at the bottom of <head>
I hope this helps someone else.