DEV Community: Jared Long

Automate commits with LaunchAgents & JavaScript

Jared Long — Thu, 02 Feb 2023 21:43:22 +0000

In this article, I will guide you through setting up a LaunchAgent that will automatically run a JavaScript project to update & commit to GitHub. This is a fun way to keep that Github "grass" green.

LaunchAgents contain .plist files that your mac will look for and run on login.

Important notes:

LaunchAgents are only on macos
Node.js & Git are required
Any code editor of your choice

Setup Node project
Setup Github repo
Write some JavaScript pt.1
Write some JavaScript pt.2
Setup LaunchAgent

Setup new Node.js project with git

Let's first start with a fresh node project in a new directory(using auto-commit in this example) in your desired location on your mac. With your terminal open, run the following:

mkdir auto-commit
cd auto-commit
npm init -y

The above command will initialize the project and skip all the required details required by the package.json file. You can set these configuration details later if/when you’re ready to add them.

After running this, you should see package.json contents printed in your terminal.

Now we can open this new project and we're going to install one package, shelljs
Shelljs is a great Command Line Utility for interacting with the command line in JavaScript.

npm i shelljs

After this, you will see a package-lock.json file and node_modules appear in your project. Your package.json should look like this:

{
  "name": "auto-commit",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "shelljs": "^0.8.5"
  }
}

Let's now create our index.js file:

touch index.js

Now we need git in our project, so we can push to a remote repo. We're also going to create a .gitignore file so we don't push up our node_modules:

git init
touch .gitignore

Inside your new .gitignore file, type in node_modules.

You should have the following files in your project:

node_modules
.gitignore
index.js
package-lock.json
package.json

Now it's time to move onto the next step and create an empty repository in Github.

Setup new Github repository

We're going to create a new repository on Github. For this example, I am going to name it the same name as my project, auto-commit. No other info is needed and you can make it public or private:

Once it is created, you will now need to copy the remote origin line:

& paste it in the terminal at the root of your auto-commit directory.

Once you do this, you can run the following to see your Github remote link that you just pasted in:

git remote -v

Now within our project, let's push everything we currently have up to Github.

git add .
git commit -m"first commit with initial file creation"
git push -u origin master

Now if you go back to your repo on Github, you will see your files.

Time to write some JavaScript

For this tutorial, we're going to write some code that renames & increments a file name every time the project is ran.

Let's create a new empty file called renameMe-0.js at the root of your project:

touch renameMe-0.js

Let's push this new file up to Github:

git add renameMe-0.js
git commit -m"pushes file up at number 0"
git push

Now let's create another file called nameChange.js where we will write the logic to find renameMe-0.js and update it.

touch nameChange.js

At the top of nameChange.js, let's bring in shelljs

const shell = require('shelljs');

Let's create our first function and look for the files in our project:

If you run node nameChange.js you will see this function log our projects JavaScript files in addition to the output that this shelljs method gives out within an array in the terminal.

Now that we have our array of files & output, all we need is the file named renameMe-0.js, so we can use the filter array method to return only that file in an array.

Now that we have isolated our file, let's create a new function that gets the number from the file name and adds to it so that it can be renamed:

If you run node nameChange.js, you will see renameMe-1.js printed to the terminal.

We can now use shell to update our previous file name with the new one & if you run node nameChange.js again in the terminal, you will see the file be renamed:

You will see the file get renamed as well as 3 git changes.

we haven't committed nameChange.js yet
renameMe-0.js was technically deleted
renameMe-1.js was created

We should currently have these files in our project:
You should have the following files in your project:

node_modules
.gitignore
index.js
nameChange.js.  <-------- added during this section
package-lock.json
package.json
renameMe-1.js   <-------- added during this section

Before we move on, let's remove the setNewFileName() function call from the end of the file & export setNewFileName. Our final nameChange.js file should look like this:

const shell = require('shelljs');

const getFileNames = () => {
    const fileNames = shell.ls('*.js');
    return fileNames.filter(fileName => fileName.includes('renameMe'));
}

