How to Create a Gatsby Plugin

Creating a Local Gatsby Plugin

Here we are going to show you how to create a local plugin for Gatsby.

• Create a plugin folder in /plugins

  $ mkdir gatsby-example-plugin
  

• CD into the folder

  $ cd gatsby-example-plugin
  

• Initialize Node.js using npm. Plugins need to be a Node project.

  $ npm init --yes
  

• Now you can add the Gatsby specific files like gatsby-node.js, gatsby-browser, etc. in your plugin folder.

  gatsby-example-plugin
    - gatsby-node.js
    - gatsby-browser.js
  

• To use the plugin you need to add it to the gatsby-config.js file.

  // gatsby-config.js
  
  module.exports = {
    siteMetadata: {
      description: `Resources and documention for the Development within the VA.gov project`,
      siteUrl: `https://department-of-veterans-affairs.github.io/veteran-facing-services-tools`,
      title: `VA.gov Developer's Documentations`,
      sidebar: require('./src/sidebar.js')
    },
    pathPrefix: '/veteran-facing-services-tools',
    plugins: [
      `gatsby-plugin-react-helmet`,
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `images`,
          path: `${__dirname}/src/images`,
        },
      },
      `gatsby-transformer-sharp`,
      `gatsby-plugin-sharp`,
      {
        resolve: `gatsby-plugin-manifest`,
        options: {
          name: `vagov-documentation`,
          short_name: `vagov-documentation`,
          start_url: `/`,
        },
      },
      `gatsby-example-plugin`,
    ],
  }
  

• If you would like to debug your build process code, you can run

  $ yarn develop:inspect