With Pulp Blog

The 10 Most Useful GatsbyJS Plguins

Cedric Jackson January 05, 2021

GatsbyJS (Gatsby) is an open-source framework and Static Site Generator. It is React-based and free. Developers can use Gatsby to create optimized web applications. It's well-adopted and has a ton of plugins.

GatsbyJS plugins are code you can reuse. They make web development faster. Below are the plugins we find ourselves using most often across our GatsbyJS projects.

#Gatsby-image

Gatsby-image works with the GraphQL queries in Gatsby. It optimizes images so they load well on your site. It uses native image processing and advanced techniques to load images.

You can use Gatsby-image to:

  • Render images.
  • Resize images to be smaller.
  • Create several smaller images (to help with mobile devices).
  • Get rid of unneeded metadata to optimize compression.
  • Save bandwidth and boost page load.
  • Hold image positions during loading.
  • Show preview images while pictures load.

#Gatsby-plugin-google-analytics

This plugin makes it easy to add Google Analytics to GatsbyJS. If you are in development mode, the plugin does not run. Once you run “Gatsby serve,” the plugin enables.

The plugin offers several options, like:

  • anonymize: This option uses the _anonymizeIP function. Some countries require it, such as Germany.
  • head: This option lets you put the tags and around the GA script.
  • respectDNT: This option lets visitors enable Do Not Track. Google Analytics will not track those visitors.
  • trackingID: This option shows your tracking ID for Google Analytics.

#Gatsby-plugin-manifest

This plugin helps with a PWA. PWAs are websites that use modern browsers’ abilities to improve the experience. They usually have benefits and features like those of applications.

PWAs must have service workers, manifest files, and HTTPS (secure contexts). The Gatsby-plugin-manifest gives you those manifest files.

Manifest files control how the end-user sees the app. They include details, such as:

  • Start URL
  • App Name
  • Icons

The GatsbyJS plugin lets you control those details. It also lets you configure:

  • Localization
  • Cache Busting
  • Legacy Icon Support for iOS
  • Favicon Support
  • Automatic Icon Generation

#Gatsby-plugin-offline

This plugin helps you work offline. It creates Service Workers that resist a bad network connection. WorkBox Build creates the Service Workers. The plugin then loads them into the client.

You should use Gatsby-plugin-manifest with this plugin. List Gatsby-plugin-manifest then Gatsby-plugin-offline after it. This makes sure the manifest file is in the Service Worker.

There are also two options in the plugin:

  • precachePages: It lets you choose pages that the service worker precaches.
  • appendScript: It lets you choose the file to include at the service worker’s end.

#Gatsby-plugin-react-helmet

React Helmet is a plugin to control the document’s head. You use the React component to control it. Remember that HTML pages have a body and a head. The head has the keywords, title, and other information.

This plugin lets you change the document head. It is very helpful for SEO.

#Gatsby-plugin-sharp

You need Gatsby-plugin-sharp to use Gatsby-image. Use the plugin to use the package sharp node.js. This is a library for image optimization. Sharp takes care of the image resizing.

This GatsbyJS plugin works at high speeds. Most developers use it on large images. The plugin turns them into smaller images for the web. Those new images will be in WebP, PNG, or JPEG formats and have varying dimensions.

You need this plugin for GatsbyJS to make sure your images are the right size. It will boost your website’s performance.

#Gatsby-plugin-sitemap

Use this GatsbyJS plugin to create a sitemap. To make the sitemap, you need to run the plugin in production mode.

Some of the options in this plugin for GatsbyJS are:

  • exclude: This lets you exclude paths so they are not in the sitemap.
  • output: This is the file path to the sitemap.
  • query: This is the data query data needed to make the sitemap.

#Gatsby-plugin-typescript

Gatsby also comes with Gatsby-plugin-typescript. It creates typescript files that have .tsx or .ts extensions. You can also customize the plugin.

To customize it, put the plugin in your Gatsby-config.js file. The options include:

  • TSX
  • allExtensions

Then, write some components in TypeScript. Now, you can run it.

#Gatsby-source-filesystem

This GatsbyJS plugin lets you add files from your computer. You need it to add any files in GatsbyJS. The plugin tells GraphQL where to find your files.

You will configure this plugin several times. Each new folder you connect to must have the plugin setup. There are three important functions in this plugin:

  • createFilePath: It creates URLs from your system’s file paths.
  • createRemoteFileNode: It downloads remote files to use in the GraphQL schema.
  • createFileNodeFromBuffer: It caches any data not in your local system.

#Gatsby-transformer-sharp

This plugin lets you use the sharp module. It creates ImageSharp nodes with sharp images. This process lets you turn large images into smaller ones. Those smaller images are better for websites.

You can do the following on images with the plugin:

  • Resize them.
  • Crop them.
  • Create them for responsive websites.

You will need the Gatsby-source-filesystem plugin to make image nodes. Or you can use Gatsby-source-wordPress or other source plugins. You only need these source plugins if you download the content to your local file system.

Contact us for your GatsbyJS needs.