exports.setNewFileName = () => {
    const [fileToRename] = getFileNames(); 
    const fileNumber = fileToRename.split('-')[1]; 

    const newFileName = `renameMe-${parseInt(fileNumber) + 1}.js`; 

    shell.mv(fileToRename, newFileName);
    return { fileToRename, newFileName };
}

At this point, we are ready to move one & get git involved.

Let's write some JavaScript pt. 2

Let's start by creating a new file at the root of the project called gitCommands.js. We need to bring in shelljs and our setNewFileName function:

const shell = require('shelljs');
const { setNewFileName } = require('./nameChange');

We're going to create a new function expression called commitNewFile and destructure the object we returned in setNewFileName:

const commitNewFile = () => {
    const { fileToRename, newFileName } = setNewFileName();
}

Now let's setup "state-like" variables to help debug in the future if necessary & setup three command string variables to git add,git commit & git push the files.

const commitNewFile = () => {
  const { fileToRename, newFileName } = setNewFileName();
  let isFileAdded = false;
  let error = { message: "", code: "" };

  const gitAddFiles = `git add ${fileToRename} ${newFileName}`;
  const gitCommitFiles = `git commit -m "renamed ${fileToRename} to ${newFileName}"`;
  const gitPushFiles = `git push`;
};

Now let's use shell to execute these commands(add, commit, push):

const shell = require("shelljs");
const { setNewFileName } = require("./nameChange");

const commitNewFile = () => {
  const { fileToRename, newFileName } = setNewFileName();
  let isFileAdded = false;
  let error = { message: "", code: "" };

  const gitAddFiles = `git add ${fileToRename} ${newFileName}`;
  const gitCommitFiles = `git commit -m "renamed ${fileToRename} to ${newFileName}"`;
  const gitPushFiles = `git push`;

  shell.exec(gitAddFiles, (code, stdout, stderr) => {
    // code is 0 for success, 1 for error
    code === 0 ? (isFileAdded = true) : (error = { message: stderr, code });

    console.log(`File added to git: ${isFileAdded}`);

    if (isFileAdded) {
      shell.exec(gitCommitFiles, (code) => {
        code === 0 ? shell.exec(gitPushFiles) : console.log(error);
      });
    }
  });
};

Before we try this code out, let's manually commit & push up our renameMe-1.js file.

git add renameMe-1.js
git commit -m"adds manual push of renameMe file"
git push

Now that file should have a clean git slate.

Lets export our commitNewFile, import it & invoke it within index.js

exports.commitNewFile = () => ....

Inside index.js:

const { commitNewFile } = require("./gitCommands");

commitNewFile();

Now if we run node index.js, you should see everything in action. The file should be renamed to renameMe-2.js, committed and pushed to Github.

Let's add the rest of our files and move on to the next step.

git add .
git commit -m"adds nameChange and gitCommands functionality"
git push

Setup LaunchAgent

Now within the root of our project let's create a plist file named com.autocommit.plist that we will later move to our LaunchAgents directory.

With this file open, let's paste this boilerplate in:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>com.autocommit</string>
    <key>ProgramArguments</key>
    <array>
        <string>__{NODE LOCATION WILL GO HERE}__</string>
        <string>__{PROJECT FILE ENTRY WILL GO HERE}__</string>
    </array>
    <key>WorkingDirectory</key>
    <string>__{PROJECT ROOT LOCATION WILL GO HERE}__</string>
    <key>RunAtLoad</key>
    <true/>
    <key>StandardOutPath</key>
    <string>__{OUTPUT LOCATION}__</string>
    <key>StandardErrorPath</key>
    <string>__{ERROR OUTPUT LOCATION}__</string>
</dict>
</plist>

There are five areas of this plist file that we need to update:

NODE LOCATION
PROJECT FILE ENTRY
PROJECT ROOT LOCATION
OUTPUT LOCATION
ERROR OUTPUT LOCATION
Updating NODE LOCATION:
If we open up a terminal window and run the following, you will get the file path to your node version:

which node

The output should look something like this:

/Users/jared.long/.nvm/versions/node/v16.16.0/bin/node

