javascript not loading in HTML file - nodejs + expressjs

Question

I am new to nodejs and expressjs so Im trying to build simple web app to grasp both frameworks. Here I have built a project with the following architecture:

js
   test.js
views
   index.html
server.js

my server file looks like this:

var fs = require("fs");
var host = "127.0.0.1";
var port = 1337;
var express = require("express");
var ejs =  require("ejs");

var server = express();
server.use(server.router);
server.use(express(__dirname)); 
server.set('view engine','html');
server.engine('html', require('ejs').renderFile);

server.get("*", function(request, response){ 
    response.render('index.html');
});

server.listen(port, host);

and my index file like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Starter Template for Bootstrap</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script language="javascript"  src="/js/test.js" type="text/javascript"></script>
</head>

<body ng-app>
    <div class="container">
        <div class="starter-template">
           some code
        </div>

    </div><!-- /.container -->
</body>
</html>

My index.html file loads properly but I cannot get the test.js file to load. How can I fix this?

in the terminal I dont get any error but on the client side I get this: Uncaught SyntaxError: Unexpected token < bootstrap.min.js:1 Uncaught SyntaxError: Unexpected token < test.js:1 — Spearfisher
– Spearfisher, Commented Feb 26, 2014 at 12:54
@ArnaudDrizard if console reports you an error in test.js it mean that test.js have been loaded at least :) — zelibobla
– zelibobla, Commented Feb 26, 2014 at 12:58
Is your test.js file validated? and where is bootstrap.min.js coming from? — aludvigsen
– aludvigsen, Commented Feb 26, 2014 at 12:59
what I dont get is that I only put console.log('test'); in test.js and nothing gets printed — Spearfisher
– Spearfisher, Commented Feb 26, 2014 at 12:59

Kent Aguilar · Accepted Answer · 2015-12-23 14:28:21Z

2

Use express.static built-in middleware function in Express.

Add this line after server.engine. This mechanism should allow static files to be served e.g. images, javascripts, css

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

Now you can load:

http://localhost:1337/js/test.js

answered Dec 23, 2015 at 14:28

Kent Aguilar

5,4081 gold badge36 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Murugan Pandian · Accepted Answer · 2014-02-26 14:14:17Z

0

change render into sendfile and move your js folder to public folder then add this middleware server.use(express(__dirname+'/public'));

answered Feb 26, 2014 at 14:14

Murugan Pandian

7781 gold badge5 silver badges17 bronze badges

Comments

QauseenMZ · Accepted Answer · 2017-02-15 11:57:04Z

0

JS files are rendered as static files. Ref: https://expressjs.com/en/starter/static-files.html First create a folder "static" and keep .js files in it. Now, correct the script tags of these .js files in .ejs file.

answered Feb 15, 2017 at 11:57

QauseenMZ

1,2519 silver badges7 bronze badges

Comments

Badr Bellaj · Accepted Answer · 2017-08-19 23:46:00Z

0

in the nodejs side :

var path    = require("path");
app.use(express.static(path.join(__dirname + '/js')));//middleware

in the HTML page :

<script src="./my_script.js"></script>

answered Aug 19, 2017 at 23:46

Badr Bellaj

13.1k3 gold badges47 silver badges47 bronze badges

Comments

Tyler2P · Accepted Answer · 2022-07-30 08:10:05Z

0

As this files is static, you should add the entire root directory to 'app'.

Like this:

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

So that you can quote all of your files by relative path.

edited Jul 30, 2022 at 8:10

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jul 28, 2022 at 3:49

xiaokuige

11 bronze badge

Collectives™ on Stack Overflow

javascript not loading in HTML file - nodejs + expressjs

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related