Top 5 Gatsby Plugins
--
Gatsby is a React-based free and open source framework that equips developers with the tools to generate static sites that are optimized for the latest web standards. With a large community, plethora of plugins, and tons of templates, Gatsby is a great choice for any developer looking to create a static website.
Gatsby’s slogan, “Fast in any way that matters”, holds true throughout the entire development process. With Gatsby plugins, it’s incredibly easy to convert your app into a PWA, optimize it for offline usage, enable slow image loading, and almost any feature imaginable with just a few lines of code.
Gatsby isn’t just limited to using Gatsby plugins, React components all integrate extremely well with Gatsby!
Lets take a look at 10 great plugins that Gatsby developers use to speed up their development workflow!
1. gatsby-source-filesystem
gatsby-source-filesystem
is by far the most used plugin for Gatsby. At its core, it can be used to ingest any formatted file format, such as JSON, markdown, YAML, and more either locally or over a network using a URL.
This plugin creates multiples nodes for all the accessed files. However, to use these files (such as Markdown or JSON), you’ll have to use transformer plugins, like gatsby-transformer-json
or gatsby-transformer-remark
.
To install run:
npm install --save gatsby-source-filesystem
To use it, update your gatsby-config.js
:
// From the documentation...
module.exports = {
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
},
},
],
}
This plugin exports three helper functions:
createFilePath
This function is used to create URLs from file paths on the system.
createRemoteFileNode
This allows you to download remote files to add to the GraphQL schema.
createFileNodeFromBuffer
This function caches data not in the local system by creating a buffer.
2. gatsby-image
gatsby-image
is a plugin for speedy, optimized image use for Gatsby sites. This plugin works great with Gatsby GraphQL Queries and it combines native image processing techniques of Gatsby with various image optimization techniques on build/
It also uses gatsby-plugin-sharp
to enhance its image transformations. Here are some features of the gatsby-image
plugin.
- Optimizes the image size based on the size and resolution of each device
- Holds image position while images are loading
- Initial blurred image to improve UX/UI
- Automatically lazy loads image
Install it with npm install --save gatsby-transformer-sharp gatsby-plugin-sharp
.
Update your plugins config as such:
plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]
Finally, setup your gatsby-config
:
const path = require(`path`)
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: path.join(__dirname, `src`, `images`),
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}
Using it in JS is pretty simple, here’s an example:
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
export default ({ data }) => (
<div>
<h1>Hello gatsby-image</h1>
<Img fixed={data.file.childImageSharp.fixed} />
</div>
)
export const query = graphql`
query {
file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
childImageSharp {
# Specify the image processing specifications right in the query.
# Makes it trivial to update as your page's design changes.
fixed(width: 125, height: 125) {
...GatsbyImageSharpFixed
}
}
}
}
`
3. gatsby-plugin-manifest
With this awesome plugin, you can easily make your website a Progressive Web App (PWA). This means you can allow users to add your site to their home screen on most mobile browsers
This means the plugin does a few key things:
1) It auto generates home screen 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.
Install it:
npm install --save gatsby-plugin-manifest
Update your config file:
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `GatsbyJS`,
short_name: `GatsbyJS`,
start_url: `/`,
background_color: `#f7f0eb`,
theme_color: `#a2466c`,
display: `standalone`,
},
},
],
}
4. gatsby-plugin-typescript
This popular library enables Typescript support for your Gatsby app. This means you can use .ts
and .tsx
files in your application!
This plugin is automatically included in Gatsby, so unless you have to configure its options, you shouldn’t have to install it.
These are some of the options you can use in your config:
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-typescript`,
options: {
isTSX: true, // defaults to false
jsxPragma: `jsx`, // defaults to "React"
allExtensions: true, // defaults to false
},
},
],
}
You can read about these options in the documentation for the Babel compiler it uses.
5. gatsby-plugin-offline
Making a website functional even in offline can be difficult, but this plugin makes it easy by providing drop in support for offline and low internet situations by creating a service worker.
It’s incredibly easy to use, lets take a look at an example:
plugins: [
{
resolve: `gatsby-plugin-offline`,
options: {
precachePages: [`/about-us/`, `/projects/*`],
},
},
]
This caches the /about-us
and /projects/*
pages to save on the users local machine for offline use.
Conclusion
With these awesome plugins, you can very easily add functionality to your Gatsby site. Gatsby’s drop in support for these often complex features makes it a super powerful static site generator for any website.
Keep in Touch
There’s a lot of content out there, I appreciate you reading mine. I’m a young entrepreneur and I write about software development and my experience running companies. You can signup for my newsletter here
Feel free to reach out and connect with me on Linkedin or Twitter.