My directory structure is organized as follows:
--votingApp
app.js
node_modules
public
css
mystyle.css
views
test.jade
mixins.jade
In the file mixins.jade, I have created some general purpose blocks like 'boilerplate', 'nav', and 'nav item'. The main file is test.jade.
include mixins
doctype html
html(lang="en")
head
+boilerplate
link(rel="stylesheet",type="text/css",href="../public/css/mystyle.css")
body
+nav("Voting app","navigation_menu")
+nav_item("#","active") Home
+nav_item("#") Signup
+nav_item("#") Login
Here is my app.js file:
var express=require('express');
var path=require('path');
var app=express();
app.use(express.static(path.join(__dirname,'public')));
app.set('views','./views');
app.set('view engine','jade');
app.get('/',function(req,res){
res.render('test.jade');
});
app.listen(8000);
The issue I am facing is that the mystyle.css file is not being loaded. When checking the network option in the developer console of Mozilla, it shows error 404 for the request for mystyle.css (request url-http://localhost:8000/public/css/mystyle.css) Can someone please advise me on what to do? Thank you for your assistance.