When i go to posts index route (http://localhost:3000/posts), the main.js file served in /public/scripts folder is found, but when i go to the posts show route (...localhost:3000/posts/:id) or any other posts route, chrome's console throws an 404 error for main.js file. Apparently, it's trying to find /scripts at the /views/posts directory.
https://i.sstatic.net/CWrxF.jpg
Here's my code
app.js:
var express = require("express"),
app = express(),
bodyParser = require("body-parser"),
mongoose = require("mongoose"),
methodOverride = require("method-override");
var postRoutes = require("./routes/posts");
app.use(bodyParser.urlencoded({extended: true}));
app.set("view engine", "ejs");
app.use(express.static(__dirname + "/public"));
app.use(methodOverride("_method"));
app.use("/posts",postRoutes);
app.listen(3000, function(){
console.log("application server is running")
});
routes/posts.js
var Post = require("../models/post");
var express = require("express");
var router = express.Router();
var middleware = require("../middleware");
//INDEX - show all colectives
router.get("/", function(req, res){
console.log("get request at /posts");
Post.find({}, function(err, allPosts){
if(err){
console.log(err);
} else {
res.render("posts/index", {posts: allPosts});
} //if
}); // Post.find
}); //router.get
//NEW - show form for creating new post
router.get("/new", middleware.isLoggedIn, function(req, res){
console.log("get request at /posts/new");
res.render("posts/new");
}); //router.get
//SHOW - show more info about a post
router.get("/:id", function(req, res){
console.log("get request at /posts/" + req.params.id);
//find the post with provided id
Post.findById(req.params.id).populate("comments").exec(function(err, foundPost){
if(err){
console.log(err);
} else {
res.render("posts/show", {post: foundPost});
} // if
}); //Post.findByID
}); //router.get
//EDIT - show edit post view
router.get("/:id/edit", middleware.checkPostOwnership, function(req, res){
console.log("get request at /posts/" + req.params.id + "/edit");
Post.findById(req.params.id, function(err, foundPost){
res.render("posts/edit", {post: foundPost});
}); //Post.findById
}); //router.get
module.exports = router;
views/posts/show.ejs
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="masterContainer">
<div class="container">
...
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!-- Bootstrap's JavaScript-->
<script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
Sorry if i misused some programming terms, i'm new to web developing and not a native english speaker. Thanks ahead.
I would add a static express middleware to app.js to avoid problems like that.
app.use('/scripts', express.static(_dirname + '/path/to/scripts'));
Basically, what that does is make sure that whichever level you are on your app, express will always know where to look for the folder scripts.