Forem: Olen Daelhousen

Using PATCH on the front end with Fastify

Olen Daelhousen — Mon, 30 Jan 2023 23:36:10 +0000

Posting this as a reminder to my future self and with the hope it will save some other folks from banging their heads on their desk for two hours. I like Fastify a lot and was using version 4.x when I had issues with a PATCH endpoint when using the Fetch API on the front end. This was very confusing, since the endpoint worked great when testing with Postman. Here are the things I learned:

The value for "method" needs to be all uppercase, "patch" does not work; "PATCH" does
The "content-type" header is required, without it, fetch() fails

Here's an example of the code that worked:

const response = await fetch(`${exampleDomain}/api/v1/example`, {
  method: 'PATCH',
  headers: {
    Authorization: `Bearer ${token}`,
    'content-type': 'application/json; charset=utf-8'
    },
  body: JSON.stringify(data)
})

fastify-mongodb the ESM way

Olen Daelhousen — Wed, 29 Dec 2021 04:29:42 +0000

I just started using ECMAScript (ES) Modules in a new side project I am working on. The stack includes Fastify and MongoDB, so I am using the fastify-mogodb plugin for the database connection. Unfortunately, the documentation for fastify-mongodb did not include an example with ES Modules, so I had to figure it out. Here's how to use fastify-mongodb using ES Modules and import:

server.js

import fastifyMongodb from 'fastify-mongodb';

app.register(fastifyMongodb, {
  forceClose: true,
  useUnifiedTopology: true,
});

As compared to the old-fashioned way using CommonJS:

server.js

fastify.register(require('fastify-mongodb'), {
  forceClose: true,
  useUnifiedTopology: true,
});

Hopefully this will be of use to others, there was not much in the way of solutions when I searched.

Setup to Test ES Modules with Jest 27.4.5 and Node 14.16.0 on Windows

Olen Daelhousen — Mon, 20 Dec 2021 05:00:01 +0000

For a side project I'm working on, I decided to try out ECMAScript (ES) Modules, because the latest versions of Node now support them and the latest browsers do too. Sadly, I quickly discovered that my favorite testing framework, Jest, requires a bit of configuration to work with them and the support is experimental. As such, this post is mostly a reminder to my future self in case I need to do this again, but possibly others may find it useful.

I made the following changes and/or additions to package.json and jest.config.mjs:

package.json

  "scripts": {
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
  },

jest.config.mjs

  testEnvironment: "jest-environment-node",
  transform: {},

Those were the only changes I needed to make to successfully test ES Modules with Jest 27, Node 14, and Windows 10.

How to Access dotenv Variables Using fastify-env Plugin

Olen Daelhousen — Tue, 27 Jul 2021 01:07:31 +0000

As a small project to upgrade my web developer portfolio, I decided to take a JavaScript trivia game I coded for a class project and improve it from a simple front end only application to a full stack web application. Initially I was going to use Mongo, Express, Vue, and Node as the stack. However, after poking around the web and reading up on Express alternatives, I thought it would be fun to try out a new framework that supported async/await and decided on fastify.

The Problem: How do I Access my .env File in Fastify?

Coming from an Express background, I was used to using the dotenv module to read configuration variables such as the username and password for the database, secrets for jsonwebtokens, and others from my .env file. Getting onboard with fastify's plugin ecosystem, I installed fastify-env and attempted to use it to load the contents of my .env file. An initial challenge I faced was the documentation for accessing .env variables using fastify-env seemed a bit sparse and I was unable to find any good tutorials.

After trying several different approaches with fastify-env and failing to read the variables from .env, I gave up and installed dotenv. This approach worked and I was able to successfully connect fastify with the Mongo database. However, one huge drawback with using dotenv with fastify is that the .env variables are not available on the fastify instance, so accessing them from modules buried in the directory structure rapidly becomes a headache.

I will be using jsonwebtokens in my application to authenticate users on the backend. To validate them, I need to store a secret on the server and access it from different modules that include the validation logic. While the dotenv solution worked well enough for the database credentials, it was too unwieldy for accessing the secret. So, I gave fastify-env a second try.

The Solution, or the Key Points I Missed

Using fastify for the first time, I was learning several new concepts at once while getting the back end up and running and missed several critical items in my initial attempts to use fastify-env. Hopefully the following summary of my experience will help others new to fastify-env save some time and frustration.

.env Variables Need to be Included in the Schema

The first thing I missed in my first attempt at using fastify-env was that the variables in the .env file need to be included in the schema used by fastify-env, otherwise they will not be accessible. The following code snippets give an example of how this works:

.env

USERNAME=databaseUsername
PASSWORD=doubleSecretDatabasePassword

server.js

const schema = {
  type: 'object',
  required: ['PASSWORD', 'USERNAME'],
  properties: {
    PASSWORD: {
      type: 'string'
    },
    USERNAME: {
      type: 'string'
    }
  }
}

Set the "data" key to "process.env"

The second key point I missed was that the data key in the options object needs to be set to "process.env" to read the .env file. Simply setting the dotenv key to true is not enough. The following code snippet shows how to correctly set both keys.