I have nvm (node version manager) installed so my output may look slightly different

Lets take that output and replace the node location line:

REPLACE:
<string>__{NODE LOCATION WILL GO HERE}__</string>

WITH:
<string>/Users/jared.long/.nvm/versions/node/v16.16.0/bin/node</string>

Updating PROJECT FILE ENTRY This is the main file that we are running our project from, which in this case is index.js


REPLACE:
<string>__{PROJECT FILE ENTRY WILL GO HERE}__</string>

WITH:
<string>index.js</string>

Updating PROJECT ROOT LOCATION This is referring to the root file location of the app that you are creating now. Running the pwd command in the terminal is all you'll need for this. Grab that path and replace the following string with it:

REPLACE:
<string>__{PROJECT ROOT LOCATION WILL GO HERE}__</string>

***** WITH YOUR PATH TO YOUR PROJECT :
<string>/Users/jared.long/article-auto-commit</string>

4 & 5. Updating OUTPUT & ERROR OUTPUT LOCATION
These are files that your app will print output & errors from this LaunchAgent action into, which we can put directly into the project. We can grab your project path from above and add log files to the end of the path:

REPLACE
<key>StandardOutPath</key>
    <string>__{OUTPUT LOCATION}__</string>
<key>StandardErrorPath</key>
    <string>__{ERROR OUTPUT LOCATION}__</string>

WITH
<key>StandardOutPath</key>
    <string>/Users/jaredlong/article-auto-commit/logs/autocommit.log</string>
<key>StandardErrorPath</key>
    <string>/Users/jaredlong/article-auto-commit/logs/autocommit_err.log</string>

With your own file paths, our final plist file should look something like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>com.autocommit.la</string>
    <key>ProgramArguments</key>
    <array>
        <string>/Users/jaredlong/.nvm/versions/node/v16.14.2/bin/node</string>
        <string>index.js</string>
    </array>
    <key>WorkingDirectory</key>
    <string>/Users/jaredlong/auto-commit</string>
    <key>RunAtLoad</key>
    <true/>
    <key>StandardOutPath</key>
    <string>/Users/jaredlong/auto-commit/logs/autocommit.log</string>
    <key>StandardErrorPath</key>
    <string>/Users/jaredlong/auto-commit/logs/autocommiterr.log</string>
</dict>
</plist>

Our com.autocommit.plist file is complete and needs to be moved into our LaunchAgents directory, so that it will RunAtLoad.

LaunchAgents are found at the this file path:
~/Library/LaunchAgents

Using the terminal, lets move our plist file to the LaunchAgents directory. Your first file path may look different than mine, as this is where your com.autocommit.plist is found on your machine:

mv ~/article-auto-commit/com.autocommit.plist ~/Library/LaunchAgents/com.autocommit.plist

Now we can double check that it has been moved to the LaunchAgents by running the following:

cd ~/Library/LaunchAgents
ls

You should see your com.autocommit.plist file here.

Now for the final test, reboot your mac, login and check your Github repo. You should see it get updated (may take a minute).

Notes to end on:

if you use nvm and you uninstall the version of node that this is pointing to, your node file path will need to be updated in your plist file

How to implement email functionality with Node.js, React.js, Nodemailer, and OAuth2

Jared Long — Tue, 30 Mar 2021 20:06:28 +0000

Nodemailer is a Node.js module that allows users to send messages directly to your email. This article is a guide to help you connect your Node.js server to your GMail account by using OAuth2 in addition to creating a React.js Form to send an email.

Steps:

Set up the Node.js Server
Set up Nodemailer part 1
Configure OAuth2
Set up Nodemailer part 2
Set up Nodemailer part 3
Set up React.js
Set up Nodemailer part 4
Finish React

To successfully go through this article, you need to have node and npm installed on your device, a code editor, as well as a basic understanding of Node.js and React.js. This guide does go back and forth between the backend, OAuth2, and frontend, so bare with me!

To check for node and npm versions on your system, run the following commands to retrieve the version numbers:



node -v
v15.9.0
npm -v
7.5.3

Setting up the Node.js server

