I'm having trouble getting my home.html file to display properly on the browser when I'm using express.static. Here is how my directory and file layout are structured:
dir main
-server.js
dir subMain
dir routing
-routes.js
dir public
-home.html
-list.html
Here is the code for server.js:
var path = require('path');
var express = require('express');
var app = express();
//Updated path with correct directory names
var htmlRoutes = require('./subMain/routing/routes.js')(app, path, express);
And here is the code for routes.js:
module.exports = function(app, path, express){
//The path.join should point to 'subMain'
app.use(express.static(path.join(__dirname + '..')));
//The path.join should go to 'app'
app.use(express.static(path.join(__dirname + '..', '..')));
app.use(express.static(path.join(__dirname + '..', 'public')));
app.listen(10003, function(){
console.log('connected on 10003')
})
}
Currently, I am facing two issues.
1) I attempted to use express.static instead of sendFile because my home.html file contains a link to the jQuery library and routes.js. When I used sendFile, the $ selector was not recognized due to JS loading before HTML. Hence, I switched to using express.static to load all files as shown above.
2) I keep receiving the message 'cannot GET /' in the browser. Even after removing the first two lines of code that utilize app.use(express.static), and having just one line pointing to the HTML in the 'public' directory, I continue to encounter this issue. How can I properly display home.html and ensure it loads fully before my JS file does to use the jQuery selector for a button click event that will trigger an Ajax call to GET /list and show list.html?