10 Top GatsbyJS Plugins for 2020
Recommended Gatsby plugins to use in 2020
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.
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.
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.