Cannot connect to back end, my path/file is not found

Question

How do I configure my file correctly?

I am trying to submit a form, and when I submit it I am getting a 404 error that my path/file is not found.

The exact error is:

xhr.js:175 POST http://localhost:1337/mail 404 (Not Found)

My app.js file is:

var express = require('express');
var mail = require('./routes/mail');
var app = express();

app.use('/mail', mail);
app.use(express.static('dist'));
app.use(express.static('dist/img'));

app.listen(process.env.PORT || 1337);
console.log('Port 1337 is listening');

My mail.js file is:

var express = require('express');
var mail = express.Router();

mail.get('/:name/:email/:phone:/message', function(req, res){
    console.log('in function');
});

console.log('Made it to mail');

module.exports = mail;

The function that sends the code from a jsx file is:

handleClick(e){
    const name = this.state.name;
    const email = this.state.email;
    const phone = this.state.phone;
    const message = this.state.message;
    e.preventDefault();
    if(name === "" | email === "" | phone === "" | message === ""){
        return;
    }else{
        axios({
            method: 'post',
            url: '/mail',
            data: {name, email, phone, message}
        });
    }

}

The header shows the following:

Request URL:http://localhost:1337/mail
Request Method:POST
Status Code:404 Not Found
Remote Address:[::1]:1337
Response Headers
view source
Connection:keep-alive
Content-Length:18
Content-Type:text/html; charset=utf-8
Date:Mon, 23 Jan 2017 21:17:15 GMT
X-Content-Type-Options:nosniff
X-Powered-By:Express
Request Headers
view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:85
Content-Type:application/json;charset=UTF-8
Host:localhost:1337
Origin:http://localhost:1337
Referer:http://localhost:1337/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Request Payload
view source
{name: "Username", email: "[email protected]", phone: "1234567891", message: "testing"}

When I run gulp, I do get the console message that it 'Made it to mail'. But when I submit the form, it gives me the error "POST http://localhost:1337/mail 404 (Not Found)".

My directory is set up as:

root/
...dist/ (this is where my client.min.js file is where all my front end code is)
...routes/
app.js

Answer 1

I would recommend you to read the Express.js documentation on how to define routes. Also you do not seem to understand the difference between request body (the data you passed to axios data property) and url (/mail/....)

The route you have defined will catch ONLY GET REQUESTS but you're doing POST request from axios, and you do not have any route for a POST request

Also what you have defined will only catch for example url like this /mail/john/blablamail/blablaphone/blablamessage since what you did:

app.use('/mail', mail);
//...
mail.get('/:name/:email/:phone/:message',...);

can be simplyfied to this:

app.get('/mail/:name/:email/:phone:/message',..);

what you are doing is good for dynamic url which you don't seem to need. Example is:

// assume url /users/123
app.get('/users/:id', function(req, res){
    console.log(req.params.id); // output = 123
});

What you need instead is POST app.post(...); like this:

app.post('/mail', function(req, res){
    console.log(req.body); 
    // -> {name: "Username", email: "[email protected]", phone: "1234567891", message: "testing"}
});

EDIT

And one more thing. In order for the req.body to be js object you gonna need body-parser to parse the json data. Specificly this line app.use(bodyParser.json())