DEV Community: Brian Swank

Validate Data on a Node Server with Joi

Brian Swank — Thu, 21 May 2020 14:48:48 +0000

This was originally published on my blog.

Validating user input is an important part of building a secure, high-quality application. Let's take a look at why it's so important and how we can do it using Joi.

Input Validation 101

As a general rule, you should validate early and often to ensure that you're providing the proper feedback to your users around how to input data.

Here's an example of a validation strategy for a web application:

Use proper input types (e.g. type="text" for text input, type="url" for a URL, etc.).
Validate input on blur (e.g. use a Regex or similar to ensure the text matches a given pattern).
Validate input on submit (e.g. check for proper format and content prior to sending data to a server).
Validate request body to ensure everything that was delivered to the server is properly formatted & allowed.
Use database schemas to ensure you're not adding anything to your data store that shouldn't be there.

In this tutorial, we'll focus on number 4 – validating as soon as data hits our server.

Start a Project

We need a Node Server to test with, so we'll start by getting that set up using Hapi. Feel free to use your own app if you have one!

I chose Hapi because Joi is a package from the Hapi team, but you can use Joi with any Node framework, including inside serverless functions with no framework, which is where I typically use it!

Create a new directory with mkdir joi-input-validation. Then, run the following:

cd joi-input-validation
npm init -y
npm i @hapi/hapi
touch index.js

Add the following to index.js:

// index.js

const Hapi = require('@hapi/hapi')

const init = async () => {
  const server = Hapi.server({
    port: 4321,
    host: 'localhost'
  })

  server.route({
    method: 'GET',
    path: '/',
    handler: () => {
      return 'it works'
    }
  })

  // Our POST route for testing
  server.route({
    method: 'POST',
    path: '/',
    handler: async ({ payload }) => {
      return payload
    }
  })

  await server.start()
  console.info('Node Server running at http://localhost:4321')
}

init()

Run your Node server with node index.js. If you visit http://localhost:4321/ you should see "it works" in the browser.

Make a POST Request

In this example, we'll simulate a successful submission of a username and password by sending it right back to the client as the response.

Let's make a POST request to our server to test it out using this command: curl -d '{"username":"bs","password":"p@ssword"}' -H "Content-Type: application/json" -X POST http://localhost:4321/

This request should return exactly what you send it: {"username":"bs","password":"p@ssword"}.

Establish Validation Rules

Now that we're set up and submitting data to our server, we can establish some rules for what that data should look like.

We're asking for a username and a password, so here are some example rules that we might want to enforce:

Usernames should be at least 4 characters
Usernames should be no more than 20 characters
Passwords should be at least 12 characters

With those rules as our guide, let's get validating! Just remember, whenever we make a change to our server, we'll need to kill it and start it again using node index.js.

Implement Validation

Let's install Joi, which is our validation library: npm i @hapi/joi.

Don't forget, you can use this package and the following implementation with any (or no) Node framework.

Next, let's add Joi to our project and define a schema to validate against. Add the following to the beginning of index.js:

// index.js

const Hapi = require('@hapi/hapi')
const Joi = require('@hapi/joi')

const schema = Joi.object({
  // This object is what our object will need to look like
  username: Joi.string()
    .min(4)
    .max(20)
    .required(),
  password: Joi.string()
    .min(12)
    .required()
})

// existing code...

Now that we have our schema designed and we're enforcing our rules, we need to edit our POST route and use that schema to test our data:

// ...

// Our POST route for testing
server.route({
  method: 'POST',
  path: '/',
  handler: async ({ payload }) => {
    try {
      const input = await schema.validateAsync(payload, { abortEarly: false })
      // Data is valid, let's move on!
      return input
    } catch (error) {
      // Data is invalid, let's tell our user the bad news...
      return error.details
    }
  }
})

// ...

In the code above, we modified our handler to include a try/catch block in order to either return our valid data or return validation errors. We want to return all validation errors to the client and not just the first one, so we also added an options object to our validateAsync method with abortEarly set to false.

Try with invalid input

If we repeat our curl request, we'll see that we now get an array of errors back. With that information, the client can handle letting the user know exactly what needs to be changed.

Try again with valid input

