Nuxt.js and Node.js simple form with nodemailer PROBLEM :(

Question

I am new to Nuxt.js and Node.js. I would like to run a very simple contact form on a 'contact.vue' page. It works very well locally, but as soon as I do an 'npm run generate' to generate the files and upload all of this to an FTP it doesn't work anymore. I have an error in the console: "POST http://website.com/api/message 404 (Not Found)"

I use the POST method on my form with the action that points to 'api / message'. I am using axios in a method (on this same 'contact.vue' page :

async onSubmit (e) {
  e.preventDefault()
  await this.$axios.post('/api/message', {
    name: this.contactForm.name,
    firstname: this.contactForm.firstname,
  })
    .then((res) => {
      // On clear le formulaire
      this.contactForm.name = ''
      this.contactForm.firstname = ''
    })
    .catch((err) => {
      console.log(err)
    })
}

I have in the root folder an 'api/' folder with inside 'index.js' and the code :

const app = require('express')()
const bodyParser = require('body-parser')
const nodemailer = require('nodemailer')

module.exports = { path: '/api', handler: app }

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/message', async (req, res) => {
 const contenuFormulaireContact = `
   <ul>
     <li>Nom : ${req.body.name}</li>
     <li>Prénom : ${req.body.firstname}</li>
   </ul>
 `
 // NODEMAILER
 const transporter = nodemailer.createTransport({
   host: '',
   port: 465,
   secure: true,
   auth: {
     user: '',
     pass: ''
   }
 })

 const info = await transporter.sendMail({
   from: '"Website's Name" <[email protected]>', // sender address
   to: '[email protected]', // list of receivers
   subject: `NEW MESSAGE : ${req.body.subject}`, // Subject line
   text: '', // plain text body
   html: contenuFormulaireContact // html body
 })

 console.log('Message sent: %s', info.messageId)
 console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info))

 res.redirect(200, '/contact')
 })

Inside the nuxt.config.js i have :

/*
** Nuxt.js modules
*/
modules: [
  '@nuxtjs/pwa',
  '@nuxtjs/axios'
],
/*
** Axios cfg
*/
axios: {
  baseURL: '/'
},
/*
** Server middleware
*/
serverMiddleware: ['~/api/index.js'],

I'm sorry if for some of you this problem may seem very obvious but I'm completely stuck.

Thank you very much in advance if you take the time to help me.

Snowcraft · Accepted Answer · 2020-11-20 23:50:56Z

3

Actually when you run npm run generate, the website becomes fully static and node doesn't run in the background anymore. This is why your code would works with npm run dev or npm run start since they runs node simultaneously.

I am facing the same issue. A static website is not able to send mail from the client. It has to be sent server-side. To make your code works, you either have to use a node.js server, use serverless functions solutions like AWS Lambda or Netlify functions which will executes the mail sender function or use an external REST API service like Formspree or 99inbound.

See https://stackoverflow.com/a/53560851/2610770.

I hope I helped you a bit!

answered Nov 20, 2020 at 23:50

Snowcraft

434 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nuxt.js and Node.js simple form with nodemailer PROBLEM :(

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related