DEV Community

Cover image for Build and Deploy a Serverless ReactJS Contact Form with Nodemailer and Netlify Functions

Build and Deploy a Serverless ReactJS Contact Form with Nodemailer and Netlify Functions

Isham Jassat on September 07, 2020

ReactJS is a client side JavaScript framework. As such, while you can build good-looking contact forms with loads of client-facing functionality, ...
Collapse
 
sachafrosell profile image
Alexander Frosell

can get this working on netlify dev but not on the deployed version... Any suggestions. It also does not work when running a standard npm start

Collapse
 
ishamjassat profile image
Isham Jassat

Strange - do you have more detail? E.g. any error messages, the Netlify function logs etc? Link to a repo?

Collapse
 
sachafrosell profile image
Alexander Frosell

I basically just get a 404 post error even when running with npm start. Works perfectly when using netlify dev

Thread Thread
 
ishamjassat profile image
Isham Jassat

Ok, first thing I would suggest is to check your netlify.toml file and make sure the redirect is setup correctly:

[build]
functions = "functions"
[[redirects]]
from = "/api/*"
to = "/.netlify/functions/:splat"
status = 200

But without seeing your code I’m a bit in the dark. So if you post your code on stackoverflow and send me a link to the question, or a direct link to your GitHub repo I can help troubleshoot

Thread Thread
 
ishamjassat profile image
Isham Jassat

I guess the other thing to try is to reference the fully qualified production URL - https://[your app name].netlify.app/api and see if that works

Collapse
 
erincodes profile image
Erin Murphy

Thank you for this! So far so good, however, I am still yet to deploy my application.

I added another transporter.sendMail() function that sends the email submission to the sender so they can see the message they sent using the contact form, it works perfectly!

Collapse
 
mave838 profile image
maverick • Edited

It is working correctly with outlook. Sends the email. But when I press submit on the console I see 500 error [HTTP/1.1 500 Internal Server Error 195ms]

lambda response was undefined. check your function code again
Response with status 500 in 163 ms.

Collapse
 
iraqwarvet31 profile image
Larry

Mine works locally no problem but not in production. Getting this error:

createError.js:16 Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:84)

Collapse
 
ikeeptrying profile image
Dre

I wanted to see the code, but your link just goes to a repo with a copy of a 'create-react-app' that has not been touched. ???

Collapse
 
adebayoomolumo profile image
Adebayo Omolumo

I also keep getting error while using the JSON.parse function on "exports.handler"

Collapse
 
adebayoomolumo profile image
Adebayo Omolumo

Could you provide more info in the netlify api scripts? I have a similar code but I am stuck trying to post to the backend then to a db using netlify.