Now, let's test with some valid input: curl -d '{"username":"bswank","password":"mY_Secur3 p@22wrd"}' -H "Content-Type: application/json" -X POST http://localhost:4321/

That's it! You're validating user input with a schema and can extend this concept to accept more complicated and realistic data.

Implement Fuzzy Text Search with Mongoose

Brian Swank — Fri, 15 May 2020 19:03:17 +0000

There are a bunch of great services that make search really simple, but adding simple fuzzy text search to a Mongoose model is a quick & easy win for when those services are overkill.

Prerequisites

You'll need a Node project up and running with Mongoose installed and at least one Mongoose model.

A Little Bit About Fuzzy Search

Fuzzy search is a standard in search implementations. Users expect it and we should deliver as advocates of our users. A simple text search needs to allow for a small typo, a missing space, and other errors.

Text search in MongoDB is fairly straight-forward. The $regex operator allows for partial-text search and the $text operator makes a full-text search possible, but enabling fuzzy search is a little more complicated.

Indexing & n-grams

In order to match something like "uzz" to "fuzzy" we need to break "fuzzy" up into smaller pieces and index it. mongoose-fuzzy-searching is a simple package that helps us index text fields on our documents with n-grams, allowing us to match smaller text samples to potential matches in our collections – aka fuzzy search.

Implementation

Let's get started by installing the necessary package: npm i mongoose-fuzzy-searching.

With our package installed, we can add it as a plugin to our schema:

import mongoose, { Schema } from 'mongoose'
import mongooseFuzzySearching from 'mongoose-fuzzy-searching'

const user = new Schema({
  firstName: String
})

user.plugin(mongooseFuzzySearching, { fields: ['firstName'] })

export default mongoose.model('User', user)

Now that we have the plugin added, any new documents added to our User collection will have the appropriate text index! In order to use our newly-implemented plugin, all we need to do is call the fuzzySearch method on our collection instead of find:

import User from '../models/User'

const users = await User.fuzzySearch('query')

Given an empty query, our fuzzySearch method will act just like a find call, returning all relavent results.

Deploy a Vue App to Cloudflare Workers

Brian Swank — Wed, 13 May 2020 15:07:01 +0000

Cloudflare Workers is probably the easiest way to deploy super fast serverless code to edge locations around the world. In this post, we'll explore what it takes to deploy a Vue application with Workers (hint: it doesn't take much).

Prerequisites

You'll need a Cloudflare account with Cloudflare Workers enabled, as well as the Workers Unlimited Plan.

I was able to test with the free plan so you probably can, too, but I recommend upgrading because it's a great deal.

Create a Vue App

To get started, let's create a Vue app via the CLI with npx @vue/cli create vue-on-workers && cd vue-on-workers. This will create our app, install our dependencies, and put us right where we need to be.

Install the Wrangler CLI

Wrangler is a sweet CLI that Cloudflare cooked up for us. Install it with npm i -g @cloudflare/wrangler.

For this next part, you'll need an API Token. TIP: Use the "Edit Cloudflare Workers" template.

Run wrangler config to get set up using the CLI.

Configure Your Project

With our Vue app created and Wrangler all config'd up, we can now turn our Vue project into a Wrangler project by running wrangler init --site.

You may notice your project now has a wrangler.toml file as well as an additional directory, called workers-site.

Now, all that's left to do is add a couple things to the config file. Add your account_id (can be found in the bottom-right of your Cloudflare dashboard) and ensure bucket is set to the dist directory:

name = "vue-on-workers"
type = "webpack"
account_id = "add_your_account_id" # HERE
workers_dev = true
route = ""
zone_id = ""

[site]
    bucket = "dist" # AND HERE
    entry-point = "workers-site"

Deploy to Workers

Once you've set those two items in your wrangler.toml file, run npm run build && wrangler publish to build and deploy!

That's it!

🎉🎉🎉

Additional Reading & Considerations

There's additional work that needs to be done in order to ensure that Vue Router can handle routing appropriately, which you can read more about in this great Stack Overflow answer.
Workers is a great (possibly better) solution for hosting a statically-generated site, like the ones you get from Gridsome, Gatsby, or Hugo.
Read more about hosting a site on Cloudflare Workers.

