I am using Reactjs / Node.js / Express / Nodemailer
In summary part of React App contains a Contact Us page where one can send a message to me through email. To implement this, I created a Node.js server and used Express/Nodemailer to send emails through my React App.
Locally, everything works perfectly.
Now when I try to deploy my site to Heroku, it is always crashing. I have deployed over 20 times trying to fix it.
Here are the logs from Heroku:
2021-01-20T04:11:14.009662+00:00 app[web.1]: npm ERR! Failed at the website@0.1.0 start script.
2021-01-20T04:11:14.009749+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2021-01-20T04:11:14.015125+00:00 app[web.1]:
2021-01-20T04:11:14.015276+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2021-01-20T04:11:14.015359+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2021-01-20T04_11_14_010Z-debug.log
2021-01-20T04:11:14.083728+00:00 heroku[web.1]: Process exited with status 1
2021-01-20T04:11:14.125666+00:00 heroku[web.1]: State changed from starting to crashed
2021-01-20T04:11:16.373733+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=somewebsite.herokuapp.com request_id=63caf1d0-c590-4380-a83f-38d8672dcc84 fwd="68.56.183.245" dyno= connect= service= status=503 bytes= protocol=https
2021-01-20T04:11:16.727290+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=somewebsite.herokuapp.com request_id=e307edc5-9a84-4c3a-b410-9557c159bfa6 fwd="68.56.183.245" dyno= connect= service= status=503 bytes= protocol=https
2021-01-20T04:11:17.171315+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=somewebsite.herokuapp.com request_id=4b115236-0dec-4c9b-90ce-beb6dec9aab7 fwd="68.56.183.245" dyno= connect= service= status=503 bytes= protocol=https
2021-01-20T04:34:39.704107+00:00 heroku[web.1]: State changed from crashed to starting
2021-01-20T04:34:56.646013+00:00 heroku[web.1]: Starting process with command `npm start`
2021-01-20T04:35:02.786236+00:00 app[web.1]:
2021-01-20T04:35:02.786301+00:00 app[web.1]: > website@0.1.0 start /app
2021-01-20T04:35:02.786306+00:00 app[web.1]: > npm run build && node server/index.js
2021-01-20T04:35:02.786307+00:00 app[web.1]:
2021-01-20T04:35:03.490869+00:00 app[web.1]:
2021-01-20T04:35:03.490918+00:00 app[web.1]: > website@0.1.0 build /app
2021-01-20T04:35:03.490918+00:00 app[web.1]: > react-scripts build
2021-01-20T04:35:03.490919+00:00 app[web.1]:
2021-01-20T04:35:05.274051+00:00 app[web.1]: Creating an optimized production build...
2021-01-20T04:35:56.983483+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2021-01-20T04:35:57.008295+00:00 heroku[web.1]: Stopping process with SIGKILL
2021-01-20T04:35:57.036467+00:00 app[web.1]: Error waiting for process to terminate: No child processes
2021-01-20T04:35:57.118110+00:00 heroku[web.1]: Process exited with status 22
2021-01-20T04:35:57.152133+00:00 heroku[web.1]: State changed from starting to crashed
This is my package.json file:
{
"homepage": "/",
"name": "website",
"version": "0.1.0",
"private": true,
"dependencies": {
"@google/model-viewer": "^1.2.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"axios": "^0.21.1",
"bootstrap": "^4.5.2",
"classnames": "^2.2.6",
"cors": "^2.8.5",
"express": "^4.17.1",
"mailgen": "^2.0.13",
"mdbreact": "^4.27.0",
"nodemailer": "^6.4.17",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-model-viewer": "^0.6.1",
"react-player": "^2.6.2",
"react-responsive-modal": "^6.0.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4",
"reactstrap": "^8.6.0",
"styled-components": "^5.2.0",
"three": "^0.120.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "npm run build && node server/index.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"start-server": "node server/index.js",
"start-app": "npm run build && npm run start-server"
},
"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"
]
},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/node": "^7.12.1",
"dotenv": "^8.2.0",
"gh-pages": "^3.1.0",
"puppeteer": "^5.3.1"
}
}
I believe my start script is correct, in regards to npm run build loading in my front-end and node server/index.js starting up my "Email Server".
Here is my index.js file:
const path = require('path');
const express = require('express');
const Mailgen = require('mailgen');
const transporter = require('./config');
const dotenv = require('dotenv');
dotenv.config();
const app = express();
const buildPath = path.join(__dirname, '..', 'build');
app.use(express.json());
app.use(express.static(buildPath));
app.post('/send', (req, res) => {
try {
const mailOptions = {
from: req.body.email, // sender address
to: process.env.email, // list of receivers
subject: 'New Message from Contact Us Form', // Subject line
html: `
<p>You have a new contact request.</p>
<h3>Contact Details</h3>
<ul>
<li>Name: ${req.body.name}</li>
<li>Email: ${req.body.email}</li>
<li>Phone: ${req.body.phone}</li>
<li>Company: ${req.body.company}</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. Try again later'
});
} else {
res.send({
success: true,
message: 'Thanks for contacting us. We will get back to you shortly'
});
}
});
} catch (error) {
res.status(500).send({
success: false,
message: 'Something went wrong. Try again later'
});
}
});
const mailGenerator = new Mailgen({
theme: 'default',
product: {
// Appears in header & footer of e-mails
name: 'Some Name',
link: 'https://website.live'
// Product logo
// logo: 'https://mailgen.js/img/logo.png'
}
});
app.post('/sendLaunch', (req, res) => {
try {
const mailOptions = {
from: req.body.emailLaunch, // sender address
to: process.env.email, // list of receivers
subject: 'New Sign-Up Customer', // Subject line
html: `
<p>You have a new Sign-Up contact.</p>
<h3>Contact Details</h3>
<ul>
<li>First Name: ${req.body.firstNameLaunch}</li>
<li>Last Name: ${req.body.lastNameLaunch}</li>
<li>Email: ${req.body.emailLaunch}</li>
</ul>
`
};
const responseLaunch = {
body: {
name: req.body.firstNameLaunch + " " + req.body.lastNameLaunch,
intro: "Thanks for signing up!"
}
}
const emailRespLaunch = mailGenerator.generate(responseLaunch);
const emailResponseLaunch = {
from: process.env.email,
to: req.body.emailLaunch,
subject: "You're Signed Up!",
html: emailRespLaunch,
};
transporter.sendMail(mailOptions, function (err, info) {
if (err) {
res.status(500).send({
success: false,
message: 'Something went wrong. Try again later'
});
} else {
res.send({
success: true,
message: 'Thanks for signing up.'
});
}
});
transporter.sendMail(emailResponseLaunch, function (err, info) {
if (err) {
res.status(500).send({
success: false
});
} else {
res.send({
success: true
});
}
});
} catch (error) {
res.status(500).send({
success: false,
message: 'Something went wrong. Try again later'
});
}
});
// App does not load properly locally without this snippet of code below
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '..', 'build', 'index.html'));
});
app.listen(process.env.PORT || 3030);
I have searched and rummaged through what feels like everything in regards to the issue and tried some solutions from similar issues found on stackoverflow but no luck yet.
Any help would be highly appreciated!
