Why Can't My Web App Load This Script?
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" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="assets/img/favicon.ico">
<title>Mobile Web App</title>
<style type="text/css">
body {
padding-top: 70px;
}
</style>
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="assets/libs/bootswatch-dist/css/bootstrap.min.css">
<base target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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.
Answer
Here's how I got it working.
- When I tell PhpStorm to open
index.html
in Chrome it launches atlocalhost:XXXX/app-folder/index.html
whereapp-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. - I can then simply retype it as
localhost:XXXX/app-folder/
and it will work (notice the trailing slash). - Also, I had to set the
base
as/app-folder/
and left it at the bottom of<head>
I hope this helps someone else.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM