73

2 brilliant Gatsby plugins for your next project

Gatsby the Great :)

Here are two plugins that could help you a lot with Gatsby! The only thing you have to do is to run :

yarn add gatsby-plugin-xxx

Indeed replace “gatsby-plugin-xxx” with the actual name of the plugin. Then add it to you plugin list in the gatsby-config.js file :

 plugins: [
    'gatsby-plugin-xxx'
  ]

Gatsby Alias import

This one is handy. Instead of using relative paths to call your components like that:

import YourComponent from '../../YourComponent'

You can use more clever paths.

The standard folder name for Gatsby templates is “src”. So if your components are in “src/components” just write that:

import YourComponent from 'components/YourComponent'

This allows for more flexibility in case you need to reorganize things at some point. You can even define specific aliases:

 {
      resolve: `gatsby-alias-imports`,
      options: {
        aliases: {
          styles: `src/styles`,
          config: `config/`
        }
      }
    }

and then use them in templates:

import from 'styles/YourStyle.css'

Just brilliant!

Download Gatsby Alias import

Gatsby Plugin Netlify CMS

Hosting a Gatsby project can be tricky. Netlify is an excellent solution. This fantastic platform will handle a lot of things, including automatic deploys and builds, reviews, and asset optimizations.

But, that’s for the deploying part, you may also want to have some UI to write stuff. Gatsby can get contents from multiple sources, including CMS but, what if you don’t have that in your project.

Netlify CMS provides a free UI that relies on GIT and pull requests which, allows for a complete and quite complex workflow.

Download Gatsby Plugin Netlify

Wrap up

Flexibility is a feature, especially when using components (so when using React ^^), it’s a massive pain if you have to edit three files or more just to move a simple folder.

Those two plugins allow for a better approach to make the most of Webpack, GIT, and Netlify.