Need some help? Want to chat? Feel free to reach out.

Publish a Package to NPM

Brian Swank — Mon, 11 May 2020 14:14:23 +0000

Publishing a package to NPM is a quick and efficient way to re-use code across multiple projects.

Prerequisites

Before we get going, make sure you have an NPM account and have NPM installed and updated by running npm i -g npm@latest. You'll also need Node installed.

Create a Project

Let's get a project up and running. We'll build a small utility to catch and help us fix all our errors.

Create an empty directory: mkdir super-error-handler && cd super-error-handler
Generate a package.json: npm init -y This will produce some fine defaults.
Create your utility: touch index.js

// super-error-handler/index.js

module.exports = function handleError(error) {
  const query = encodeURI(error.message)
  console.error(`https://stackoverflow.com/search?q=${query}`)
}

Create a Test Environment

Now that we have some code, let's see if it works!

Create another empty directory outside of the original: mkdir test-env && cd test-env
Generate another package.json: npm init -y
Create a symbolic link to your utility so you can require it like other installed modules: npm link /path/to/super-error-handler
Create a file to test with: touch index.js

// test-env/index.js

const handleError = require('super-error-handler')

function testErrorHandler() {
  try {
    throw new Error('something bad happened')
  } catch (error) {
    handleError(error)
  }
}

testErrorHandler()

Now that we have some test code written with our error handler, let's give it a try: run node index.js.

Publish to NPM

Almost there! Since every NPM package needs a unique name, you'll need to namespace your package by setting the name field in your package.json to @your_npm_username/super-error-handler.

Finally, from the super-error-handler directory, run npm adduser to authenticate to NPM and then npm publish.

That's it! You've published your first NPM package! Head to npmjs.org
to search for it and check it out.

Additional Tips

Now that your code is available on NPM, here are a few things you can and should do:

Check out the NPM docs on package.json fields and fill them in appropriately.
Create a GitHub repo for your project.
Add an .npmignore file to keep some of your repo from being downloaded by users of your module. Here's a great Stack Overflow question detailing how you might use one.
Use np to level up your NPM game. It helps to take care of a bunch of additional publishing steps, including creating a release on GitHub. Read the docs on NPM.

Need some help or want to share your newly-uploaded NPM package? Feel free to reach out.

Add Serverless Functions to Any Static Site

Brian Swank — Fri, 08 May 2020 02:34:03 +0000

Adding just a bit of backend functionality to your Netlify-hosted static site is a perfect use-case for serverless functions. Let's get up and running!

Why?

Whether you want to keep a third-party or proprietary API key or secret from being shipped to the browser, or you just need a little server-side functionality, a serverless function can bridge the gap.

Prepare Your Project

First, we need to make sure our project is hosted on Netlify.

Let's connect our project to a Netlify and get set up using Netlify Dev, which will allow us to test our functions locally:

Create a Netlify account if you don't have one already.
Ensure you have the Netlify CLI installed locally. You can do this by running npm i -g netlify-cli. If you run into a permissions issue, check out the NPM docs on the issue.
Authenticate with Netlify by running netlify login.
Initialize your Netlify project by running netlify init. This will create a site on Netlify and associate your project with that new site.

Configure a Functions Directory

Now that we're set up with a Netlify project, we need to tell Netlify where to find our functions.

Create a new directory at the root of your project. I typically name this directory something like, /api.
Create a config file to tell Netlify where to look for your functions:

# netlify.toml

[dev]
    functions: '/api'

Create a Function

Now that Netlify knows where to look for our functions, we can write our first one!

Create a new file in the /api directory:

// testy.js

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: 'yup, it works'
    })
  }
}

Test Locally Using Netlify Dev

With our function created, let's make sure it works!

Start your dev server by running netlify dev. You may need to choose or configure a start command.
Visit http://localhost:8888/.netlify/functions/testy

Deploy

If your local function is working correctly, go ahead and deploy it to Netlify with netlify deploy!

Thanks for reading! Need some help? Feel free to reach out.

Introducing My New Website & the Tech Behind It

Brian Swank — Sun, 03 May 2020 23:15:39 +0000

