DEV Community

chair
chair

Posted on • Edited on

2

Common Gatsby Plugins Configuration Cheatsheet

Follow the checklist, run the commands and update the gatsby-config.js file with the corresponding plugin data.

Gatsby Docs

Plugins Checklist

  • gatsby-background-image
yarn add gatsby-background-image

plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]
Enter fullscreen mode Exit fullscreen mode
  • gbimage-bridge
yarn add gbimage-bridge

relies on dependencies from gatsby-background-image, no plugins
Enter fullscreen mode Exit fullscreen mode
yarn add bulma sass gatsby-plugin-sass

plugins: [`gatsby-plugin-sass`],
Enter fullscreen mode Exit fullscreen mode
npm install gatsby-plugin-react-helmet react-helmet

plugins: [`gatsby-plugin-react-helmet`]
Enter fullscreen mode Exit fullscreen mode
npm install gatsby-source-filesystem

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
      },
    },
  ],
Enter fullscreen mode Exit fullscreen mode
npm install gatsby-transformer-sharp gatsby-plugin-sharp

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

Enter fullscreen mode Exit fullscreen mode
npm install sass gatsby-plugin-sass

plugins: [`gatsby-plugin-sass`]
Enter fullscreen mode Exit fullscreen mode
yarn add gatsby-plugin-web-font-loader

plugins: [
    {
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        google: {
          families: ['Droid Sans', 'Droid Serif']
        }
      }
    }
  ]
Enter fullscreen mode Exit fullscreen mode
yarn add gatsby-plugin-gdpr-cookies or npm install --save gatsby-plugin-gdpr-cookies

plugins: [
    {
      resolve: `gatsby-plugin-gdpr-cookies`,
      options: {
        googleAnalytics: {
          trackingId: 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-google-analytics', // default
          anonymize: true, // default
          allowAdFeatures: false // default
        },
        googleTagManager: {
          trackingId: 'YOUR_GOOGLE_TAG_MANAGER_TRACKING_ID', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-google-tagmanager', // default
          dataLayerName: 'dataLayer', // default
        },
        facebookPixel: {
          pixelId: 'YOUR_FACEBOOK_PIXEL_ID', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-facebook-pixel', // default
        },
        tikTokPixel: {
          pixelId: 'YOUR_TIKTOK_PIXEL_ID', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-tiktok-pixel', // default
        },
        hotjar: {
          hjid: 'YOUR_HOTJAR_ID',
          hjsv: 'YOUR_HOTJAR_SNIPPET_VERSION',
          cookieName: 'gatsby-gdpr-hotjar', // default
        },
        // defines the environments where the tracking should be available  - default is ["production"]
        environments: ['production', 'development']
      },
    },
  ],

Enter fullscreen mode Exit fullscreen mode
npm install gatsby-plugin-manifest

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

Enter fullscreen mode Exit fullscreen mode
yarn add gatsby-plugin-alias-imports


plugins: [
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {},
        extensions: []
      }
    }
  ]
Enter fullscreen mode Exit fullscreen mode

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay