Difficulty setting up a 'post' route in an express server issue

Question

I'm attempting to validate that my client can post info to it's server. I've set up this 'route' in my Express server.

// server.js  this is the server for the PvdEnroll application.
// 

var express = require("express"),
    http = require("http"),
    mongoose = require( "mongoose" ),
    app = express();

// static file directory for default routing
app.use(express.static(__dirname + "/client"));
app.use(express.urlencoded());

// create Express-powered HTTP server 
http.createServer(app).listen(3000);
console.log("Server listening at http://127.0.0.1:3000/");

// set up a post route in the server
app.post("/selections", function (req, res) {
  console.log("data has been posted to the server!");
});

app.post("/selections", function (req, res) {
  console.log("Some data has been posted to the server from app.js");   
})

The client uses this file:

 var main = function () {
"use strict";

$.getJSON("../data/checkBoxesA.json", function(checkBoxTxt) {
    checkBoxTxt.forEach(function (data) {
        var $checkbox = "<input type ='checkbox' name = " 
            + data.label  + "id = 0 UNCHECKED/>";
      $(".enroll_actions").append($checkbox);
      $(".enroll_actions").append(' ' + data.label + "<br/>");
      $(".enroll_actions").append(' ' + data.note + "<br/>");
      $(".enroll_actions").append('              '+ "<br/>");           
    });
}); 
$(".comment-input").on("click", function (event) {
    console.log("Hello World!");            
    // here we'll do a post to our selections route
    $.post("selections", {}, function (response) {
        console.log("Client says - We posted and the server responded!");
        console.log("Response from server :", response);        
        console.log("STUBB1");
    });     
});
  console.log("STUBB2");
};
$(document).ready(main);

In the Chrome console I'm getting:

POST file:///Users/*******/Projects/r_PE/app/PvdEnroll/client/html/selections    net::ERR_FILE_NOT_FOUND

A path is being sought but a tutorial's example (which works!) and is structurally identical to mine(?) uses a name ie "selections" to establish a route between client and server .

I'm running the server on my Mac using Virtual Box and Vagrant.

Thanks for any clarification.

Answer 1

On restarting the server the log message is now "POST 127.0.0.1:3000/html/selections 404 (Not Found).

Okay. This is some helpful information!

Basically, your file structure is more or less this (some file names will be different, just look at the general structure):

• Node.js code (including main .js file and the module.json )
• client : a folder for your static content
  • html : a folder
    • index.html : the file you are currently using

Anyway, jQuery.post() is fed a relative path (as apposed to an absolute path). That means that, based on the location of where the code was, it will "guess" the location of the file.

That means that it was trying to find a route at [locahost:port]/html/selections when your server is listening at [localhost:port]/selections ! You'll need to have jQuery post to /selections instead of just selections .

For more information, this blog post is helpful (relative paths work the same in Javascript/CSS). The helpful snippet:

Here is all you need to know about relative file paths:

• Starting with "/" returns to the root directory and starts there
• Starting with "../" moves one directory backwards and starts there
• Starting with "../../" moves two directories backwards and starts there (and so on...)
• To move forward, just start with the first subdirectory and keep moving forward