CODEWITHSUNDEEP
javascripthtmlangularjs
StockDC2
StockDC2

Reputation: 163

External files not loading into HTML

I have a problem loading external files into my index.html. My stylesheet as well as my JS files do not show up at all (Error 404 - Not Found). My directory structure is as follows.

File Structure

My index.html is:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Orders and Customers</title>
    <link rel="stylesheet" type="text/css" href="./assets/css/stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.min.js"></script>
    <script src="./../app/app.js" type="text/javascript"></script>
    <script src="./../app/controllers/customer/CustomerController.js"></script>
    <script src="./../app/controllers/order/OrderController.js"></script>
    <script src="./../app/services/customer/CustomerService.js"></script>
    <script src="./../app/services/order/OrderService.js"></script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

This is what Chrome shows:

enter image description here

My server.js is:

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');

var app = express();

app.use(bodyParser.json());

require('./server/config/mongoose.js');
require('./server/config/routes.js')(app);

app.use(express.static(path.join(__dirname, './views')));

app.listen(8000, function() {
console.log('Listening on Port 8000');
})

Any help is greatly appreciated!

Upvotes: 1

Views: 1467

Answers (5)

StockDC2
StockDC2

Reputation: 163

Thanks to SeongHyeon, I was able to figure out the solution to my problem. I really appreciate your guys' help. I'd like to elaborate more on this just for my own reference.

When declaring your static path in express, you don't need to reference anything relative to the file that you're trying to import from. Instead, you simply reference the file from the static path that you've declared.

Upvotes: 0

ian park
ian park

Reputation: 122

Try this

in server.js

var router = express.Router();
router.use(express.static(path.resolve(__dirname, "../app")));

in index.html

<script src="/app.js" type="text/javascript"></script>
<script src="/controllers/customer/CustomerController.js"></script>
<script src="/controllers/order/OrderController.js"></script>
<script src="/services/customer/CustomerService.js"></script>
<script src="/services/order/OrderService.js"></script>

Router is middle-ware for capture * path. For example, /service/* matches all requests under service path. so I changed your code as to handle all resources under "/app" folder. (eg: /app/app.js, etc)

path.resolve changes path from relative to absolute. it means that you can add another current working directory. path.resolve(__dirname, "../app") add "/app" from current working directory (views). it parsed from "views/../app" to "/app"



(Reference) Path.resolve

Upvotes: 3

Syed Faizan
Syed Faizan

Reputation: 961

Try this

app.use(express.static(path.join(__dirname, 'views')));

and just use

<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css">

Upvotes: 0

Beans
Beans

Reputation: 387

Rather than 

<script src="./../app/app.js" type="text/javascript"></script>

Try using the full path:

<script src="/app/app.js" type="text/javascript"></script>
<script src="/app/controllers/order/OrderController.js"></script>

Upvotes: 0

Hammad Akhwand
Hammad Akhwand

Reputation: 799

The relative paths

<script src="./../app/app.js" type="text/javascript"></script>

etc, are pointing to the wrong directory.

Use the Network tab in your browser developer tools, to check what exact requests are going out.

If the whole app directory is public (Which, in my opinion, should not be the case), "./../" will refer to the views directory. Single . refers to the current directory, which in this case is, the one containing your index.html. Double .. refers to the directory above it, which here is views.

Upvotes: 0

Related Questions