If you have node and npm installed, let’s get started.

Create a directory for your project. For this we will be using nodemailerAPI.
mkdir nodemailerAPI

Go into your new nodemailerAPI directory and create a server.js file, which will serve as our main file.



cd nodemailerAPI
touch server.js

In the terminal, run the following command to initialize a package.json file:



npm init -y

Now let’s install the packages that we will need.
For this project, we will be using Express.js, Nodemailer, and Dotenv.



npm i express nodemailer dotenv

Time for some node.js coding!

We are going to require our packages and run our server using Express.js. Open your directory in your code editor and input the following code:



const express = require("express");
const nodemailer = require("nodemailer");
const app = express();
require("dotenv").config();

const port = 3001;
app.listen(port, () => {
 console.log(`Server is running on port: ${port}`);
});

Once the above code is inputted, you will be able to run your server with the following command and see the console.log:



node server.js
Server is running on port: 3001

Our server is now running, which is great news! Let’s stop the server for now with control-c and move on to our next step, setting up NodeMailer.

Setting up NodeMailer

Nodemailer requires 3 things to begin running:

A transporter object
A mailOptions Object
A sendMail method

Step 1: Lets setup the transporter object:



let transporter = nodemailer.createTransport({
 service: "gmail",
 auth: {
   type: "OAuth2",
   user: process.env.EMAIL,
   pass: process.env.WORD,
   clientId: process.env.OAUTH_CLIENTID,
   clientSecret: process.env.OAUTH_CLIENT_SECRET,
   refreshToken: process.env.OAUTH_REFRESH_TOKEN,
 },
});

Important Note: The user and pass keys are your own email and your email password. We will be getting the clientId, clientSecret, and refreshToken as soon as we set up OAuth2.

As you can see, storing these variables in a .env file are incredibly important to your privacy, so lets create a .env file to store our auth values:



touch .env

Within the .env file, input the following:



EMAIL=youremail@gmail.com
WORD=youremailpassword
OAUTH_CLIENTID=
OAUTH_CLIENT_SECRET=
OAUTH_REFRESH_TOKEN=

Before moving on to step two in the NodeMailer process, let's set up OAuth2 and get those other values!

Configuring OAuth2

Click the following link to go to your Google Cloud Platform dashboard. Near the top left, you will see a dropdown arrow. Once you click it, a project info modal will come up.

On the popup modal, select the new project option.

After clicking the new project button, you will see a new screen with a form to name your new project. For this project, we will be using nodemailerAPI and you can skip the location input box. Click create.

After you click create, it will generate your new project and you will be redirected back to your dashboard.

On the same drop down(top left) as where you went to create the new project, you will be able to see your new project, which you can now select.

Once selected, open the top-left nav menu and select the following:

Once you click the OAuth consent screen, you will be brought to the following page, where you will click external:

After clicking create, you will be taken to a new page where you are required to fill in information regarding your newly created project:

Once you have filled in the above information and click save & continue, you will see the Scopes phase of the OAuth configuration. This page can be skipped so click save and continue here.

The next page is where you will add yourself as the test user:

Add yourself as a test user using your gmail and then click save and continue. The next page will be a summary of all of the inputted information, which is the end of that phase.

Next, click credentials on the left hand side, then click create credentials and select OAuth client ID:

You will be redirected to the following page, where you create an OAuth clientID:
Change the application type to Web Application. We will be using OAuth2 Playground https://developers.google.com/oauthplayground as the Authorized redirect URI:

Once those fields are inputted, you can click create.

Next, you will be presented with your OAuth clientID and Client Secret:

Copy both of those values and return to your .env file to fill in those empty keys.

Now you should only be missing one key-value: OAUTH_REFRESH_TOKEN, so let's go get it.

Head to the OAuth Playground. Once there, click the gear on the upper right hand side of the screen to bring up the configuration. Click Use your own OAuth credentials and input the Client ID and Secret that you just inputted into your .env file.

On the left hand side of the screen, you will see a large list of API’s. Select Gmail API v1 and the first option under the dropdown:

