Ninja Space Content Blog

Working with Nodemailer and Express to create a Contact Us form

Posted by Ninja Space Content on Thursday, December 31, 2020 Under: node
For the last 24 hours, I have been working on my Contact Form and I have it up and running now. However, no surprise here, I didn't do it without some errors at the beginning. I found some sources that I want to document here to look back on for the future for the next Nodemailer build out.

Here are the three resources on Nodemailer that I looked at: 
https://lo-victoria.com/build-a-contact-form-with-react-and-nodemailer
https://w3collective.com/react-contact-form/
https://nodemailer.com/about/

I use Express for my server, and React for my front end. If you're like me, I can't just look at one resource and figure it out. It takes me a good amount of time to research and then when I feel comfortable enough with the big picture of everything, I'll start typing code.

I found that the three resources at the top were very helpful. They first two links use gmail as an example, which is what I am using for my Contact Us form that I've been working on, and the same tech: express, node and react. The last link listed above is Nodemailer's official doc, which I highly recommend reading first. 

The main problem I ran into on the server side involved my gmail credentials. This was the error message that I received in my terminal: "Error: Invalid login: 535-5.7.8 Username and Password not accepted."

There were two main issues that were causing this problem for me. First, I mistyped my password and finally, I needed to go into my Google account settings to turn on the following: Allow less secure apps

(More info on Less secure app access from Google directly: "Some apps and devices use less secure sign-in technology, which makes your account vulnerable. You can turn off access for these apps, which we recommend, or turn it on if you want to use them despite the risks. Google will automatically turn this setting OFF if it’s not being used.")

So, you'll want to go to Google, then Settings, then turn ON the Allow less secure apps part. This will allow the Contact Us form to work and send information from the form to the particular gmail account.

After correcting my password and turning on the "Allow less secure apps" toggle, I was finally able to receive messages from my Contact Us form on my dev site to this gmail account from during dev.

I haven't done a git init for this new project that I am working on yet because as mentioned earlier this week in another blog post, I was having issues with the package.json file being changed when I git init-it; and then this caused my react app to not render anything on the page. I am still figuring this one out. It doesn't make any sense to me but I am a noob so I will try, and try again. 

However, I want to note that I put my email username and password in a .env file and using a dotenv library via Node to secure my important information. 

I am not familiar with using hidden variables via Netlify so I am going to use Heroku for this new project as I've used the hidden variables for JWT token and API Keys with Heroku in the past during my coding bootcamp cohort program. 

I'm still working on some more things on the new project but once I have it ready for show, I'll include the link here so you can see my new Contact Us form that I used with Nodemailer.

UPDATE (1/4/20): I got my files onto GitHub successfully, but then when I deployed to Heroku, the Contact Us form doesn't work, saying there was an error connection. Exact message was: POST http://localhost:4000/send net::ERR_CONNECTION_REFUSED in my console. Things I had to add to get my Contact Us form to work on Heroku:
  • Add "proxy": "http://localhost:4000", to my package json
  • Make sure I have all of the following scripts. I was missing "node index.js". Example: "scripts": { "start:client": "react-scripts start", "start": "node index.js", "start:dev": "nodemon index.js", "build": "react-scripts build" }
  • Add path join like so: const path = require('path'); server.use(express.static(path.join(__dirname, 'build'))); server.use((req, res, next) => { res.sendFile(path.join(__dirname, 'build', 'index.html')) });
I'm still working with this project right now but at least the form works on Heroku as well now. I'll add more updates as I encounter more bugs.

In : node 


Tags: nodemailer  using gmail account  errors  documentation  express  react 

About Ninja Space Content


Ninja Space Content I have been building simple websites on my own since 2008 and currently run several websites at the moment, including this one. I used to be an account manager for an affiliate/e-commerce company, helping affiliates grow their sales so I have some knowledge on the business side and client side of affiliate marketing. Most recently, I decided to complete a coding bootcamp and have just graduated.
Note: links to resources and promoting special deals may allow me to earn a commission from each sale.