Top 5 Gatsby Plugins

Photo by Emile Perron on Unsplash

Gatsby is a React-based free and open source framework that equips developers with the tools to generate static sites that are optimized for the latest web standards. With a large community, plethora of plugins, and tons of templates, Gatsby is a great choice for any developer looking to create a static website.

Gatsby’s slogan, “Fast in any way that matters”, holds true throughout the entire development process. With Gatsby plugins, it’s incredibly easy to convert your app into a PWA, optimize it for offline usage, enable slow image loading, and almost any feature imaginable with just a few lines of code.

Gatsby isn’t just limited to using Gatsby plugins, React components all integrate extremely well with Gatsby!

Lets take a look at 10 great plugins that Gatsby developers use to speed up their development workflow!

Gatsby Source Filesystem

1. gatsby-source-filesystem

gatsby-source-filesystem is by far the most used plugin for Gatsby. At its core, it can be used to ingest any formatted file format, such as JSON, markdown, YAML, and more either locally or over a network using a URL.

This plugin creates multiples nodes for all the accessed files. However, to use these files (such as Markdown or JSON), you’ll have to use transformer plugins, like gatsby-transformer-json or gatsby-transformer-remark.

To install run:

npm install --save gatsby-source-filesystem

To use it, update your gatsby-config.js:

// From the documentation...
module.exports = {
  plugins: [
    // You can have multiple instances of this plugin
    // to read source nodes from different locations on your
    // filesystem.
    //
    // The following sets up the Jekyll pattern of having a
    // "pages" directory for Markdown files and a "data" directory
    // for `.json`, `.yaml`, `.csv`.
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
        ignore: [`**/\.*`], // ignore files starting with a dot
      },
    },
  ],
}

This plugin exports three helper functions:

createFilePath

This function is used to create URLs from file paths on the system.

createRemoteFileNode

This allows you to download remote files to add to the GraphQL schema.

createFileNodeFromBuffer

This function caches data not in the local system by creating a buffer.

Gatsby Image

2. gatsby-image

gatsby-image is a plugin for speedy, optimized image use for Gatsby sites. This plugin works great with Gatsby GraphQL Queries and it combines native image processing techniques of Gatsby with various image optimization techniques on build/

It also uses gatsby-plugin-sharp to enhance its image transformations. Here are some features of the gatsby-image plugin.

1. Optimizes the image size based on the size and resolution of each device
2. Holds image position while images are loading
3. Initial blurred image to improve UX/UI
4. Automatically lazy loads image

Install it with npm install --save gatsby-transformer-sharp gatsby-plugin-sharp.

Update your plugins config as such:

plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]

Finally, setup your gatsby-config:

const path = require(`path`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

Using it in JS is pretty simple, here’s an example:

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

Gatsby Plugin Manifest

3. gatsby-plugin-manifest

With this awesome plugin, you can easily make your website a Progressive Web App (PWA). This means you can allow users to add your site to their home screen on most mobile browsers

This means the plugin does a few key things:

1) It auto generates home screen icons from a single source

2) Provide favicon support

3) Legacy icon support

4) Cache busting, to allow users to see the updated data.

5) Localization, it provides ways to create websites with local languages.

Install it:

npm install --save gatsby-plugin-manifest

Update your config file:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
      },
    },
  ],
}

Gatsby Plugin

4. gatsby-plugin-typescript

This popular library enables Typescript support for your Gatsby app. This means you can use .ts and .tsx files in your application!

This plugin is automatically included in Gatsby, so unless you have to configure its options, you shouldn’t have to install it.

These are some of the options you can use in your config:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typescript`,
      options: {
        isTSX: true, // defaults to false
        jsxPragma: `jsx`, // defaults to "React"
        allExtensions: true, // defaults to false
      },
    },
  ],
}

You can read about these options in the documentation for the Babel compiler it uses.

Gatsby Plugin Offline

5. gatsby-plugin-offline

Making a website functional even in offline can be difficult, but this plugin makes it easy by providing drop in support for offline and low internet situations by creating a service worker.

It’s incredibly easy to use, lets take a look at an example:

plugins: [
{
  resolve: `gatsby-plugin-offline`,
  options: {
    precachePages: [`/about-us/`, `/projects/*`],
  },
},
]

This caches the /about-us and /projects/* pages to save on the users local machine for offline use.

Conclusion

With these awesome plugins, you can very easily add functionality to your Gatsby site. Gatsby’s drop in support for these often complex features makes it a super powerful static site generator for any website.

Keep in Touch

There’s a lot of content out there, I appreciate you reading mine. I’m a young entrepreneur and I write about software development and my experience running companies. You can signup for my newsletter here

Feel free to reach out and connect with me on Linkedin or Twitter.