[Update – November 30th, 2021]: Just launched a newer version of my personal site built with next.js, but feel free to check out this post, which is still relevant, as well as the GitHub repo mentioned at the end.

Hey, thanks for reading my very first DEV post in which I write about why and how I finally coded up my own site. This was originally published on my blog, which is on my shiny new website.

"Where can I find you online?"

If you're a web professional, or aspire to be one, you'll get used to answering this question. Whether it's a job application, an email with a potential client, or your Twitter bio – everyone wants to see your online space and check out your portfolio.

My LinkedIn profile served me well to help present potential employers with some basic facts about me and my experience, but as soon as I got hired at my current gig, I felt like I was finally at a point where I could ditch it. With some extra time on my hands and a renewed interest in starting to create content to help mentor aspiring developers, I decided it was time to whip something up!

Content is Key

I'm not so great at producing content. I tend to agonize over my creative process and then chicken out right before it's time to publish. I re-read and over-think and convince myself that my contribution is redundant or unnecessary.

I have to keep reminding myself that I've been the grateful recipient of a TON of redundant, imperfect content. Those courses, posts, books, and videos happened to be in the right place at the right time and in the right format presented just the right way for me to consume and understand. I am who I am today because of them, and I hope that what I produce can help someone else in the same way.

Practically speaking, I decided to keep it simple here. I love reading people's bios and all about the gear they use, so I followed suit and have an introduction and a /uses page.

Overcoming My Design Shortcomings

I typically come up with one or two patterns I like, but then I lack the depth of experience to extrapolate that into a more cohesive and complex design. The end product usually ends up consisting of the same pattern over and over again (which you may notice is the way I built this site).

One way I tried to overcome my lack of design ability was to follow some simple design rules:

Leave plenty of space (big margins and lots of padding)
Use a font that's relatively easy to read at both large and small sizes
Ensure reasonably-high contrast ratios
Generate a color palette and use that palette throughout (I used Coolors.co)
Follow existing design patterns for layout (steal)
Use CSS Grid and percentage-based-widths throughout to ensure that the site is naturally responsive
Use CSS custom properties to make viewport-size-related changes super simple

Choosing a Tech Stack

This was pretty simple. I've worked extensively with Vue, so I decided to take a swing at this site with Gridsome, which is the Vue counterpart to React's Gatsby.

The experience has been great. I am having some issues with Babel transpilation and polyfilling, but the Gridsome community is working on some things related to this.

Content Management

My page and blog post content is generated from markdown files parsed by @gridsome/vue-remark, which gives me the ability to import and use Vue components, other markdown files, or any other data, as well as query the GraphQL layer directly.

Hosting

It's always a joy to deploy anything to Netlify and this site is no exception. I'm currently using Netlify's DNS management and Analytics products along with hosting for this site.

Functions

The best way to add just a bit of backend functionality to a static site is a good ol' fashion serverless function. Upon launch, I didn't need any backend functionality, but I do have some plans for a couple I'll add in the future. More to come on this.

Source

In case you'd like to use this as a boilerplate, submit a PR to fix all my terrible choices, or check out the source for any other reason, you can find it on GitHub.

Thanks for reading! Hope this was helpful!

DEV Community: Brian Swank

Validate Data on a Node Server with Joi

Input Validation 101

Start a Project

Make a POST Request

Establish Validation Rules

Implement Validation

Try with invalid input

Try again with valid input

Further Reading

Implement Fuzzy Text Search with Mongoose

Prerequisites

A Little Bit About Fuzzy Search

Indexing & n-grams

Implementation

Further Reading

Deploy a Vue App to Cloudflare Workers

Prerequisites

Create a Vue App

Install the Wrangler CLI

Configure Your Project

Deploy to Workers

Additional Reading & Considerations

Publish a Package to NPM

Prerequisites

Create a Project

Create a Test Environment

Publish to NPM

Additional Tips

Add Serverless Functions to Any Static Site

Why?

Prepare Your Project

Configure a Functions Directory

Create a Function

Test Locally Using Netlify Dev

Deploy

Introducing My New Website & the Tech Behind It

"Where can I find you online?"

Content is Key

Overcoming My Design Shortcomings

Choosing a Tech Stack

Content Management

Hosting

Functions

Source