Q:

My react app is not working when i push it into production in heroku, Cannot GET /

My app works fine on a localhost but it's failing to work in production when i deploy it to heroku. 
// package.json 
My app works fine on a localhost but it's failing to work in production when i deploy it to heroku. Can someone help me tell me what is failing my routes to be served and any suggestion is welcome. Thanks
{
  "name": "sky",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
  "dependencies": {
    "@material-ui/core": "^4.2.0",
    "@material-ui/icons": "^4.2.1",
    "axios": "^0.19.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-reveal": "^1.2.2",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

// App.js
import React from 'react';
import { 
  BrowserRouter as Router, 
  Route, 
  Switch 
} from 'react-router-dom';

import Home from '../Components/Pages/index';
import NoMatch from '../Components/Pages/NoMatch';

const App = () => {
  return (
    <Router>
      <div>
      <Menu />
        <div className="page">

          <Switch>
            <Route path="/" exact component={Home} />
            <Route component={NoMatch} />
          </Switch>
        </div>
        {/*<Socialcons />
        <ChatToolTip />*/}
      </div>
    </Router>
  );
}

export default App;

// here is my server
//index.js

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const app = express();
require('dotenv').config();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false}))

app.post('/api/form', (req, res) => {
    // console.log(req.body)
    // console.log(process.env)

    nodemailer.createTestAccount((err, account) => {
        const htmlEmail = `
            <h4>Register</h4>
            <ul>
                <li>First Name: ${req.body.fname}</li>
                <li>Last Name: ${req.body.lname}</li>
                <li>Email: ${req.body.email}</li>
                <li>Years of Coding Experience: ${req.body.years}</li>
            </ul>
        `
        // let testAccount = await nodemailer.createTestAccount();

        let transporter = nodemailer.createTransport({
           service: 'gmail',
            auth: {
              user: process.env.REACT_APP_USER,
              pass: process.env.REACT_APP_PASS
            }
        });

        let mailOptions = {
            from: req.body.email,
            to: process.env.REACT_APP_USER,
            subject: req.body.fname,
            text: req.body.email,
            html: htmlEmail
        }

        transporter.sendMail(mailOptions, (err, info) => {
            if (err) {
                return console.log('Message not sent !')
            }
            return console.log('Message sent successfully!' + info.body.email)
        })
    })
}) 

const PORT = process.env.PORT || 3001

app.listen(PORT, () => {
    console.log(`Server listening to port ${PORT}`)
})

A:

You must adjust your environment variables on heroku as on your local. You can reach It that env value on heroku as ‘Reveal Config Vars’ under app settings tab.

