contact form works on local host but not on html page

Question

I'm using node and express to send email through html page. Following is my app:

`const express = require('express');
 const path = require('path');
 const nodeMailer = require('nodemailer');
 const bodyPaser = require('body-parser');

 const app = express()

 app.get('/', function (req, res) {
 res.sendFile(path.join(__dirname + '/index.html'));
 });


 app.set('view engine', 'html');
app.use(express.static('public'));
app.use(bodyPaser.urlencoded({ extended: true }));
app.use(bodyPaser.json());
var port = 3000;
app.get('/', function (req, res) {
res.render('index.html');
app.locals.layout = false;
});


 //internet connectivity check out
function checkInternet(cb) { 
require('dns').lookup('google.com', function (err) { 
    if (err && err.code == "ENOTFOUND") {
        cb(false);
    } else { 
        cb(true);
    }
})
}


app.post('/', (req, res) => {
const output = `
<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>
</ul>
<h3>Message</h3>
<p>${req.body.message}</p>
`;

// create reusable transporter object using the default SMTP transport
let transporter = nodeMailer.createTransport({
    host: "mail.example.com",
    port: 465,
    secure: true, // true for 465, false for other ports
    auth: {
        user: 'contact@example.com', // generated ethereal user
        pass: 'Y@$972200424' // generated ethereal password
    },
    tls: {
        rejectUnauthorized: false
    }
});

// send mail with defined transport object
let mailOptions = {
    from: `${req.body.email}`, // sender address
    to: "contact@example.com", // list of receivers
    subject: "Customer Message", // Subject line
    text: `SenderName: ${req.body.name}, --Message: ${req.body.message}`, // plain text body
    html: output // html body
};

transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
        return console.log(error);
    }

    console.log("Message sent: %s", info.messageId);
    console.log("Preview URL: %s", nodeMailer.getTestMessageUrl(info));

    if (info.messageId) {
        res.redirect('back');
     res.send(true);
    }
});
});


app.listen(3000, () => console.log('server is running at port 3000'));`

the thing is it sends email and works fine on localhost:3000 but the same does NOT work on index.html page. how can I have it to send email on the html page?

Answer 1

Simply move html files to the public directory below You must be change

app.use(express.static('public'));

to

app.use(express.static(`${__dirname}/public`));

also change:

 app.get('/', function (req, res) {
 res.sendFile(path.join(__dirname + '/index.html'));
 });

to

app.get('/', function (req, res) {
 res.sendFile(path.join(`${__dirname}/public/index.html`));
 });

Follow the order of the lines:

app.use(express.static(`${__dirname}/public`));
app.get('/', function (req, res) {
  res.sendFile(path.join(`${__dirname}/public/index.html`));
});

Also you can use template engine pug. see this doc:

Using template engines with Express