receiving 404 not found when calling axios with node and heroku - node.js

Question

my react app landing page calls and axios.get on component did mount. I have no issues when running my page locally, however when I deploy with heroku, my axios call returns "404 not found nginx". It feels like a simple fix, although I cant seem to find any threads online that apply to my issue. my server.js is configured as follows
const express = require("express");
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const routes = require('./routes');
const dotenv = require("dotenv");
var request = require('request'); // "Request" library
var cors = require('cors');
var querystring = require('querystring');
var passport = require('passport');
var flash = require('connect-flash');
var session = require('express-session');
var morgan = require('morgan');
// var configDB = require('./config/database.js');
require('./config/passport')(passport); // pass passport for configuration
// const fs = require("fs");
var client_id = process.env.DB_SPOTIFY_CLIENT_ID; // Your client id
var client_secret = process.env.DB_SPOTIFY_CLIENT_SECRET; // Your secret
var redirect_uri = process.env.DB_REDIRECT_URI; // Your redirect uri
dotenv.config();
// const port = process.env.PORT || 3030;
const port = 3030
const app = express();
app.use(morgan('dev')); // log every request to the console
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.set('view engine', 'ejs'); // set up ejs for templating
// required for passport
app.use(session({ secret: 'ilovescotchscotchyscotchscotch' })); // session secret
app.use(passport.initialize());
app.use(passport.session()); // persistent login sessions
app.use(flash()); // use connect-flash for flash messages stored in session
// Demo middleware to play with error handling
app.use((req, res, next) => {
const startTime = Date.now();
console.log("Request Time: " + startTime);
console.log(`${req.method} ${req.path}`);
// Request returns 500, default handler returns error
// as html with stack trace in dev, does not terminate server process.
//throw new Error("Bazinga!");
next();
// Request returns 500, default handler returns error as html showing stack trace,
// and terminates server process with error ERR_HTTP_HEADERS_SENT.
//next(new Error("Bazonga!"));
const endTime = Date.now();
console.log(
"Response Time: " + endTime + " Elapsed: " + (endTime - startTime)
);
// Request goes through, error is written to log.
//throw new Error("Bazunga!");
});
// app.use("/node-api/server.js/schedule", (req, res, next) => {
// fs.readFile("data/schedule.json", (err, data) => {
// if (err) {
// // If err, then
// next(err);
// } else {
// res.type("json").send(data);
// }
// });
// });
// routes ======================================================================
require('./routes/LoginRegister.Routes')(app, passport); // load our routes and pass in our app and fully configured passport
app.use("/serverSideStuff/server.js", routes);
app.use((req, res) => {
res.status(404).send("<h2>The path is not valid</h2>");
});
app.listen(port, () => {
console.log(`Magic happens on port ${port}`);
});

Answer 1

you forgot to uncomment this line:
// const port = process.env.PORT || 3030;
and delete this one:
const port = 3030
process.env.PORT will be heroku port :)