Click authorize API’s on the bottom right. This will bring you to a popup to select your gmail account. Choose your account and select continue on the next page.

Then, a new popup will come up and ask for you to grant your app permission to send email from your gmail. Click allow here.

After you click allow, you will be redirected back to the OAuth playground dashboard. Click exchange authorization code for tokens to receive your refresh token for your .env file:

Our OAuth2 configuration is done, so lets head back to node.

NodeMailer Step 2:

By now, you should have all of your key-value pairs filled out within your .env file. Let's verify the transporter underneath the created transporter from Nodemailer step 1.



transporter.verify((err, success) => {
 err
   ? console.log(err)
   : console.log(`=== Server is ready to take messages: ${success} ===`);
});

Within the terminal, run the server again and check for the console.log:



node server.js 
Server is running on port: 3001
=== Server is ready to take messages: true ===

We get true! Very exciting

Underneath the verification, lets create a test mailOptions object:



let mailOptions = {
 from: "test@gmail.com",
 to: process.env.EMAIL,
 subject: "Nodemailer API",
 text: "Hi from your nodemailer API",
};

Nodemailer Step 3:

Next, lets send the mailOptions through a transporter sendMail method:



transporter.sendMail(mailOptions, function (err, data) {
 if (err) {
   console.log("Error " + err);
 } else {
   console.log("Email sent successfully");
 }
});

Now, lets run the server again and within the terminal, you will see:



node server.js 
Server is running on port: 3001
=== Server is ready to take messages: true ===
Email sent successfully

Check your email as it will be there!

Checkout the full server.js code at this point:



const express = require("express");
const nodemailer = require("nodemailer");
const app = express();
require("dotenv").config();

let transporter = nodemailer.createTransport({
 service: "gmail",
 auth: {
   type: "OAuth2",
   user: process.env.EMAIL,
   pass: process.env.WORD,
   clientId: process.env.OAUTH_CLIENTID,
   clientSecret: process.env.OAUTH_CLIENT_SECRET,
   refreshToken: process.env.OAUTH_REFRESH_TOKEN,
 },
});

transporter.verify((err, success) => {
 err
   ? console.log(err)
   : console.log(`=== Server is ready to take messages: ${success} ===`);
});

let mailOptions = {
 from: "test@gmail.com",
 to: process.env.EMAIL,
 subject: "Nodemailer API",
 text: "Hi from your nodemailer API",
};

transporter.sendMail(mailOptions, function (err, data) {
 if (err) {
   console.log("Error " + err);
 } else {
   console.log("Email sent successfully");
 }
});

const port = 3001;
app.listen(port, () => {
 console.log(`Server is running on port: ${port}`);
});

As of now, there is no way to access nodemailer from the frontend as we do not have a route established. So let’s create that route.

Our transporter.sendMail is already set up so this will be fast! All we are doing is taking the transporter.sendMail and placing it inside of a function that is attached to a route. We have also attached a response action to send a status back, which will help determine the success in a later cURL test.



app.post("/send", function (req, res) {
 let mailOptions = {
   from: "test@gmail.com",
   to: process.env.EMAIL,
   subject: "Nodemailer API",
   text: "Hi from your nodemailer API",
 };

 transporter.sendMail(mailOptions, function (err, data) {
   if (err) {
     console.log("Error " + err);
   } else {
     console.log("Email sent successfully");
     res.json({ status: "Email sent" });
   }
 });
});

Let’s test this new route using cURL.

With your nodemailerAPI server running, open up your terminal, and run the following command in a new terminal tab:



curl -d -url http://localhost:3001/send

After running the cURL command, you will see our response come back in the terminal:



{"status":"Email sent"}

You should see an email in your inbox; Our route is now ready to use on the front-end(kindof)!

======================================================

Setup React.js

React Setup Step 1:

Lets head back to your terminal to create the new react project, which we will call nodemailer-form by running the following command:



npx create-react-app nodemailer-form

Open this new react directory in your code editor and within src/App.js, you will see the default react code that comes with create-react-app. Let’s remove all of it except for the top level div:

