title: React app with Express backend returns 404 for API calls when hosted on heroku
body: <p>I have been trying to build a simple portfolio with a working contact page, using the nodemailer npm package. The app itself works fine when I run it on my local machine, both in development mode and in production, but when I deploy the app to heroku, I get a 404 error whenever I hit the API route. I've tried everything I can think of, and I can't figure out why it is throwing the 404 for the life of me. Any insight would be greatly appreciated. </p>
  
  <p>Here is my server.js file</p>
  
  <pre><code>const express = require('express');
  const bodyParser = require('body-parser');
  const nodemailer = require('nodemailer');
  const path = require('path');
  
  const app = express();
  const PORT = process.env.PORT || 3001;
  
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({extended: true}));
  //Serve up static assets (usually on heroku)
  if (process.env.NODE_ENV === "production") {
      app.use(express.static("client/build"));
  }
  
  
  app.post('/contact', function (req, res) {
  
      console.log("POST ROUTE HIT")
  
      const transporter = nodemailer.createTransport({
          service: 'gmail',
          auth: {
              user: 'myemail', //NOTE: these are placeholders for my real email / password
              pass: 'mypwd'
          }
      });
  
      const mailOptions = {
          from: req.body.sender_email,
          to: 'myemail',
          subject: req.body.email_subject + ": from " + req.body.sender_email,
          text: req.body.email_body
      };
  
      transporter.sendMail(mailOptions, function (error, info) {
          console.log("sending mail...");
          if (error) {
              // res.json(error);
              console.log("Error: " + error)
          } else {
              ;
              console.log("email sent: " + info.data)
  
          }
      });
  });
  
  
  app.get("*", function (req, res) {
      res.sendFile(path.join(__dirname, "./client/build/index.html"));
  
  });
  
  
  // Spin up server
  app.listen(PORT, ()=&gt; {
      console.log("app listening on port " + PORT)
  })
  </code></pre>
  
  <p>Here is my package.json in the root directory</p>
  
  <pre><code>{
    "name": "react-portfolio-w-backend",
    "version": "1.0.0",
    "description": "react app w/ backend server",
    "main": "server.js",
    "dependencies": {
      "axios": "^0.19.2",
      "bootstrap": "^4.5.0",
      "concurrently": "^5.2.0",
      "http-proxy-middleware": "^1.0.4",
      "node-sass": "^4.14.1",
      "nodemailer": "^6.4.6",
      "path": "^0.12.7",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-router-dom": "^5.2.0",
      "react-scripts": "^3.4.1",
      "reactstrap": "^8.4.1"
    },
    "devDependencies": {},
    "scripts": {
      "start": "if-env NODE_ENV=production &amp;&amp; npm run start:prod || npm run start:dev",
      "start:prod": "set NODE_ENV=production &amp;&amp; nodemon server.js",
      "start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
      "win:prod": "set NODE_ENV=production &amp;&amp; nodemon server.js",
      "client": "cd client &amp;&amp; npm run start",
      "seed": "node scripts/seedDB.js",
      "install": "cd client &amp;&amp; npm install",
      "build": "cd client &amp;&amp; npm run build"
    },
    "repository": {
      "type": "git",
      "url": "git+https://github.com/medricr/react-portfolio-w-backend.git"
    },
    "author": "Medric Riley",
    "license": "ISC",
    "bugs": {
      "url": "https://github.com/medricr/react-portfolio-w-backend/issues"
    },
    "homepage": "https://github.com/medricr/react-portfolio-w-backend#readme"
  }
  </code></pre>
  
  <p>Here is the API.js file which I use as a reference to call the route from the front end</p>
  
  <pre><code>import axios from 'axios';
  
  export default {
  
      sendEmail: function(info){
          console.log("email info: " + info);
          return axios.post('/contact', info);
      }
  }
  </code></pre>
  
  <p>And here is the code snippet used in the actual react component to send the email</p>
  
  <pre><code>    sendEmail = () =&gt; {
          console.log("sendemail button hit")
          API.sendEmail({
              sender_email: this.state.sender_email,
              email_subject: this.state.email_subject,
              email_body: this.state.email_body
          }).then((result)=&gt; {
              console.log(result);
          })
      }
  </code></pre>
  
  <p>Thank you in advance for any insight you can give into this situation, I'm personally all out of ideas. </p>
  
  <p>**EDIT: ** When I set up my proxy in my package.json file, I was getting an 'Invalid Host Header' error when deploying to heroku, so I tried to set up the proxy manually using the http-proxy-middleware package, using the following code</p>
  
  <pre><code>const proxy = require('http-proxy-middleware');
  
  module.exports = function(app){
      app.use(
          proxy(['/contact'], {target: "http://localhost:3001"})
      )
  }
  </code></pre>