Express js external javascript file not loading

Question

Express js external javascript file not loading

I use an express app to serve an static pre-compiled jade file. which includes a external javascript file. but its not loaded while the page gets loaded. but i can access the javascript by the express static/public url. Why its not loading on the html?

app.js

var express = require('express'),
    path = require('path'),
    sass = require('node-sass');

var app = express();

/* default configurations */
app.set('views', __dirname + '/public');
app.engine('html', require('ejs').renderFile);

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

/* routes */
app.get('/', function(req, res) {
  res.send('Hello World');
});

app.get('/home', function(req, res) {
  res.render('index.html');
});

module.exports = app;

index.html

  <body>
    <script type="text/javscript" src="/scripts/site.js"></script>
    <script type="text/javascript">
      window.onload = function()  {
        Site.View.init();
      }
    </script>
  </body>

site.js

var Site = Site || {};
Site.View = {
  init : function() { alert('view'); }
};

When i open the page in browser i get ReferenceError: Site is not defined

Thanks.

javascript
html
node.js
express

Answer 1

Add app.use('/public/js', express.static(path.join(__dirname, '/public/scripts'))); to app.js, in order to indicate the subfolders of the pulic folder;

If it still not works, change src="/scripts/site.js" to src="/public/scripts/site.js";

Answer 2

site.js must be inside public/scripts from your root directory.

I am not sure but both views and express static pages are gone to public directory in your code. Use default configuration as: app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.use(express.static(path.join(__dirname, 'public')));