how to send email with react.js front end? - node.js

Question

i have created a websites and deployed it ( using react js ) in my website there is a contact form which will send the client message to my work email ( myname#comany.com) . i know i can't send email with react js because rereact only handle the front end so i'm looking for a solution using nodemailer or other solutions ! how can i do that ?
i tried the following tutorials to link react with express : [https://medium.com/#maison.moa/setting-up-an-express-backend-server-for-create-react-app-bc7620b20a61][1]
i made a quick app for testing :
folder structure :
client ( created with create-react app )
node_modules
config.js
package.json
package_lock.json
server.js
in the front end : client/src
app.js code :
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Form from './Form.js';
class App extends Component {
state = {
data: null
};
componentDidMount() {
// Call our fetch function below once the component mounts
this.callBackendAPI()
.then(res => this.setState({ data: res.express }))
.catch(err => console.log(err));
}
// Fetches our GET route from the Express server. (Note the route we are fetching matches the GET route from server.js
callBackendAPI = async () => {
const response = await fetch('/express_backend');
const body = await response.json();
if (response.status !== 200) {
throw Error(body.message)
}
return body;
};
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<Form/>
<p className="App-intro">{this.state.data}</p>
</div>
);
}
}
export default App;
Email.js code :
import React from 'react';
import { Email, Item, A} from 'react-html-email';
export default function InlineLink({name, children}) {
return (
<Email title='link'>
<Item>
Hello {name}
<p>helooo</p>
</Item>
<Item>
{children}
</Item>
</Email>
)};
Form.js code :
import MyEmail from './Email'
import { renderEmail } from 'react-html-email'
import axios from 'axios';
import React, { Component } from 'react';
class Form extends Component {
resetForm(){
this.setState({feedback: ''});
}
constructor(props) {
super(props);
this.state = { feedback: '', name: 'Name', email: 'email#example.com' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
return (
<form className="test-mailing">
<h1>Let's see if it works</h1>
<div>
<textarea
id="test-mailing"
name="test-mailing"
onChange={this.handleChange}
placeholder="Post some lorem ipsum here"
required
value={this.state.feedback}
style={{width: '100%', height: '150px'}}
/>
</div>
<input type="button" value="Submit" className="btn btn--submit" onClick={this.handleSubmit} />
</form>
);
}
handleChange(event) {
this.setState({feedback: event.target.value})
};
handleSubmit(event){
const messageHtml = renderEmail(
<MyEmail name={this.state.name}> {this.state.feedback}</MyEmail>
);
axios({
method: "POST",
url:"http://localhost:3000/send",
data: {
name: this.state.name,
email: this.state.email,
messageHtml: messageHtml
}
}).then((response)=>{
if (response.data.msg === 'success'){
alert("Email sent, awesome!");
this.resetForm()
}else if(response.data.msg === 'fail'){
alert("Oops, something went wrong. Try again")
}
})
}
}
export default Form;
in the backend
server.js code :
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
// console.log that your server is up and running
app.listen(port, () => console.log(`Listening on port ${port}`));
// create a GET route
app.get('/express_backend', (req, res) => {
res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
});
const nodemailer = require('nodemailer');
const creds = require('./config');
var transport = {
host: 'smtp.gmail.com', // e.g. smtp.gmail.com
auth: {
user: creds.USER,
pass: creds.PASS
}
}
var transporter = nodemailer.createTransport(transport)
transporter.verify((error, success) => {
if (error) {
console.log(error);
} else {
console.log('All works fine, congratz!');
}
});
app.use(express.json()); app.post('/send', (req, res, next) => {
const name = req.body.name
const email = req.body.email
const message = req.body.messageHtml
var mail = {
from: name,
to: 'mellitir11#gmail.com',
subject: 'Contact form request',
html: message
}
transporter.sendMail(mail, (err, data) => {
if (err) {
res.json({
msg: 'fail'
})
} else {
res.json({
msg: 'success'
})
}
})
})
config.js code :
module.exports = {
USER: 'mellitir11#gmail.com',
PASS: 'my_email_password',
}
even that it shows the error message which is "Oops, something went wrong. Try again"
[1]: https://medium.com/#maison.moa/setting-up-an-express-backend-server-for-create-react-app-bc7620b20a61

Answer 1

Please Refer the Below code , Which is working for me..
Paste the below Code in FrontEnd i.e React (app.js)
import React,{useState,useEffect} from "react"
import Axios from 'axios'
import './App.css';
function App() {
const [frommail,setfrommail]=useState("")
const [password,setpassword]=useState(0)
const [tomail,settomail]=useState("")
useEffect(()=>{
Axios.get("http://localhost:3001/read").then((response)=>{
console.log(response.data)
})
},[])
const sendmail=()=>{
Axios.post("http://localhost:3001/mail",{frommail:frommail,password:password,tomail:tomail}).then((response)=>{
if (response.data.msg === 'success'){
alert("Email sent, awesome!");
}else if(response.data.msg === 'fail'){
alert("Oops, something went wrong. Try again")
}
})
}
return (
<div className="App">
<label>From</label>
<input type="text" onChange={(e)=>{setfrommail(e.target.value)}}/>
<label>From Mail Password</label>
<input type="text" onChange={(e)=>{setpassword(e.target.value)}}/>
<label>To address</label>
<input type="text" onChange={(e)=>{settomail(e.target.value)}}/>
<input type="submit" onClick={sendmail}/>
</div>
);
}
export default App;
Then Here is the code For Backend i.e Node js
const express = require("express");
const app = express();
const cors=require('cors')
var nodemailer = require('nodemailer');
app.use(express.json());
app.use(cors())
app.post(("/mail"),async (req,res)=>{
const frommail=req.body.frommail
const password = req.body.password
const tomail=req.body.tomail
var transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: frommail,
pass: password
}
});
var mailOptions = {
from: frommail,
to: tomail,
subject: 'Sending Email using Node.js',
text: `sending mail using Node.js was running successfully. Hope it help you. For more code and project Please Refer my github page`
// html: '<h1>Hi Smartherd</h1><p>Your Messsage</p>'
};
transporter.sendMail(mailOptions, function(error, info){
if (error) {
res.json({
msg: 'fail'
});
}
else{
res.json({
msg: 'success'
})
}
});
})
app.listen(3001, () => {
console.log("Server is Running");
});
Finally Ensure that your From mail id have a less secure app access:
check this feature is enable in your gmail account

Answer 2

Nodemailer might do the trick for you, in essence you will need an email account that supports smtp, node v6 or above and Nodemailer Documentation (there's a how to example) it supports ssl, Oauth authentication and DKIM. Depending on what you need specificly there are other options like mailgun and mailchimp that provide APIs or backend with PHP or Java