The 5 most used Gatsby.js plugins explained
Tags: Plugins, React, JavaScript, Gatsbyjs, Web Development

The 5 most used Gatsby.js plugins explained

Gatsby-image, Gatsby-source-filesystem, Gatsby-plugin-react-helmet, Gatsby-plugin-sharp & Gatsby-plugin-manifest explained

You are new are Gatsby plugins? And you may wonder, what’s a Gatsby plugin? So, it’s a reusable piece of code, and it's here to save you time!

Gatsby plugins are Node.js packages that implement Gatsby APIs. For larger, more complex sites, plugins let you modularize your site customizations into site-specific plugins. From the gatsby doc

With over a million download each, the five Gatsby.js plugins most downloaded are:

Gatsby-image

Gatsby-source-filesystem

Gatsby-plugin-react-helmet

Gatsby-plugin-sharp

Gatsby-plugin-manifest

Let’s try to briefly explain them!

No, that’s not me (sadly) … Photo by Frank Vessia on Unsplash

🖼️ The 1rst: Gatsby-image

gatsby-image is a React component specially designed to work seamlessly with Gatsby’s GraphQL queries. It combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites. gatsby-image uses gatsby-plugin-sharp to power its image transformations. From the gatsby doc

In simple words, Gatsby-image is the plugin that is going to allow you to render your images. When I started with Gatsby.js , it was one of the plugins I struggled the most with, but now, I’m impressed by its work. It does more than just rendering your image, as it:

- Resize large images to the size needed by your design. - Generate multiple smaller images so smartphones and tablets don’t download desktop-sized images. - Strip all unnecessary metadata and optimize JPEG and PNG compression. - Efficiently lazy load images to speed initial page load and save bandwidth. - Use the “blur-up” technique or a ”traced placeholder” SVG to show a preview of the image while it loads. - Hold the image position so your page doesn’t jump while images load. From the gatsby doc

The main Gatsby-image concept that is important to understand is Fixed vs. fluid. For a fixed image, you will have a dimension that is decided (width and height). Your image will not be able to stretch. It’s different from the fluid one. In the fluid one, you will have a maximum width and height and it will be designed to stretch to fit the container.

As a beginner, one of the things that used to confuse me the most about this plugin is the use of fragments. On all the tutorials and starters, I was seeing this for example :

{

imageSharp {

fluid(maxWidth: 200) {

...GatsbyImageSharpFluid

}

}

}

But when I was opening my GraphiQL, I could not see the GatsbyImageSharpFluid or GatsbyImageSharpFixed . That’s a fragment, and it is not supported by GraphiQL.

GraphQL includes a concept called “query fragments”. Which, as the name suggests, are a part of a query that can be used in multiple queries. From the gatsby doc

In GraphiQL, it’s equivalent to :

{

imageSharp {

fluid(maxWidth: 200) {

base64

aspectRatio

src

srcSet

sizes

}

}

}

You should note that Gatsby.js has two per dependencies: gatsby-plugin-sharp and gatsby-transformer-sharp .

Gatsby-image has heaps of properties that you can easily add. I encourage you to go and take a look at them!

🕵️‍♂️ To go further :

🗂️ The 2nd: Gatsby-source-filesystem

So, let’s talk about the Gatsby-source-filesystem plugin.

A Gatsby source plugin for sourcing data into your Gatsby application from your local filesystem. The plugin creates File nodes from files. From the gatsby doc

So basically, if you want to add a file in Gatsby such as a picture or a markdown, you’ll need this plugin. In other words, with this plugin, we are telling GraphQL where to query our assets.

Now the tricky part to understand. Every time you have a file in a new folder, it needs to have a Gatsby-source-filesystem configured. You can have multiple instances of the plugin configured, for example:

// In your gatsby-config.js

module.exports = {

plugins: [

{

resolve: `gatsby-source-filesystem`,

options: {

name: `pages`,

path: `${__dirname}/src/pages/`,

},

},

],

}

So, for example, you have images in /static/assets and markdown files in /content/blog. You will need to put two configuration objects in the array plugins.

🕵️‍♂️ To go further :

⛑️ The 3rd: Gatsby-plugin-react-helmet

React Helmet is a component which lets you control your document head using their React component. With this plugin, attributes you add in their component, e.g. title, meta attributes, etc. will get added to the static HTML pages Gatsby builds. From the gatsby doc

Every HTML page has two main parts: a head and a body. The head part contains all the document information such as its title, keywords, … Using the Gatsby-plugin-react-helmet plugin allows you to access the head of your document, and change its value. It’s really useful for SEO purposes.

🕵️‍♂️ To go further :

🪒 The 4th: Gatsby-plugin-sharp

You already know this one as it’s a peer dependency of gatsby-image. It means that you cannot use gatsby-image without the gatsby-plugin-sharp.

It aims to provide excellent out-of-the box settings for processing common web image formats. For JPEGs it generates progressive images with a default quality level of 50; For PNGs it uses pngquant to compress images. By default it uses a quality setting of [50–75]. From the gatsby doc

This plugin is allowing you to use the sharp node.js package which is an image optimization library. All those fancy resizing working their magic in gatsby-image are actually done by sharp:

The typical use case for this high speed Node.js module is to convert large images in common formats to smaller, web-friendly JPEG, PNG and WebP images of varying dimensions. From the Sharp doc

It’s an important package. A fair share of our website performance depends on the size of your images. This plugin will allow you to optimize that.

🕵️‍♂️ Going further

📚 The last & 5th: gatsby-plugin-manifest

To be fair with you, I’ve never done a PWA yet (even if I really want to). So, I’m discovering this plugin at the same time as you.

Let’s start with the beginning: What’s a PWA?

They are regular websites that take advantage of modern browser functionality to augment the web experience with app-like features and benefits. From the Gatsby doc

It’s a normal web page, but if you want you can add a short cut into your cellphone menu. A PWA has 3 technical requirements:

Secure contexts (HTTPS)

Service workers

Manifest file

As its name says it gatsby-plugin-manifest is providing you the manifest file of your PWA. But, hat’s a manifest file?

A JSON file that controls how your app appears to the user and ensures that progressive web apps are discoverable. It describes the name of the app, the start URL, icons, and all of the other details necessary to transform the website into an app-like format. From the MDN doc

A typical manifest includes the following:

an app name

the icons

the URL

You can configure those thanks to the plugin config:

{

plugins: [

{

resolve: `gatsby-plugin-manifest`,

options: {

name: "GatsbyJS",

start_url: "/",

icon: "src/images/icon.png",

// This path is relative to the root of the site.

},

},

]

}

A PWA is not only those three main configurations, there is plenty of options. You can learn more about this here.

This plugin provides several features beyond manifest configuration to make your life easier, they are: - Auto icon generation — generates multiple icon sizes from a single source - Favicon support - Legacy icon support (iOS)1 - Cache busting - Localization — Provides unique manifests for path-based localization (Gatsby Example) From the Gatsby doc

🕵️‍♂️ To go further :