TutorialMeta
Ad

Why Can't My Web App Load This Script?

- 1 answer

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.

Ad

Answer

Here's how I got it working.

  • When I tell PhpStorm to open 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.
  • 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.

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad