title: NodeJS app: error 404 for scripts/main.js when trying to link
body: <p>When i go to posts index route (<a href="http://localhost:3000/posts" rel="nofollow noreferrer">http://localhost:3000/posts</a>), 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.</p>
  
  <p><a href="https://imgur.com/2uNAgBw" rel="nofollow noreferrer">http://imgur.com/2uNAgBw</a></p>
  
  <p>Here's my code</p>
  
  <p>app.js:</p>
  
  <pre><code>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") 
  });
  </code></pre>
  
  <p>routes/posts.js</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>views/posts/show.ejs</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          ...
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="masterContainer"&gt;
              &lt;div class="container"&gt;
                  ...
              &lt;/div&gt;
          &lt;/div&gt;
              &lt;!-- jQuery --&gt;
          &lt;script src="https://code.jquery.com/jquery-3.2.1.js"&gt;&lt;/script&gt;
              &lt;!-- Bootstrap's JavaScript--&gt;
          &lt;script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/main.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Sorry if i misused some programming terms, i'm new to web developing and not a native english speaker. Thanks ahead.</p>