需要在JS文件之前加载并显示HTML文件，express.static不提供HTML文件

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

Answer 1

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