Search code examples
node.jsreactjsnodemailergodaddy-api

React Form: How to send email using Nodemailer


I am trying to send mail to my GoDaddy email from my website contact box using NodeMailer. But when sending it I am getting 500 error of net::ERR_EMPTY_RESPONSE .

I have gone through some of the solution from SO as well but it seems I have missed some seetings or so. Should I need to change my configuration or anything related to get emails in godaddy mail box ? Any suggestion what needs to be done here.

//ReactForm

class BookAConsultation extends Component{
    constructor(props){
        super(props);
        this.state={
            name: '',
            phone: '',
            email: '',
            comment: ''
        };
        this.handleOnChange = this.handleOnChange.bind(this);
        this.handleOnSubmit = this.handleOnSubmit.bind(this);
    }

    handleOnChange = (e) => {
        this.setState({ [e.target.name] : e.target.value });
    }

    async handleOnSubmit(e) {
        e.preventDefault();
        const { name,  phone, email, comment } = this.state;
        const bookConsultation = await axios.post('api/consultation',{
            name,
            phone,
            email,
            comment
        })
    }

    render(){
        return(
            <Container>
            <Grid  className="book-a-consultation-header">

                <Cell col={6} >
                    <div className="book-a-consultation">
                        <Form onSubmit ={this.handleOnSubmit}>
                            <FormGroup>
                                <div className="row ">
                                    <Label for="name">Name*</Label>
                                    <Input type="text" name="name" id="name" placeholder="Name"
                                    className="mb-3"
                                    onChange={this.handleOnChange}/>

                                    <Label for="phone">Phone Number*</Label>
                                    <Input type="text" name="phone" id="phone" placeholder="Phone Number"
                                    className="mb-3"
                                    onChange={this.handleOnChange}/>

                                    <Label for="email">Email Id*</Label>
                                    <Input type="email" name="email" id="email" placeholder="Email"
                                    className="mb-3"
                                    onChange={this.handleOnChange}/>

                                    <Label for="comment">Additional Comment</Label>
                                    <textarea type="text" name="comment" id="comment" placeholder="Comment"
                                    className="mb-3"
                                    onChange={this.handleOnChange}/>

                                    <Button
                                        color="dark"
                                        style={{marginTop: '2rem'}}
                                        block
                                    >Book Free Consultation</Button>
                                </div>
                            </FormGroup>
                        </Form>
                    </div>
                </Cell>
            </Grid> 
            </Container>

        )
    }
}

//Server.js

app.post('/api/consultation', (req, res) => {
    nodemailer.createTestAccount((err, account) => {
        const htmlEmail = `
            <h3>Contact deatails </h3>
            <ul>

                <li>Name: ${req.body.name} </li>
                <li>Phone: ${req.body.phone} </li>
                <li>Email: ${req.body.email} </li>
            </ul>
            <h3> Message <h3>
            <p>${req.body.content}</p>

        `
        let mailerConfig = {    
            host: "smtpout.secureserver.net",  
            secure: true,
            secureConnection: false, // TLS requires secureConnection to be false
            tls: {
                ciphers:'SSLv3'
            },
            requireTLS:true,
            port: 465,
            debug: true,
            auth: {
                user: "[email protected]",
                pass: "password"
            }
        };
        let transporter = nodemailer.createTransport(mailerConfig);

        let mailOptions = {
            from: '[email protected]',
            to: '[email protected]',
            replyTo: '[email protected]',
            subject: 'Some Subject',
            text: req.body.content,
            html: htmlEmail
        };

        transporter.sendMail(mailOptions, (err, info) => {
            if (error) {
                console.log('error:', err);
            } else {
                console.log('Message sent: %s', info.content);
                console.log('Message URL: %s', nodemailer.getTestMessageUrl);
            }
        });
    })
})

//error

enter image description here


Solution

  • It seems everything is correct, that error appears when the server doesn't response anything and frontend side is waiting for an answer, so in your sendMail callback just try to use:

    transporter.sendMail(mailOptions, (err, info) => {
      if (error) {
        // ERROR SERVER RESPONSE
        res.status(500).send({status: 'FAIL', msg: 'Internal error: email not sent'})
        ...
      } else {
        ...
        // SUCCESS SERVER RESPONSE
        res.status(200).json({status: 'OK', msg: 'Email sent'})
        ...
      }
    });
    

    This should resolve the problem.