For the purpose of this guide, we will only be coding within App.js, which is now blank and ready for us to get to work.

Import & setup the useState Hook

At the top line of App.js, import useState like so:



import { useState } from "react";

Our nodemailerAPI will be looking for a name, email, and message when sending an email. So, let’s set up our useState to reflect that:



const [mailerState, setMailerState] = useState({
   name: "",
   email: "",
   message: "",
 });

Now let's set up a function to handle the change when we type into our future input boxes.



function handleStateChange(e) {
   setMailerState((prevState) => ({
     ...prevState,
     [e.target.name]: e.target.value,
   }));
 }

Next, let’s create a form and attach the handleStateChange to each input box as well as the name and value.



return (
   <div className="App">
     <form>
       <fieldset>
         <legend>React NodeMailer Contact Form</legend>
         <input
           placeholder="Name"
           onChange={handleStateChange}
           name="name"
           value={mailerState.name}
         />
         <input
           placeholder="Email"
           onChange={handleStateChange}
           name="email"
           value={mailerState.email}
         />
         <textarea
           placeholder="Message"
           onChange={handleStateChange}
           name="message"
           value={mailerState.message}
         />
  <button>Send Message</button>
       </fieldset>
     </form>
   </div>
 );

If you run your react project with npm start and view your project on localhost:3000, it is going to be one of the ugliest forms you’ve ever seen. Let’s do a quick fix and add some inline styles to make it sort of look like a contact form:



<div className="App">
     <form
       style={{
         display: "flex",
         height: "100vh",
         justifyContent: "center",
         alignItems: "center",
       }}
     >
       <fieldset
         style={{
           display: "flex",
           flexDirection: "column",
           justifyContent: "center",
           width: "50%",
         }}
       >
         <legend>React NodeMailer Contact Form</legend>
         <input
           placeholder="Name"
           onChange={handleStateChange}
           name="name"
           value={mailerState.name}
         />
         <input
           placeholder="Email"
           onChange={handleStateChange}
           name="email"
           value={mailerState.email}
         />
         <textarea
           style={{ minHeight: "200px" }}
           placeholder="Message"
           onChange={handleStateChange}
           name="message"
           value={mailerState.message}
         />
         <button>Send Message</button>
       </fieldset>
     </form>
   </div>

At this point, your form should look like this:

It is still not going to win any style contest(maybe in the 90’s), but at least it looks the part!

It doesn't work yet so we need to get it to act the part too!
We need to create a function that actually posts to the nodemailerAPI route and attach it to the form:



const submitEmail = async (e) => {
   e.preventDefault();
   console.log({ mailerState });
   const response = await fetch("http://localhost:3001/send", {
     method: "POST",
     headers: {
       "Content-type": "application/json",
     },
     body: JSON.stringify({ mailerState }),
   })
     .then((res) => res.json())
     .then(() => {
       setMailerState({
         email: "",
         name: "",
         message: "",
       });
     });
 };



<form
   style={{
     display: "flex",
     height: "100vh",
     justifyContent: "center",
     alignItems: "center",
   }}
    onSubmit={submitEmail}
 >

Now, our form should be good to go, or is it? If you have tried to submit the form, nothing is going to happen. If you are using Google Chrome and open up your console, you will see the following:

Our mailerState is logging as expected but we are getting a CORs error.

Remember earlier, I mentioned that our backend API route is kind-of ready? We have come to a point where we need to return to our API and fix a couple things.

Nodemailer part 4

Let’s go back to our node server and install our last dependency: CORs. Within the nodemailer API directory, run the following command:



npm i cors

Now, require cors at the top of your server.js file and tell the app to use cors as middleware. The top of your server.js file should look like this:



const express = require("express");
const nodemailer = require("nodemailer");
const app = express();
const cors = require("cors");
require("dotenv").config();

// middleware
app.use(express.json());
app.use(cors());

While we are on the backend, we need to change the mail options to reflect the request from our React side.

Our current mail options looks like this:



let mailOptions = {
   from: "test@gmail.com",
   to: process.env.EMAIL,
   subject: "Nodemailer API",
   text: "Hi from your nodemailer API",
 };

