Need help with production deployment to regular hosting
I built a website with React frontend and Express backend that includes an email contact form. The backend uses nodemailer to send emails when users submit the form. Everything works great on my local development environment and I already got it working on Heroku.
However, I want to host this on my own domain using regular web hosting instead of Heroku. Is this even possible with shared hosting providers? I’m not sure how to handle both the React build files and the Node server together.
My Express server setup (server.js):
const express = require("express")
const server = express()
const PORT = process.env.PORT || 3001
require("dotenv/config")
const cors = require("cors")
const nodemailer = require("nodemailer")
server.listen(PORT, () => {
console.log("Server active on port: " + PORT);
})
server.use(express.urlencoded({extended:true}))
server.use(express.json())
server.use(cors())
server.get("/api/status", (req,res) => {
console.log("server is active");
})
server.post("/api/contact", async (req,res) => {
console.log(("Contact form received"));
console.log(req.body);
const {fullName,subject,message} = req.body
try {
const formData = [fullName,subject,message]
console.log(formData);
await res.status(201).json({formData})
let emailTransporter = nodemailer.createTransporter({
host: "smtp-mail.outlook.com",
port: 587,
secure: false,
auth: {
user: "contact@example.com",
pass: process.env.MAIL_PASSWORD,
},
tls: {
rejectUnauthorized:false
}
});
let emailInfo = await emailTransporter.sendMail({
from: '"Website Contact" <contact@example.com>',
to: `admin@example.com`,
subject: `New inquiry: ${subject}`,
html: `
<p>Full Name: ${fullName}</p>
<p>Subject: ${subject}</p>
<p>Message: ${message}</p>
`,
});
console.log("Email sent: %s", emailInfo.messageId);
} catch (error) {
res.status(400)
console.log(error)
}
})
React form handler:
const submitForm = async (e) => {
e.preventDefault()
if(formData.fullName && formData.subject && formData.message){
await axios.post("http://localhost:3001/api/contact", formData)
.then((response) => {
const submittedData = response.data.formData
console.log(submittedData);
alert("Thank you for your message!")
})
.catch(error => console.log(error))
setFormData({fullName:"",subject:"",message:""})
}else{
console.log("missing required fields");
alert("Please complete all fields")
}
}
Any guidance would be appreciated!