10 Top GatsbyJS Plugins for 2020

Recommended Gatsby plugins to use in 2020

Shanika Wickramasinghe
Bits and Pieces

--

Gatsby is a React-based free and open-source framework that allows developers to build optimized web apps following the latest web standards. It’s a static site generator like Hugo and Jekyll. However, Gatsby does better in many aspects than Hugo and Jekyll as you can see from this comparison.

You don’t need Gatsby to deliver optimized web apps. You can do it yourself. Be prepared, though, for long and endless testing and configurations. Gatsby's slogan, “fast in any way that matters” really nails it since it speed-up development and not just your app.

Gatsby is not limited to its own eco-system of plugins, starters, themes, etc. (as it is, React-based). Many React tools go hand-in-hand with Gatsby, and bring out the best of it.

For example, Gatsby developers often use Bit (Github) to share components between Gatsby projects and speed up development even further. Shared components can be anything from a “dumb” UI component, to a data-fetching component (using staticQuery), and even full-on layouts.

Example: exploring React components shared on Bit.dev

Read more about it here:

In this article, we will talk about 10 such great plugins that you should use in your next react application.

1. gatsby-source-filesystem

gatsby-source-filesystem is a plugin that can be used to source JSON data or any other formatted data into your application with supporting plugins. You can collect data from a URL or local file. This plugin creates File nodes whom can be transformed into various other data types such as JSON and MarkDown. You have to use transformer plugins like gatsby-transformer-json and gatsby-transformer-remark for that.

installing the plugin,

After installing the plugin, create the instance of this plugin in gatsby-config.js. This plugin will create nodes from different locations of your file system specified in the instance. For example, we’ll create an instance of pages and images folder with the following code.

Go to http://localhost:8000/___graphq and create the query as shown below:

Once you create the query and run it, you will see the following result.

Results of the created query in GraphQL

You need to know about the three helper functions that this plugin exports. createFilePath function is used to create URLs from file paths on the system. createRemoteFileNode function lets you download remote files and add them to the site’s GraphQL schema. Finally, createFlieNodeFromBuffer function caches the data that is not in the local system. It creates the buffer and caches its content to a disk to create the file node that points to it.

2. gatsby-image

gatsby-image is a plugin for speedy and optimized images for Gatsby sites. This React component works seamlessly with GraphQL queries. It combines native image processing techniques of Gatsby with advanced image processing techniques to load images with optimizations. Further, 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) This plugin holds the image position while it’s loading to avoid jumping around.

3) The plugin displays a blur-up image until image loading is completed.

4) Loading of the image is done using lazy load considering the bandwidth and speeds.

5) It Maintains the consistency between pages.

To start with Gatsby-images, install,

Include gatsby-plugin-sharp, and gatsby-transformer-sharp in gatsby-config.js.

This is how gatsby-image is used in a component.

See an example here:

3. gatsby-plugin-sharp

gatsby-plugin-sharp is created to make use of the Sharp image processing library. Sharp is a Nodejs module that is used to convert large images into web-friendly formats like PNG or WebP. Gatsby-plugin-sharp is a low-level plugin that is helpful if you do custom image processing. processing is used to create a large image into sharp and small images of different formats.

Install using npm,

Here is a code sample using gatsby-plugin-sharp.

Here is the query output for the image.

This plugin provides a number of methods to simplify image processing such as resize, fixed, fluid, etc.

4. gatsby-plugin-manifest

gatsby-plugin-manifest enables web app manifest which is required to add your site to their home screen on most mobile browsers. The manifest lets you add configurations and icons to the phone. However, this plugin can do more than configuring manifestation. let’s see what they are.

1) It has an auto-income generator that creates multiple 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.

Run the following command to install the plugin

You can configure the following setting by adding the manifest plugin to the config file.

There are three modes of icons generated by this plugin. Those are Automatic, Hybrid, and Manual. While Automatic generates a pre-configured set of icons from a single source icon, Hybrid generates manually configured sets of icons from a single source icon. Manual doesn’t generate or preconfigure any icons.

5. gatsby-transformer-sharp

Sharp image processing library is a Node.js module to convert large images into web-friendly PNG and WebP images. the gatsby-transformer-sharp plugin allows you to make use of the Sharp module by creating ImageSharp nodes using sharp images. It provides image processing features like resizing, cropping, and creating images for responsive websites.

To create nodes for images, you need the source plugins like gatsby-source-filesystem. This plugin defines the path and creates ImageSharp nodes for the files. You can even use source plugins like gatsby-source-wordPress.

