Gage Hendy Ya Boy Gage Hendy Ya Boy - 8 months ago 55
Node.js Question

Sending an email from Create-React-App contact form

I am working on a website that I used create-react-app to create.
I need to make a contact page where the information entered will be sent to a specified email.

After doing some research I discovered this is going to require me to setup some back-end. I am very unfamiliar with back-end programming. I know about nodejs and am somewhat capable of setting up a basic server using that, but I have no clue how to connect it to the react site, or if I even need a node server (just mentioned it because I found Nodemailer).

What's a good back-end setup I should use? All I need to use it for is sending an input field's value to a specific email.

I'm sorry this is such a noob/vague question, I am just looking for some direction on what to start researching and learning. I don't expect a detailed answer on the purpose and precise operations of a back-end server, just some helpful guidance or somewhere to start learning!

Any help is really appreciated!

Answer Source

I can think of two options to connect to the back-end to send an email.

  1. API: You create an endpoint on your backend (i.e. https://yourdomain.com/api/sendemail). Using expressjs, or some other server side library, you create that endpoint to receive a POST request. (https://expressjs.com/en/starter/basic-routing.html) You then use the front-end (fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) to call the endpoint with the data needed in the email and in turn the endpoint calls your send email function with Nodemailer or whatever.

  2. Form Submit: The other option is similar to the first in that it sends a POST request with the form data to the back-end. This requires that the server send back a new page and your browser will then reload. Where as the first option can be done without a page reload.

Not an expert on this but those are the two options I know of. Good luck!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download