404 Not Found when requesting after deploying to Heroku, works locally - node.js

Question

I have been working all day on trying to deploy my MERN stack app to Heroku. So far it works perfectly fine if I run it locally. The app gets deployed on Heroku, but when I try to submit/get items from MongoDB Atlas, I get a 404 error.
I tried removing the Proxy in package.json, didn't work. I ran a build command and the file is in the correct place, still doesn't work. I'm really clueless about what could be going on..
Here is the code:
BACKEND:
index.js
const express = require('express');
const app = express();
const cors = require('cors');
const mongoose = require('mongoose');
require('dotenv').config();
app.use(cors());
app.use(express.static('build'));
app.use(express.json({ limit: '50mb' }));
app.use(express.urlencoded({ limit: '50mb' }));
const uri =
'mongodb+srv://db:passwordhere#cluster0.fgryd.mongodb.net/myFirstDatabase?retryWrites=true&w=majority';
mongoose.connect(uri);
const profileSchema = new mongoose.Schema({
..
..
..
});
const Profile = mongoose.model('Profile', profileSchema);
module.exports = mongoose.model('Profile', profileSchema);
profileSchema.set('toJSON', {
transform: (document, returnedObject) => {
returnedObject.id = returnedObject._id.toString();
delete returnedObject._id;
delete returnedObject.__v;
},
});
app.get('/api/profiles', (req, res) => {
Profile.find({}).then(profiles => {
res.json(profiles);
});
});
app.post('/api/profiles', (request, response) => {
const body = request.body;
if (!body) {
return response.status(400).json({
error: 'content missing',
});
}
const profile = new Profile({
...
...
...
});
profile.save().then(savedProfile => {
response.json(savedProfile);
});
});
const PORT = process.env.NODE_ENV || 3001;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
My Frontend:
App.js
function App() {
const [viewProfile, setViewProfile] = useState(false);
const [formState, setFormState] = useState(1);
const [prof, setProf] = useState([]);
const handleProfile = () => {
setViewProfile(!viewProfile);
};
const fetchData = async () => {
await axios.get('/api/profiles').then(res => setProf(res.data));
};
useEffect(() => {
fetchData();
}, []);
const addProfile = async data => {
let img = await ImgToBase64(data.profImg);
await axios.post('/api/profiles', {
...
...
...
});
fetchData();
alert(`success!`);
};
return (
<ChakraProvider>
...
...
...
</ChakraProvider>
);
}
Can I please get some help? I almost tried everything

Answer 1

Heroku offers you a node's container instead of VPS (Virtual Private Server).
Inside their servers, there are more than 10k apps running on a VM. They are mapping your app port with their subdomain. for that, you have to feed port configurations to your application.
In your code, there is process.env.NODE_ENV but in the Heroku environment, they are using process.env.PORT.
const PORT = process.env.PORT || 3001;
Also, you need to add a start script in your package.json.
start: "node index.js"
if your main file is not is the index.js, you can replace your script name with main script name

Answer 2

You can try these two things.
Change your PORT name.
https://devcenter.heroku.com/articles/getting-started-with-nodejs#push-local-changes
Your code:
const PORT = process.env.NODE_ENV || 3001;
After
const PORT = process.env.PORT || 3001;
Make sure you created Procfile with text "web: npm start" in the file.
https://devcenter.heroku.com/articles/getting-started-with-nodejs#define-a-procfile
Procfile