Build an Email Application using Node JS Express JS with Gmail and Nodemailer - Series 1/5

Hello 😊, my gorgeous friends on the internet 👋, how are you doing today?.

Sometimes we might want to send out a welcome email to our new registered users or send them a link to reset their forgotten password.

In this article series, you will learn how to send out emails directly from your Node JS Application using your registered Gmail account and Nodemailer, with an interface built with HTML and CSS that is powered by Express JS.

Don't worry about the complexity of what is listed above, I am going to explain all of them in this article (in a bit).

You can check out the final project sample of what you will be building along with me in this article Here.

If you prefer the single article version of this series you can check it out HERE

PREREQUISITES

Before following along in this tutorial, I assume you already have a basic understanding of JavaScript and that you already have the following setup:

1. Gmail account

2. Node installed on your PC

If you do not have a Gmail account setup, click Here to register your account and you can also download the Node application by clicking Here.

---

At the end of this article, you will learn the following concepts and technologies:

1. How to kick-start a Node JS application
2. Writing your first route (beginners)
3. Rendering HTML with Node JS package.json and explanation of what is inside
4. Implementation of Nodemailer
5. How to add Multer to your Node JS project
6. How to retrieve form data from the HTML form to our Node js Server

---

What is Node JS?

Node JS is a JavaScript framework that allows us to use JavaScript outside of the browser and on the server-side.

The Server-side is the system that runs on the server (Node JS runs here), and the client-side is the software that runs on a user's web browser (Vanilla JavaScript or React JS runs here).

To learn more about Node JS check out the official documentation Here

Let us verify that Node JS is successfully installed on your system, run the command below on your terminal.

node --version

If there is no error, the command will return the current version of the installed Node on your system.

---

What is Express JS?

Express JS is a popular framework of Node JS that makes it easier to manage web applications, Express JS is the E in both MERN and MEAN stack.

To learn more about Express JS check out the official documentation Here

---

What is Gmail?

Gmail is a free mail service provided by Google, they enable us to send and receive information (electronic-mail) on their platform.

To learn more about Gmail and its services you can check it out Here

---

What is Nodemailer?

Nodemailer is a Node JS module (function) that allows us to send emails from our Node JS (Server) Application.

To learn more about Nodemailer check out the official documentation Here

---

Setting up our Node JS Application

1. To begin our project create a new folder and name it projectMailSender

2. Right-click on the projectMailSender and select the Git bash here option

Your current directory should be displayed on the bash terminal like this

If you are not using Gitbash, ensure to navigate inside the projectMailSender folder on your cmd.

3. Let's proceed to generate our project package.json file by running the code below 👇

yarn init -y

The yarn init command is used to create or update a package.json file interactively. This command will walk you through a question and answer process to create a package.

We skipped some questions about the new package.json that we are creating with the -y flag, you can check out the questions in your next Node project by running yarn init without the -y.

Note that -y is a shorthand for -yes

To learn more about the yarn init command check out the official documentation Here

---

What's inside package.json?

If the yarn init command is successful a new file named package.json will be created in ourprojectMailSender` folder.

Let's take a look at what is inside our package.json file below 👇

1. name: the name of our project folder.

2. version: you can set and update your project version here

1 stands for a major update (version 1), second 0 stands for a minor update for the major update (version 1, with zero updates (the number of updates on version 1)), and finally the last 0 means patch, a very minor update that is not a big deal.

3. main: every project must have an index.js which serves as an entry point for your project (you can change this).

4. License: your project license goes here.

More information about your project will be stored in the package.json file if you do not skip the yarn init command with the -y flag.

We will be using a file name index.js as our project entry point, so let's proceed to create it in our project root 👇.

You can either run the command below to create the file from your terminal or create it manually.

touch index.js

Your project folder should look like this 👇

---

Installing Express JS

Now that we have our project setup, let us proceed to install the Express JS into our project. Use the command below 👇 to install Express JS

yarn add express

Note: if you initialized your package.json file with npm, kindly stick to it to avoid conflict, let me know in the comment section if you made this mistake.

The Express JS package should be successfully installed by now let's take a look at our project folder structure again below 👇

You should also notice from your end that a folder named node_modules and a file named yarn.lock has been created automatically in our project folder.

Explanation

• node_modules

This is where yarn or npm will keep the folders of our installed packages for us to make use of them later.

To learn more about node_modules you can check out the official documentation Here

• yarn.lock

Because we are using yarn as our package manager, yarn auto-generate this file to keep track of our project dependencies(packages).

To learn more about yarn.lock you can check out the official documentation Here

Warning: Do not alter the node_modules folder and the yarn.lock file manually.

---

Creating our Project Server with Express JS

Copy and paste the code below into your project entry file (index.js in this tutorial)

// Import express into our project
const express = require("express");

// Creating an instance of express function
const app = express();

// The port we want our project to run on
const PORT = 3000;

// Express allows us to listen to the PORT and trigger a console.log() when you visit the port
app.listen(PORT, () => {
  console.log(`Server is 🏃‍♂️ on port ${PORT}`);
});

This is the minimum way of setting up a server with the Express Node JS framework, I have included comments that are straightforward in the code snippet 👆, so it will be present in your own project for reference.

Let's proceed to test our server by running the code below in our terminal.

node index.js

Output 👇

---

Setting up Nodemon

Now that our server is running on our terminal, let's try to change something in our console.log(), let's say we update the console message below 👇

app.listen(PORT, () => {
  console.log(`Server is currently 🏃‍♂️ on port ${PORT}`);
});

Save your file and check your terminal, you should notice that the previous message is still displayed, this implies that the server will not restart whenever there is a change in our project directory, we need to do this manually each time we make a change in the project by stopping the server with ctrl + c and starting it again with node index.js.

If you restart your server, you should get a new message like below 👇

To do this automatically, we can install a package called nodemon, nodemon will help us listen to changes in our project files and automatically restart the server within seconds.

Run the following command to install nodemon to your project

yarn add --dev nodemon

We are installing the nodemon package as a development dependency because it is not needed when we finally host our Node JS project to production.

To learn more about dependencies and devDependencies in package.json you can check it out Here

Now that we've installed nodemon package in our project, let us set it up to do its job.

Open your package.json file 👇

Your project express package should be inside the dependencies object while the nodemon should be inside the devDependencies, this is because we need the express package in our production but we only need the nodemon for our project development.

if your package.json is not structured like the above, kindly check back how we installed the two packages previously.

Add the following code to your package.json file 👇

// Before the dependencies

  "scripts": {
    "start": "nodemon index.js"
  },

Your package.json file should look something like below 👇

we are basically adding a command to our project which can be accessed through yarn or npm, in this case, we are saying when we run the yarn start command, yarn should start our project with nodemon index.js, so that nodemon will start listening to our file changes.

Start the server again with the code below 👇

yarn start

You should get a response, that nodemon is ready for any file change and will restart the server immediately.

You can proceed to change your console.log() message and see if the server will restart automatically.

Kindly note that nodemon will only listen to changes to files with .js, .mjs, and .json extensions, we will have to handle the refresh of the HTML and CSS files on our browser.

If you wish to handle this automatically you can click HERE to install a live server on your VScode to listen for the HTML and CSS file changes.

Click the go-live to turn on the server for your HTML file (ensure you are currently on your HTML file)

---

Join me in the second series of this project article after you have completed the above setup. See you there 🏃‍♀️.

---

Next

• Rendering Static Files to the Browser with Express JS

Let me know in the comment section if you have any difficulties.