1. Getting things ready
GitHub repos — We start by creating two GitHub repos, one to host our React form and another for Node API. We could also do it in a single repo, but we are using two for better maintainability.
Node & npm — Download the latest version of node.js from the link. In this post we are using version 11.7.0. Node comes with npm. To make sure node and npm are installed, check their versions using the following commands on the terminal:
// For node version
//For npm version
React — We’re using create-react-app for our React application where we will build our form. Install create-react-app globally and generate our React app using the following commands:
//Install create-react-app globally
npm install create-react-app -g
//Generate a new react app called my-app
create-react-app my-app && cd my-app && npm start
2. The Form
Let’s get started with setting up a component that returns an HTML form. We’re using Bootstrap classes for style in the code below, so they are optional You can use your own CSS classes as well.
Here, each input has an onChange handler corresponding to a specific variable in our component’s state. So, when the input changes, the state gets updated as well. The form itself has an onSubmit handler that calls the formSubmit function which handles our API calls.
We will have a look at the function, but before that, let’s install axios (which we will be using in the function) to make HTTP request to the API.
npm install axios --save
Setting up our component src/App.js:
Now, we add the functions to handle form submission in our component.
The preventDefault() function (on line 2), as the name suggests, prevents the default action of the form, which would’ve caused a page reload. While the message is being sent, the button text changes to “…Sending”, and axios makes the API call.
Note: “API_URI”(line 14) is the uri of the endpoint of our API which will be discussed in the deployment section of this post(Step 4).
If everything goes right, the resetForm is called, which we haven’t defined yet. So let’s define the reset function that will reset our form fields and update our button label:
Now, we need something to transport our form inputs to the API, so we set up the nodemailer, config file and route. But before that, we need to setup Express.js in our Node API repo:
//Install express and other dependencies
npm install express body-parser nodemailer cors --save
Now we need to make a small change in our package.json file. Find “scripts” and add the following “start” line to it:
"start": "node ."
Now, in our directory we create an index.js file with the following code:
Important Note: Since we are working on the development version, the credentials will be exposed on GitHub, so make sure your repo is private or use a test email address for development version. Later in production, you can make use of the Zeit environment variables to store credentials safely.
We have installed body-parser to process the form data, and CORS to allow cross-origin requests.
We have setup a Nodemailer SMTP Transport and our route that will receive the data from our React form and send an email to the destination email address that we specify.
Finally! with all that done it’s time to deploy our app. We’re using Zeit Now for deployment, you can choose any other service that you like.
Start by creating an account on Zeit. Login and head over to “Now” from the top navigation. Connect your GitHub account and add the two repos that we just created. Now, we go back to our code and add an empty now.json file in both the repos.
It’s now time to push our codes to the respective github repos.
Now we create a new branch in both repos and work with those because we will need to create Pull Request for Zeit now to run deployment.
//create and change to new branch
git checkout -b new-branch
Now we add some content to the now.json files.
For our React repo we will use the following content on our now.json:
For our Node repo, we will use the following content on now.json:
Note: More examples for Zeit Now configurations can be found here.
Finally, we make a small change in our package.json in our React repo.
Find “scripts” and add the “now-build” line to it:
"now-build": "react-scripts build && mv build dist"
Now, we push the codes to their respective Github repos(new-branch) and then create a Pull Request in each. Zeit Now will immediately deploy the app recognizing the now.json files. You can view the app URL by clicking “Show all checks” and then “details” in the Pull Request summary. Lastly, be sure to copy the link and replace API_URI in the App.js file in React app. Now our form should successfully deliver emails.
Thanks for reading!