server.js

const options = {
  dotenv: true,
  data: process.env
}

How I Thought ready() Worked Versus How it Really Works

The third and final thing I didn't realize when initially attempting to use fastify-env was that awaiting fastify.ready() before fastify.listen() does not load all the plugins in order. However awaiting fastify.after() on the line after fastify.register() will ensure the .env variables are defined following fastify.after(), as shown in the following code snippet.

server.js

fastify.register(fastifyEnv, options)
await fastify.after()

// Now the .env variables are defined

Putting it all Together

The following code snippet shows my entire solution using fastify-env to set up a connection url to authenticate to a MongoDB database using username and password values set in a .env file.

server.js

// Fastify
const fastify = require('fastify')({
  logger: true
})

const fastifyEnv = require('fastify-env')
const schema = {
  type: 'object',
  required: ['DB_PASSWORD', 'DB_USERNAME'],
  properties: {
    DB_PASSWORD: {
      type: 'string'
    },
    DB_USERNAME: {
      type: 'string'
    }
  }
}

const options = {
  confKey: 'config',
  schema,
  dotenv: true,
  data: process.env
}

const initialize = async () => {
  fastify.register(fastifyEnv, options)
  await fastify.after()

  // Database
  // Connection URL
  const username = encodeURIComponent(fastify.config.DB_USERNAME)
  const password = encodeURIComponent(fastify.config.DB_PASSWORD)
  const dbName = 'databaseName'

  const url = `mongodb://${username}:${password}@localhost:27017/${dbName}`

  fastify.register(require('./database-connector'), {
    url,
    useUnifiedTopology: true
  })
}

initialize()

// Fire up the server
(async () => {
  try {
    await fastify.ready()
    await fastify.listen(process.env.PORT)
  } catch (error) {
    fastify.log.error(error)
    process.exit(1)
  }
})()

I hope other coders find this useful. Also, if any fastify-env experts have suggestions for improving this approach, please feel free to leave them in the comments. Thanks for reading and happy coding!

Please note: "database-connection" is a fastify plugin I wrote to use the official MongoDB driver version 4.x because fastify-mongodb was using the 3.x driver under the hood at that time. Since then, fastify-mongodb has been updated to use the 4.x driver, so probably use that in your project.

Destructuring When Using Array.prototype.map() on an Array of Objects in React

Olen Daelhousen — Fri, 25 Sep 2020 04:39:13 +0000

In the web application I am building, I often loop through arrays of objects that are returned from an application programming interface (API) and display the data on the front-end using React. The following is an example JSON response from the API:

[
  {
    "id": 42,
    "addressee": {
      "id": 98,
      "firstName": "James",
      "lastName": "Deacon",
      "photoLink": "images/IMG_3598.JPG",
      "city": "Atlanta",
      "state": "GA",
      "country": "United States",
      "createdAt": "2019-12-23T00:33:11.000Z",
    },
  },
  {
  "id": 43,
  "addressee": {
    "id": 99,
    "firstName": "Billy",
    "lastName": "Gato",
    "photoLink": "/images/IMG_9923.JPG",
    "city": "Chattanooga",
    "state": "TN",
    "country": "United States",
    "createdAt": "2019-10-13T04:22:42.000Z",
    }
  }
]

I use React to map the above data retrieved from the API and pass it to a Card component as props, as shown below.

return(
  <div className="list">
    {list.map(element => (
      <div className="card" key={element.id}>
        <Card
          addresseeId={element.addressee.id}
          firstName={element.addressee.firstName}
          lastName={element.addressee.lastName}
          photoLink={element.addressee.photoLink}
          city={element.addressee.city}
          stateCode={element.addressee.stateCode}
          createdAt={new Intl.DateTimeFormat("en-US", {
            year: "numeric",
            month: "long"
          }).format(new Date(element.addressee.createdAt))}
        />
      </div>
    ))}
  </div>
)

Repeatedly copy and pasting "element.addressee" got to be tiresome, so I started thinking about how to use ES6's destructuring to make things less repetitive. The first thing I tried was the traditional const { x, y } = element pattern, but ESLint complained about "const". So I did some searching, but did not find much about how to destructure the current element in Array.prototype.map() in JSX.

