Top 10 Time-Saving Gatsby Plugins🔌

Gatsby is already easy to work with — now make it fast

Gatsby is already easy to work with — now make it fast

Gatsby has grown in popularity, and for good reason. It’s unequivocally fun and easy to work with — it makes the life of a React developer much smoother and more productive.

What are Gatsby plugins? In a nutshell, Gatsby plugins are reusable modules of code. From the Gatsby homepage:

Gatsby plugins are Node.js packages that implement Gatsby APIs. For larger, more complex sites, plugins let you modularize your site customizations into site-specific plugins.

Without further ado, here are eight handy Gatsby plugins that you can start using today. Note: This article assumes you’re familiar with the basics of Gatsby.

gatsby-plugin-react-helmet

The gatsby-plugin-react-helmet the plugin provides drop-in support for server rendering data added with React Helmet, a component that lets you control your document head.

With this plugin, attributes you add in the component (title, meta attributes, etc.) will be added to the static HTML pages Gatsby builds.

This is important not just for site viewers, but also for SEO: title and description metadata stored in the document head is a key component used by Google in determining placement in search results.

Installation is easy:

npm install --save gatsby-plugin-react-helmet react-helmet

How to use it

Just add the plugin to the plugins array in your gatsby-config.js

plugins: [`gatsby-plugin-react-helmet`]

If you’re using gatsby-plugin-offline, you might notice that when opening a link in the background, the title doesn’t appear in the tab bar until you switch to that tab. This is an upstream issue with React Helmet; however, it can be worked around bypassing the defer={false} prop into your Helmet component. For example:

<Helmet title="foo bar" defer={false} />

Read the full documentation here.

gatsby-source-filesystem

This plugin is for sourcing data into your Gatsby application from your local filesystem.

The plugin creates File nodes from files. The various “transformer” plugins can transform File nodes into other types of data. For example,gatsby-transformer-json transforms JSON files into JSON data nodes, and gatsby-transformer-remark transforms Markdown files into MarkdownRemark nodes from which you can query an HTML representation of the Markdown.

Installation:

npm install --save gatsby-source-filesystem

How to use it

In your gatsby-config.js module.exports plugins, you can have multiple instances of this plugin to read source nodes from different locations on your file system. The following sets up the Jekyll pattern of having a pages directory for Markdown files and a data directory for .json, .yaml, and .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
      },
    },
  ],
}

Read the full documentation here.

gatsby-plugin-offline

gatsby-plugin-offline give drop-in support for making a Gatsby site work offline, enabling it to be more resistant to bad network connections. It creates a service worker for the site and loads the service worker into the client.

If you’re using this plugin with gatsby-plugin-manifest (recommended) this plugin should be listed after, so the manifest file can be included in the service worker.

Installation:

npm install --save gatsby-plugin-offline

How to use it

// In your gatsby-config.js
plugins: [`gatsby-plugin-offline`]

Read the full documentation here.

gatsby-plugin-manifest

The web-app manifest (part of the PWA specification) enabled by this plugin allows users to add your site to their home screen on most mobile browsers — see here. The manifest provides configuration and icons to the phone.

This plugin provides several features beyond manifest configuration to make your life easier:

• Auto icon generation: generates multiple icon sizes from a single source
• Favicon support
• Legacy icon support (iOS)
• Cache busting
• Localization: Provides unique manifests for path-based localization (Gatsby Example)

Each of these features has extensive configuration available so you are always in control.

Installation:

$ npm install --save gatsby-plugin-manifest

Add plugin and manifest settings — this step is required:

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

If you’re using this plugin together with gatsby-plugin-offline (recommended), this plugin should be listed before the offline plugin, so that it can cache the created manifest.webmanifest.

For more information on configuring your web app, see here. For more information on the plugin, read the full documentation here.

gatsby-plugin-sitemap

gatsby-plugin-sitemap creates a sitemap for your Gatsby site. Useful for search engine crawlers and search results optimization.

Note: This plugin only generates output when running in production mode. If you want to test your sitemap, run: gatsby build && gatsby serve

Installation:

npm install --save gatsby-plugin-sitemap

How to use it

In your gatsby-config.js:

siteMetadata: {
  siteUrl: `https://www.example.com`,
},
plugins: [`gatsby-plugin-sitemap`]

Above is the minimal configuration required for it to work. By default, the generated sitemap will include all of your site’s pages, except the ones you exclude.

Read the full documentation here.

gatsby-plugin-google-analytics

Easily add Google Analytics to your Gatsby site.

Installation:

npm install --save gatsby-plugin-google-analytics

How to use it

In your gatsby-config.js module.exports plugins:

{
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",
        // Defines where to place the tracking script - `true` in the head and `false` in the body
        head: false,
        // Setting this parameter is optional
        anonymize: true,
        // Setting this parameter is also optional
        respectDNT: true,
        // Avoids sending pageview hits from custom paths
        exclude: ["/preview/**", "/do-not-track/me/too/"],
        // Delays sending pageview hits on route update (in milliseconds)
        pageTransitionDelay: 0,
        // Enables Google Optimize using your container Id
        optimizeId: "YOUR_GOOGLE_OPTIMIZE_TRACKING_ID",
        // Enables Google Optimize Experiment ID
        experimentId: "YOUR_GOOGLE_EXPERIMENT_ID",
        // Set Variation ID. 0 for original 1,2,3....
        variationId: "YOUR_GOOGLE_OPTIMIZE_VARIATION_ID",
        // Any additional optional fields
        sampleRate: 5,
        siteSpeedSampleRate: 10,
        cookieDomain: "example.com",
      },
    },
  ],
}

See here for the complete list of optional fields.

Note that this plugin is disabled while running gatsby develop. This way, actions are not tracked while you are still developing your project. Once you run gatsby build the plugin is enabled. Test it with gatsby serve.

Read the full documentation here.

gatsby-plugin-typography

A Gatsby plugin for utilizing the Typography library with minimal configuration. See it in action in the Tutorial (source)

Installation:

npm install --save gatsby-plugin-typography react-typography typography

How to use it

A typical typography.js file utilizing one of its themes might look like this:

import Typography from "typography"
import grandViewTheme from "typography-theme-grand-view"const typography = new Typography(grandViewTheme)// Export helper functions
export const { scale, rhythm, options } = typography
export default typography

You then have to take the exported stylesheets and inline them in your entry file. Since a theme comes with two fonts, you also have to make sure you have the fonts available somehow.

By using gatsby-plugin-typography and specify the path to your typography.js file via the pathToConfigModule option (see below), the inclusion of your typography styles and any relevant fonts is taken care of by a pair of helper methods under the hood, keeping your typography-related config in a single location and your entry file sparse.

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

Read the full documentation here.

gatsby-plugin-webpack-bundle-analyzer

A Gatsby plugin to help analyze your bundle content with the webpack-bundle-analyzer.

Installation with Yarn:

yarn add gatsby-plugin-webpack-bundle-analyzer

Or with npm:

npm install --save gatsby-plugin-webpack-bundle-analyzer

How to use it

// In your gatsby-config.js
plugins: [
  'gatsby-plugin-webpack-bundle-analyzer',
]

Additional options can be found here, including:

• production: Run the analyzer on a production build. Defaults to false.
• disable: Set to true to toggle off the analyzer. Defaults to false.

plugins: [{  resolve: 'gatsby-plugin-webpack-bundle-analyzer',  options: {    analyzerPort: 3000,    production: true, }}]

Read the full documentation here.

Conclusion

Thanks for reading, I hope you found at least one useful plugin for your existing or new Gatsby project. In case I missed your favorite plugin, post it below in the responses. Happy coding!