(Node.js and React) Cannot POST / when submitting form - node.js

Question

I'm trying to create a form with Node.js and React where you can input your email to submit it to a Mailchimp newsletter, but when I click submit, I get a "Cannot POST /" error.
This is server.js
const bodyParser = require('body-parser');
const favicon = require('serve-favicon');
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/client/public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(favicon(__dirname + '/public/favicon.ico'));
app.listen(process.env.PORT, function() {
console.log("Listening to the application");
});
app.get('/', (req, res) => {
res.send("res");
});
app.post('/', (req, res) => {
sendEmailToMailchimp(req.body.email);
console.log(req.body.email);
});
function sendEmailToMailchimp(email){
console.log("Sending " + email + " to Mailchimp.");
var request = require("request");
var options = { method: 'POST',
url: 'https://us18.api.mailchimp.com/3.0/lists/f9c3130fc4/members',
headers:
{ 'Postman-Token': 'f6c16b72-09b7-48f2-926b-b156a428c67b',
'Cache-Control': 'no-cache',
Authorization: 'Basic YW55c3RyaW5nOmNiNTQyYzA1NWVmMjY1ZTI4Y2I0ZDk0NmRhZmM5MmYzLXVzMTg=',
'Content-Type': 'application/json' },
body: { email_address: email, status: 'subscribed' },
json: true };
request(options, function (error, response, body) {
if (error) throw new Error(error);
//console.log(body);
});
}
This is package.json
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"keywords": [
"example",
"heroku"
],
"author": "",
"license": "MIT",
"dependencies": {
"body-parser": "^1.18.3",
"concurrently": "^3.6.1",
"express": "^4.16.3",
"jquery": "^3.3.1",
"nodemon": "^1.18.3",
"request": "^2.87.0",
"serve-favicon": "^2.5.0"
},
"engines": {
"node": "8.11.1"
}
}
This is App.js in my client React app. The input field for the name still isn't meant to do anything yet, just the email.
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<form className="newsletterSignup" action="/" method="post">
<label>NAME</label>
<input id="nameInput" className="infoInput inlineInput" name="userName" placeholder="John Ipcus" type="text" required></input>
<label>EMAIL ADDRESS</label>
<input id="emailInput" className="infoInput inlineInput" name="userEmailAddress" placeholder="joe#shmoe.com" type="text" required></input>
<input id="signUpBtn" value="SUBMIT" type="submit"></input>
</form>
</div>
);
}
}
export default App;
And this is the package.json in the client React app
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": {
"/": {
"target": "http://localhost:5000",
"secure": "false"
}
}
}
Also if it helps mentioning, I'm going to deploy it on Heroku.
Thanks
Edit: the browser console displays "Failed to load resource: the server responded with a status of 404 (Not Found)"

Answer 1

Do you use webpack-dev as react development server?
If so you need to setup proxy there, webpack.config.js like:
module.exports = setup({
context: __dirname,
entry: './app.js',
devServer: {
proxy: {
'/api': 'http://127.0.0.1:50545'
}
}
});