Using nodemailer with heroku - reactjs

Question

i have a next.js app deployed with heroku https://new-cardenal.herokuapp.com/reserve with a contact form that has a submit button that sends an email and it works fine when i run it locally via: npm install, npm run build, npm start but when i try it on the heroku url it sends a 500 error, here is my code
server.js
const express = require('express');
const cors = require('cors')
const next = require('next');
const path = require('path');
const url = require('url');
const cluster = require('cluster');
const numCPUs = require('os').cpus().length;
const dev = process.env.NODE_ENV !== 'production';
const port = process.env.PORT || 3000;
const mailer = require('./mailer')
const bodyParser = require('body-parser')
if (!dev && cluster.isMaster) {
for (let i = 0; i < numCPUs; i++) {cluster.fork();
}
cluster.on('exit', (worker, code, signal) => {
console.error(`Node cluster worker ${worker.process.pid} exited: code ${code}, signal
${signal}`);
});
} else {
const nextApp = next({ dir: '.', dev });
const nextHandler = nextApp.getRequestHandler();
nextApp.prepare().then(() => {
const server = express();
server.use(cors());
server.use(bodyParser.json())
server.use(bodyParser.urlencoded({extended: true}));
server.post('/api/contact', (req, res) => {
const {senderMail,sendTo,rooms,date} = req.body
mailer({senderMail,sendTo,rooms,date}).then(() => {
console.log('success')
res.send('success')
}).catch((error) => {
console.log('failed', error)
res.send('badddd')
})})
if (!dev) {
server.use(function(req, res, next) {
var proto = req.headers["x-forwarded-proto"];
if (proto === "https") {
res.set({'Strict-Transport-Security': 'max-age=31557600'});
return next();
}
res.redirect("https://" + req.headers.host + req.url);
});
}
server.use('/static', express.static(path.join(__dirname, 'static'), {maxAge: dev ? '0'
: '365d'}));
server.get('*', (req, res) => {
const parsedUrl = url.parse(req.url, true);
nextHandler(req, res, parsedUrl);
});
server.listen(port, (err) => {if (err) throw err;});
});
}
contact.js
import nodemailer from "nodemailer"
const emailPass = "qbmD6Zs8Qv76b96"
const transporter = nodemailer.createTransport({
host: "smtp.gmail.com",
port: 465,
secure: true,
auth: {
user: "eitanschreiber97#gmail.com",
pass: emailPass
},
tls: {
rejectUnauthorized: false
}})
export default async (req, res) => {
const { senderMail, sendTo, rooms, date } = req.body
if (sendTo === "" || rooms === "" || date === "") {
res.status(403).send("")
return
}
const mailerRes = await mailer({ senderMail, sendTo, rooms, date })
res.send(mailerRes)
}
const mailer = ({ senderMail, sendTo, rooms, date }) => {
const message = {
senderMail,
to: `${sendTo}`,
subject: `El Cardenal Hotel`,
text: `Thank you for your reservation
you have reserved rooms: ${rooms} for ${date}
to cancel you can contact El Cardenal Hotel at ([phone] or email at
elcardenalhotel#gmail.com`,
replyTo: senderMail
}
return new Promise((resolve, reject) => {
transporter.sendMail(message, (error, info) =>
error ? reject(error) : resolve(info)
)})}
reserve.js
import React, { Component } from 'react'
import dynamic from 'next/dynamic';
import Link from 'next/link'
import styled from 'styled-components'
import Header from '../components/header'
import OtherFooter from '../components/otherFooter'
import { sendContactMail } from "../components/networking/mail-api"
import Rooms from '../data/rooms'
import moment from 'moment';
import { GoArrowLeft } from 'react-icons/go';
import { GoArrowRight } from 'react-icons/go';
import { i18n, withTranslation } from '../i18n'
import { createForm, createFactory, createField } from 'micro-form'
import axios from 'axios';
const Wrapper=styled.div``
class DayNames extends Component {
render() {
return (<div className="row day-names">
<span className="day">Sun</span>
<span className="day">Mon</span>
<span className="day">Tue</span>
<span className="day">Wed</span>
<span className="day">Thu</span>
<span className="day">Fri</span>
<span className="day">Sat</span>
</div>);
}}
class Week extends Component {
render() {
let days = [];
let {
date,
} = this.props;
const {
month,
selected,
select,
} = this.props;
for (var i = 0; i < 7; i++) {
let day = {
name: date.format("dd").substring(0, 1),
number: date.date(),
isCurrentMonth: date.month() === month.month(),
isToday: date.isSame(new Date(), "day"),
date: date
};
days.push(<Day day={day}selected={selected}select={select}/>);
date = date.clone();
date.add(1, "day");
}
return <div className="row week" key={days[0]}>{days}</div>;
}}
class Day extends Component {
render() {
const {
day,
day: {
date,
isCurrentMonth,
isToday,
number
},
select,
selected
} = this.props;
return <span key={date.toString()}className={"day" + (isToday ? " today" :
"") + (isCurrentMonth ? "" : " different-month") + (date.isSame(selected) ? "
selected" : "")}onClick={()=>select(day)}>{number}</span>;
}}
const which = [201, 202, 301, 302, 303, 304];
class ReservePage extends Component {
constructor(props) {
super(props);
this.state={rooms:[false,false,false,false,false,false],
em:``,
firstMonth: moment(),secondMonth: moment(),firstSelected:
moment().startOf('day'),firstShow: false,secondSelected:
moment().startOf('day'),secondShow: false,thank_you:false}}
static async getInitialProps(ctx){
return {namespacesRequired: ['common', 'header']}
}
selectRoom = n => {
const y = n
this.setState(prev => {
const rooms = prev.rooms.map((r, ind) => {if (ind == y) {return !r
} else {return r}})
return { rooms }
})}
submitForm = async e => {
e.preventDefault();
const senderMail = `eitanschreiber97#gmail.com`
const res = await sendContactMail(senderMail, this.state.em,
which.filter((w, ind) => this.state.rooms[ind]),
[this.state.firstSelected.format("ll"),this.state.secondSelected.format("ll")])
if (res.status < 300) {
this.setState({rooms: [false,false,false,false,false,false],thank_you:
true,em: ``,firstSelected: moment().startOf('day'),firstShow: false,secondSelected:
moment().startOf('day'),secondShow: false})
}
}
firstPrevious = () => {
const {
firstMonth,
} = this.state;
this.setState({firstMonth:firstMonth.subtract(1,'month')});
}
secondPrevious = () => {
const {
secondMonth,
} = this.state;
this.setState({secondMonth:secondMonth.subtract(1,'month')});
}
firstNext = () => {
const {
firstMonth,
} = this.state;
this.setState({firstMonth:firstMonth.add(1,'month')});
}
secondNext = () => {
const {
secondMonth,
} = this.state;
this.setState({secondMonth:secondMonth.add(1,'month')});
}
firstSelect = day =>
this.setState({firstShow:true,firstSelected:day.date,firstMonth:day.date.clone()});
secondSelect = day =>
this.setState({secondShow:true,secondSelected:day.date,secondMonth:day.date.clone()});
renderFirstWeeks() {
let weeks = [];
let done = false;
let date = this.state.firstMonth.clone().startOf("month").add("w"
-1).day("Sunday");
let count = 0;
let monthIndex = date.month();
const {
firstSelected,
firstMonth,
} = this.state;
while (!done) {
weeks.push(<Week key={date}date={date.clone()}month=.
{firstMonth}select={(day)=>this.firstSelect(day)}selected={firstSelected}/>);
date.add(1, "w");
done = count++ > 2 && monthIndex !== date.month();
monthIndex = date.month();
}
return weeks;
};
renderSecondWeeks() {
let weeks = [];
let done = false;
let date = this.state.secondMonth.clone().startOf("month").add("w"
-1).day("Sunday");
let count = 0;
let monthIndex = date.month();
const {
secondSelected,
secondMonth,
} = this.state;
while (!done) {
weeks.push(<Week key={date}date={date.clone()}month=.
{secondMonth}select={(day)=>this.secondSelect(day)}selected={secondSelected}/>);
date.add(1, "w");
done = count++ > 2 && monthIndex !== date.month();
monthIndex = date.month();
}
return weeks;
};
renderFirstMonthLabel() {
const {
firstMonth,
} = this.state;
return firstMonth.format("MMMM YYYY");
}
renderSecondMonthLabel() {
const {
secondMonth,
} = this.state;
return secondMonth.format("MMMM YYYY");
}
render() {
const { rooms, date, em } = this.state
return (<Wrapper>
<Header/>
<main style={{width:`100%`, margin:0, position:`relative`, top:`7vh`, paddingTop:`90px`,
paddingBottom:`90px`, display:`flex`, flexDirection:`column`, alignItems:`center`,
zIndex:1, backgroundImage:`url(/roomsPage/background_1.png)`,
backgroundPosition:`center`, backgroundSize:`cover`, backgroundRepeat:`no-repeat`}}>
<section>
<h1>Select your room</h1>
<div className="top_list">
{Rooms.map((r,ind)=>{
return <div onClick={()=>this.selectRoom(ind)}>
<h1>{r.number}</h1>
<div style={{width:`240px`,height:`170px`,background:`center / cover no-repeat
url(/roomsPage/${r.number}.jpg)`,backgroundColor:this.state.rooms[ind] ? `grey` :
null,backgroundBlendMode:`multiply`}}></div>
</div>})}
</div>
<h1>Select the date</h1>
<div className="dates">
<div>
<p>Check in</p>
<section>
{this.state.firstShow ? <p>{this.state.firstSelected.format("ll")}</p> : null}
<section className="calendar">
<header className="header">
<div className="month-display row">.
{moment().format("MMMM YYYY") != this.renderFirstMonthLabel() ? <GoArrowLeft onClick=.
{this.firstPrevious}/> : null}<span className="month-label">.
{this.renderFirstMonthLabel()}</span><GoArrowRight onClick={this.firstNext}/></div>
<DayNames />
</header>
{this.renderFirstWeeks()}
</section>
</section>
</div>
<div>
<p>Check out</p>
<section>
{this.state.secondShow ? <p>
{this.state.secondSelected.format("ll")}</p> : null}
<section className="calendar">
<header className="header">
<div className="month-display row">.
{moment().format("MMMM YYYY") != this.renderSecondMonthLabel() ? <GoArrowLeft
onClick={this.SecondPrevious}/> : null}<span className="month-label">
{this.renderSecondMonthLabel()}</span><GoArrowRight onClick={this.secondNext}/>
</div>
<DayNames />
</header>
{this.renderSecondWeeks()}
</section>
</section>
</div>
</div>
<div className="bottom">
<div>
<p>Email</p>
<input type="text"id="em"name="em_name"value={em}onChange=
{e=>this.setState({em:e.target.value})}/>
</div>
<button type="submit" onClick={this.submitForm}>Reserve</button>
{this.state.thank_you && <p>thank you</p>}
</div>
</section>
</main>
<OtherFooter/>
</Wrapper>)}}
export default withTranslation('common')(ReservePage)
mail-api.js
import axios from "axios"
export const sendContactMail = async (senderMail, sendTo, rooms, date) => {
const data = {senderMail, sendTo, rooms, date}
try {
const res = await axios({
method: "post",
url: "/api/contact",
headers: {
"Content-Type": "application/json"
},
data
})
return res
} catch (error) {
return error
}
}
what do i need to fix
UPDATE: apparently i need to add ajax code
$.ajax({
url: 'https://new-cardenal.herokuapp.com/',
type: 'POST',
headers: {'Accept': 'application/json;'},
data: {
"subject": "the subject",
"message": "the body"
},
}).done(function (res) {
console.log(res); // it shows your email sent message.
});
i'm just not sure which file to put it code in or do i create a new file

Answer 1

never mind i figured it out i singed in with google accounts and kept the window open then ran: npm install, npm run build and npm start and it worked