Need to load and display HTML file before JS file, express.static not serving HTML file

Question

In my server.js file, I have the following

var path = require('path');
var express = require('express');
var app = express();
var htmlRoutes = require('./app/routing/routes.js')(app, path, express);

In my route.js

module.exports = function(app, path, express){

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

    //also tried doing 
    //app.use('/', express.static(__dirname + '/../public'));

    app.listen(10003, function(){
        console.log('connected on 10003')
    })
}

I am not sure why I keep getting the message 'cannot GET /' on my browser. My directory layout is the following

dir main
    -server.js
    dir subMain
      dir routing
        -routes.js
      dir public
        -home.html
        -list.html

What I am trying to do is, when I run 'node server.js', I want to load and display the home.html page before the routes.js file. This is because I need to load the document so that I can use jquery selector '$' and select a button class in home.html and give it a click event that will make an AJAX call to '/list' to display list.html.

I also tried doing

module.exports = function(app, path, express){

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

    app.use(function(request, response, next){
        response.sendFile(path.resolve(__dirname + '/../public/home.html'));
    })

    app.listen(10003, function(){
        console.log('connected on 10003')
    })
}

But I get the following error

Uncaught SyntaxError: Unexpected token <

I also tried using multiple lines of express.static

module.exports = function(app, path, express){
    //loading the directory with the home.html
    app.use(express.static(path.join(__dirname + '..', 'public')));
    //loading directory with server.js by going up two level, from routing directory -> app -> main (has server.js)
    app.use(express.static(path.join(__dirname + '..', '..')))

    app.listen(10003, function(){
        console.log('connected on 10003')
    })
}


//Edit, added jquery event handler for button click on home.html
$(document).on('click', '.btn', sendSurvery);

    function sendSurvery(){

        var myQueryUrl = "http://localhost:10003/survey";

        $.ajax({url: myQueryUrl, method: 'GET'}).done(function(response){

        });
    }

But I still get the message cannot GET /. I need to display the home.html first so that the jquery library in there will load, so I can select buttons and send the survey.html on a click event I forgot that my directories public and routing are in a subfolder called subMain

Eliezer Wohl · Answer 1 · 2017-01-03T00:06:50.860

0

Try this

Your server file should look like this

    var path = require('path');
var express = require('express');
var app = express();

require('./subMain/routing')(app, path, express);
    app.listen(9000, function(){
      console.log('connected on 9000')
    })

also, changes the name of your routes.js to index.js. Keep it in the routing folder (don't change the name). The following code should be in there. I also changed your port number. Shouldn't be that high.

      module.exports = function(app, path, express){
    app.use(express.static(__dirname + "/public"));
    app.use(function(request, response, next){
      response.sendFile(process.cwd() + "/subMain/public/home.html");
    })
}

I've posted everything on a github repo, so you can see the file structure.

https://github.com/eliezerwohl/stackoverflowAnon

edited Jan 03 '17 at 00:06

answered Jan 01 '17 at 21:45

Eliezer Wohl

577
1
6
20

I need to use the 'app.use' to serve the html file. With the way you did it, can't I just get rid of line 1 and just use the app.get? What does app.use do on line one? – henhen Jan 01 '17 at 21:48
@ANonymous I changed my code to match yours better. As for my first line of code https://expressjs.com/en/starter/static-files.html – Eliezer Wohl Jan 01 '17 at 21:56
if you take take your route.js code and drop it in your server.js file, does it work? – Eliezer Wohl Jan 01 '17 at 22:00
and if you don't want to do that, try changing (in your server.js file) "var htmlRoutes = require('./app/routing/routes.js')(app, path, express);" to "require('./routes')(app, path, express); – Eliezer Wohl Jan 01 '17 at 22:06
it wont work since the routes.js is in another directory – henhen Jan 01 '17 at 22:22
@anonymous I've changed my answer, updated the code, and created a github repo as reference. – Eliezer Wohl Jan 02 '17 at 00:54
I need to use 'app.use' in the routes.js file, not server.js. And what would doing require on a directory do? – henhen Jan 02 '17 at 05:54
Also, I updated my directory layout. I forgot the directories public and routing are in a folder called subMain – henhen Jan 02 '17 at 09:33
@Anonymous Well, I've updated the code and github with your new file structure. I wouldn't put the app.listen there. The require on the directory is weird syntax, but for some reason thats hows it's done. See http://stackoverflow.com/questions/6059246/how-to-include-route-handlers-in-multiple-files-in-express – Eliezer Wohl Jan 03 '17 at 00:08
I keep getting the error in terminal 'Error: Cannot find module './app/routing'. I think it has to be './app/routing/routes.js', but when I do that, it sends the home.html to the browser, but in console, i get the error 'Uncaught SyntaxError: Unexpected token < routes.js:1. And also, I updated my routes.js file and included a jquery button event handler but it keeps saying '$' is undefined. I think this is because the html is not loading before js. – henhen Jan 03 '17 at 05:25

Need to load and display HTML file before JS file, express.static not serving HTML file

1 Answers1