POST 405 (Not Allowed) after deploying on heroku - node.js

Question

this is my first time using React and Node.js to create a web app that has a contact form using nodemailer and axios. Everything seems to be working on localhost, however, after I deployed it on heroku, I got a "POST https://myapp.herokuapp.com/ 405 (Not Allowed)" when I try to send an email using the form
my index.js
const path = require('path');
const express = require('express');
const rateLimit = require("express-rate-limit");
const transporter = require('./config');
const dotenv = require('dotenv');
dotenv.config();
const app = express();
const buildPath = path.join(__dirname, '..', 'build');
const PORT = process.env.PORT || 3030;
app.use(express.json());
app.use(express.static(buildPath));
const limiter = rateLimit({
windowMs: 30 * 1000, // 30 seconds
max: 1 // limit each IP to 1 requests per windowMs
});
// apply to all requests
app.use(limiter);
app.post('/send', (req, res) => {
try {
const mailOptions = {
from: req.body.email,
to: process.env.email,
subject: req.body.subject,
html:
`<p>New Contact Request</p>
<h2>Contact Details</h2>
<ul>
<li>Name: ${req.body.name}</li>
<li>Email: ${req.body.email}</li>
<li>Subject: ${req.body.subject}</li>
<li>Message: ${req.body.message}</li>
</ul>
`
};
transporter.sendMail(mailOptions, function (err, info) {
if (err) {
res.status(500).send({
success: false,
message: 'Something went wrong. Please try again'
});
}
else {
res.send({
success: true,
message: 'Thanks for contacting me. I will get back to you soon'
});
}
});
}
catch (error) {
res.status(500).send({
success: false,
message: "Something went wrong. Please try again"
});
}
});
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, '../build/index.html'), function (err) {
if (err) {
res.status(500).send(err)
}
})
})
app.listen(PORT, () => {
console.log(`Server Started at PORT ${PORT}`);
});
my emailConfig.js
const nodemailer = require('nodemailer');
const dotenv = require('dotenv');
dotenv.config();
var transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: process.env.email,
pass: process.env.password
}
});
module.exports = transporter
my contact.js
import React, { useState } from 'react';
import './Contact.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Form, Button } from 'react-bootstrap';
import axios from 'axios';
const Contact = () => {
const [state, setState] = useState({
name: '',
email: '',
subject: '',
message: ''
});
const [result, setResult] = useState(null);
const sendEmail = event => {
event.preventDefault();
axios
.post('/send', { ...state })
.then(response => {
setResult(response.data);
setState({ name: '', email: '', subject: '', message: '' });
})
.catch(() => {
setResult({ success: false, message: 'Something went wrong. Please try again'});
});
};
const onInputChange = event => {
const { name, value } = event.target;
setState({
...state,
[name]: value
});
};
return (
//some html code
);
};
export default Contact;
I've tried adding a Procfile (my index.js is inside a folder called server)
web: node server/index.js
after adding the Procfile and redeployed, I can't even access the website anymore, but instead, an error saying "GET https://my app.herokuapp.com/ 503 (Service Unavailable)"

Answer 1

First of all I'm facing few technical moments.
From my experience I can say show it should be:
Your node.js application should be hosted directly on http and https default ports 80, 443, or behind proxy ex Nginx (You can choose any other). There are some restrictions by browsers when using different ports.
Look inside axios config, when you're posting to send it goes to your app url, but there is no port defined.
Another, more native option is to use react fetch.
It's just how I see software design, so try to deploy your application as api and call it via postman and then from local copy of your frontend.