CODEWITHSUNDEEP
javascripthtmlnode.jsexpress
JohnWick
JohnWick

Reputation: 5149

NodeJS + Express served HTML file not loading js file?

I am running a NodeJS server which uses a catchall route to serve a file 'index.html'. In that file, I am linking to a javascript file in the same directory. That javascript file is not being correctly loaded. The error in my console reads 'Uncaught SyntaxError: Unexpected Token <', which after researching seems to mean that the path to my JS file is incorrect. However, the js file is located in the same directory as 'index.html', and I am referencing it like so which should be correct?

Here is my code

server.js

var express = require('express');
var app = express();
var config = require('./config');
var apiRouter = express.Router();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var User = require('./app/models/User');
var jwt = require('jsonwebtoken');
var path = require('path');

//Set the public folder
app.use(express.static('/public'));

//Allows us to parse POST data.
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

mongoose.connect(config.db);

var apiRouter = require('./app/routes/api')(app, express);

app.use('/api', apiRouter);

//MEAN apps use a catchall after any routes created by Node.

app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'public/app/views/index.html'));
});

app.listen(1337);

console.log('Server started at ' + Date());

public/app/views/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./test.js"></script>
<head>
<body>
    <h1>Served by node + express.</h1>
</body>
</html>

public/app/views/test.js

console.log('test.js loaded');

Upvotes: 13

Views: 18238

Answers (2)

mscdex
mscdex

Reputation: 106698

Here's what's happening:

  • The browser requests /, which is responded to by your catchall route, so it gets back index.html.

  • The browser then sees a script in the html at ./test.js, so the browser then interprets that as /test.js and makes a request for that. The express.static middleware looks up public/test.js, which does not exist, so it passes execution to the next defined route that matches the request, which is your catchall route. This means html is sent for the javascript file, hence the error that you see.

So to fix this, you need to change ./test.js to the actual relative path (./app/views/test.js) or use an absolute path (/app/views/test.js) to make sure the correct path is always used, no matter what the current path is.

Additionally, you will need to change this:

app.use(express.static('/public'));

to something like this:

app.use(express.static(__dirname + '/public'));

Otherwise the express.static middleware will look for a directory named public off the root of your filesystem and you will have the same problem with the catchall route serving html for your javascript file request.

Upvotes: 8

Bidhan
Bidhan

Reputation: 10687

You should set your static folder like this

app.use(express.static(__dirname + '/public'));

Also, your html file will look inside the /public folder itself for your script file. You'll need to give your index.html file the right path to your script file.

<script src="/app/views/test.js"></script>

Upvotes: 22

Related Questions