You can install it with the following command

Using it in your project is very simple.

The source plugins are required only when the content is downloaded to the local file system. In cases where gatsby-source-contentful plugin is used to create a ContentFulAssest, every node is linked to the Contentful’s CDN, thus you don’t require the source plugins

Each file with extensions jpeg, jpg, png, webp, tif, tiff is parsed into a node of type ImageSharp. As Sharp only supports a few extensions, you need to add the following configuration to avoid throwing warnings for non-supporting files.

6. gatsby-plugin-typescript

gatsby-plugin-typescript comes with Gatsby by default and it targets scripts used by frontend frameworks. It builds typescript files with `.ts` or `.tsx` extensions. While this is the default behavior of this plugin, you might want to explicitly use it when you need to configure its options.

There are three steps to customize this plugin. First, you have to include the plugin in the gatsby-config.js file. You can specify options such as is TSX, allExtensions. Then you have to write components in TypeScript. Finally, you can run the TypeScript and that’s it.

Here is an example of a customized gatsby-plugin-typescript plugin.

This plugin doesn’t run type checking during the build and it uses babel-plugin-transform-typescript to transpile TranScript.

7. gatsby-plugin-offline

Although all apps need good network coverage, it is not guaranteed. It’s important to maintain the consistent running of an app in any condition to prevent users from being frustrated. gatsby-plugin-offline can be used to create Service Workers that allow a Gatsby site to work offline providing resistance to bad network connections. This plugin uses WorkBox Build to create Service workers who then will be loaded into the client.

It’s recommended to use this plugin with gatsby-plugin-manifest and you should list gatsby-plugin-offline plugin after gatsby-plugin-manifest so that the manifest file can be included in the service worker.

To install the plugin, run the following command

This plugin has two main options which are precachePages and appendScript.

precachePages — You can specify pages to be precached by the service worker.

appendScript — You can specify which file to be appended at the end of the service worker. Let’s see an example of how you can use the precachePages option.

8. gatsby-plugin-sitemap

gatsby-plugin-sitemap lets you create a sitemap for your website. However, this plugin only creates the sitemap when running in the production mode.

To install the plugin, run the following command

to use it, add it to the gatsby-config.js file.

This plugin provides many options. Let’s see the most commonly used option.

query — The query for the data you need to generate the sitemap.

output — file path to the generated sitemap

exclude — you can exclude certain paths from the sitemap

If you want to create a sitemap index, use the following code snippet.

9. gatsby-plugin-google-analytics

gatsby-plugin-google-analytics plugin lets you easily add google analytics. this plugin is disabled in development mode in order to prevent your site from tracking during its development.

The plugin is enabled when you run gatsby serve command

Let’s see some of the options provided by this plugin.

trackingId — assign your Google Analytics tracking id

head — if you want to put your GA script in between <head> and </head> tags, assign true to this option.

anonymize — countries like German require you to the _anonymizeIP function for Google Analytics. assign true to anonymize in that case.

respectDNT — set this option to true, if you don’t want Google Analytics to track visitors who have enabled the Do Not Track option.

Let’s see and an example configuration of the gatsby-plugin-google-analytics plugin.

10. gatsby-plugin-mdx

gatsby-plugin-mdx is the official plugin to integrate MDX with Gatsby. MDX is a way to combine JSX with markdown. with MDX, you can embed JSX inside markdown. The importance of it is that you can keep markdown for simple things like headers while using JSX for more complicated formattings. Thus MDX simplifies the use of Markdown and JSX together.

MDX enables importing and exporting MDX files (which are, essentially, components). It also enables creating a design system, for markdown files, out of React components.

To learn more about composing MDX in Gatsby websites, see here:

You can install the gatsby-plugin-mdx plugin by running the following command

Then add it to the gatsby-config.js

This configuration will process markdown media types in your application into MDX content. The resulting pages will be stored in src/pages as .mdx files. if you want to create .mdx files from other sources, you need to configure gatsby-plugin-page-creator as shown below.

Conclusion

Gatsby is a static site generator for React to build static pages which makes the website faster and more SEO friendly. It’s easy to learn, uses the latest technologies like GraphQL to create queries, and feed your website with data. It has an active community, that has created various plugins providing all the features required for static sites. Finally, the best thing I like about Gatsby, it’s fun to work with.

Learn More

--

--

Senior Software Engineer and Freelance Technical Writer. I write about any Computer Science related topic. https://www.linkedin.com/in/shanikawickramasinghe