6

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!

Improve this question
1
  • You may want to take a look at EmailJS, which allows sending email using pre-built templates directly from Javascript [disclosure - I'm one of the creators] Commented Aug 20, 2017 at 16:43

1 Answer 1

Reset to default
7

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!

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

1 Comment

Thanks so much! Super helpful resources.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.