I almost gave up, but finally resorted to reading the documentation and stumbled on assignment without declaration, where a variable can be assigned its value separately from its declaration. With this syntax ({ x, y } = element) is valid, just like const { x, y } = element. In the case of Array.prototype.map(), array.map(({ x, y }) => { //callback function }); will destructure element and assign x and y. The below code snippet shows how I used this to refactor the card component and skip typing "element.addressee" several times.

return(
  <div className="list">
    {matchesFilteredByStatus.map(
      ({ id, addressee: {
        id: addresseeId,
        firstName,
        lastName,
        photoLink,
        city,
        stateCode,
        createdAt}, }) => (
      <div className="card" key={id}>
        <Card
          addresseeId={addresseeId}
          firstName={firstName}
          lastName={lastName.substring(0,1) + "."}
          photoLink={photoLink}
          city={city}
          stateCode={stateCode}
          createdAt={new Intl.DateTimeFormat("en-US", {
            year: "numeric",
            month: "long"
          }).format(new Date(createdAt))}
        />
      </div>
    ))}
  </div>
)

Access Semantic UI React Dropdown Input Values Using Functional Components

Olen Daelhousen — Wed, 08 Apr 2020 02:35:46 +0000

I'm using Semantic UI React as the front-end framework for a web application I'm building. The application has a horizontal navigation bar that links to the main pages. Several of the main pages also have sub-pages, so I added a Dropdown component to allow direct access to them. However, I was unable to figure out from the Semantic UI React documentation how to handle the event when an item in the Dropdown is selected.

After some searching, I came across Saphie Abayomi's article: Accessing input Values from a Semantic UI React Dropdown, which was extremely helpful in pointing me in the right direction. However, she was using class components and my application uses functional components and hooks. So with a little refactoring, I came up with the following:

First, I defined the items to be included in the Dropdown as an array of objects:

const items = [
  { key: "matches", text: "All Matches", value: "/matches"},
  { key: "preferences", text: "Preferences", value: "/matches/preferences" }
]

The key can be anything unique, it's there so React can keep track of the elements and avoid needless re-renders. The text is what is rendered in the Dropdown and shown to the user. In this case, the value is the route to the view that should be rendered when the user clicks the item in the dropdown.

The next step is to render the dropdown:

  return(
    <Dropdown
      item
      text="Matches"
      options={items}
      onChange={handleDropdown}
    />
  );

The key is setting onChange equal to the function that will be called when an item in the Dropdown is selected by the user. The handleDropdown function has two parameters, event and data. The data parameter returns the value from whatever was selected. And without further ado, the handleDropdown function:

  const handleDropdown = (event, data) => {
    setRedirectURL(data.value);
    setDoRedirect(true);
  };

For the purposes of my web application, redirectURL and doRedirect are both stored in React's Context, so handleDropdown is setting redirectURL to whatever the value of the item selected by the user was and then setting doRedirect to true to trigger the redirect.

The event parameter isn't particularly useful in my case, so I never read the value. ESLint complains about this, but since I don't have a reason to read it, I don't. Any thoughts on how to solve this minor issue would be appreciated.

Weak Validate an Email Address Using Node to Check if an MX Record Exists

Olen Daelhousen — Mon, 17 Feb 2020 06:55:18 +0000

For the web application I'm working on, having a valid email address for each user is important because the application allows users to contact each other, but retain some privacy, by using double-blind emails. To ensure the user has submitted a working email address, the application sends a verification code to the address entered at sign-up. However, to avoid unnecessary bounces I wanted a way to filter out obviously fake addresses that still passed validation using regular expressions.

I learned that Node includes a DNS module that can be used to look up a host and return an MX record, if it exists. Therefore, if the DNS module fails to return an MX record, the email address entered by the user is not valid.

The code below uses the dnsPromises API to check if an MX record exists for an arbitrary email address. To use, just pass the mxExists function an email address and it will return a promise. If the domain doesn't exist or no MX record is found, the promise will reject or resolve as false. If an MX record is found, the promise will resolve as true. Individual mailboxes are not validated, so bounces are still possible. The intent of the weak validation is to catch typos and obvious fake addresses to reduce the bounce rate.

const dnsPromises = require("dns").promises;

const mxExists = email => {
  return new Promise ((res, rej) => {
    const hostname = email.split("@")[1];

    try {
      dnsPromises.resolveMx(hostname).then(addresses => {
        if (addresses && addresses.length > 0) {
          addresses[0].exchange ? res(true) : res(false);
        }
      })
      .catch(err => {
        // TODO: Deal with the error
        console.log("mx-check.js - resolveMx ERROR:\n" + err);
        res(false);        
      });
    } catch (err) {
      // TODO: Deal with the error
      console.log("mx-check.js ERROR:\n" + err);
      rej(false);
    }
  });
}

module.exports = {
  mxExists
}

Using Nodemailer with Mailgun the Hard Way

Olen Daelhousen — Fri, 14 Feb 2020 07:46:49 +0000

I'm coding up an application powered by Node.js that will send several transactional emails to users including email account verification at sign up and receipts when they (hopefully) subscribe. As this is my first foray into high volume email, I do not want to commit to an email service right now. So, to make things easier if I decide to change email providers, instead of using Nodemailer's built in well-known services, I set up a custom transporter, shown in the below code snippet. Note the use of .env variables, in keeping with the Twelve Factor App Methodology.

  const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: process.env.SMTP_PORT,
    secure: process.env.SMTP_SECURE,
    auth: {
      user: process.env.SMTP_USER,
      pass: process.env.SMPT_PASS
    },
    tls: {
      rejectUnauthorized: false
    }
  });

And now for the .env settings:

SMTP_HOST=smtp.mailgun.org
SMTP_PORT=465
SMTP_SECURE=true
SMTP_USER=postmaster@yourdomain.com
SMPT_PASS=yourSuperSecretMailgunPassword

I hope this helps someone else out there using Mailgun with Node and Nodemailer - there didn't seem to be very many examples incorporating Node in the official docs.