But this does us no good as this is what is sent every time this route is hit, so we need to change it to look like this:



let mailOptions = {
   from: `${req.body.mailerState.email}`,
   to: process.env.EMAIL,
   subject: `Message from: ${req.body.mailerState.email}`,
   text: `${req.body.mailerState.message}`,
 };

Lets also update the transporter.sendMail to send json back to react so we can alert the user of the email being sent:



transporter.sendMail(mailOptions, function (err, data) {
   if (err) {
     res.json({
       status: "fail",
     });
   } else {
     console.log("== Message Sent ==");
     res.json({
       status: "success",
     });
   }
 });

So, our final server.js file should look like this:



const express = require("express");
const nodemailer = require("nodemailer");
const app = express();
const cors = require("cors");
require("dotenv").config();

// middleware
app.use(express.json());
app.use(cors());

let transporter = nodemailer.createTransport({
 service: "gmail",
 auth: {
   type: "OAuth2",
   user: process.env.EMAIL,
   pass: process.env.WORD,
   clientId: process.env.OAUTH_CLIENTID,
   clientSecret: process.env.OAUTH_CLIENT_SECRET,
   refreshToken: process.env.OAUTH_REFRESH_TOKEN,
 },
});
transporter.verify((err, success) => {
 err
   ? console.log(err)
   : console.log(`=== Server is ready to take messages: ${success} ===`);
});

app.post("/send", function (req, res) {
 let mailOptions = {
   from: `${req.body.mailerState.email}`,
   to: process.env.EMAIL,
   subject: `Message from: ${req.body.mailerState.email}`,
   text: `${req.body.mailerState.message}`,
 };

 transporter.sendMail(mailOptions, function (err, data) {
   if (err) {
     res.json({
       status: "fail",
     });
   } else {
     console.log("== Message Sent ==");
     res.json({
       status: "success",
     });
   }
 });
});

const port = 3001;
app.listen(port, () => {
 console.log(`Server is running on port: ${port}`);
});

Our nodemailerAPI part of the guide is complete. Lets tackle the last little bit of our nodemailer-form in React.

Back to our form in React

We just need to update the submitEmail function to wait for the response. It is waiting for the backend to tell it if the status is a fail or if the status is a success and will give an alert accordingly.



const submitEmail = async (e) => {
   e.preventDefault();
   console.log({ mailerState });
   const response = await fetch("http://localhost:3001/send", {
     method: "POST",
     headers: {
       "Content-type": "application/json",
     },
     body: JSON.stringify({ mailerState }),
   })
     .then((res) => res.json())
     .then(async (res) => {
       const resData = await res;
       console.log(resData);
       if (resData.status === "success") {
         alert("Message Sent");
       } else if (resData.status === "fail") {
         alert("Message failed to send");
       }
     })
     .then(() => {
       setMailerState({
         email: "",
         name: "",
         message: "",
       });
     });
 };

So when you try to send an email, you will get the following alert and you will see the status sent from the backend in the console:

By this point, you have successfully implemented Nodemailer with OAuth2, React.js, Node.js, and Express.js. Now you can enjoy adding this to your future projects!

DEV Community: Jared Long

Automate commits with LaunchAgents & JavaScript

Important notes:

Table of Contents

Setup new Node.js project with git

Setup new Github repository

Time to write some JavaScript

Table of Contents

Let's write some JavaScript pt. 2

Table of Contents

Setup LaunchAgent

Table of Contents

How to implement email functionality with Node.js, React.js, Nodemailer, and OAuth2

Nodemailer is a Node.js module that allows users to send messages directly to your email. This article is a guide to help you connect your Node.js server to your GMail account by using OAuth2 in addition to creating a React.js Form to send an email.

Steps:

Setting up the Node.js server

Setting up NodeMailer

Step 1: Lets setup the transporter object:

Configuring OAuth2

NodeMailer Step 2:

Nodemailer Step 3:

Setup React.js

React Setup Step 1:

Import & setup the useState Hook

Nodemailer part 4

Back to our form in React