Install and use a plugin in a Gatsby site
Learn how to extend a Gatsby site with an official or community authored plugin. Plugins are an important building block in the Gatsby ecosystem that allow you to leverage repeated Gatsby functionality across multiple Gatsby sites.
Plugins hook into the Gatsby lifecycle as sites build and allow you to source data from external APIs or CMSs, transform data, optimize images, and much more.
Learn more:
- Find more plugins in the Gatsby plugin library
- Official docs on plugins
Kyle Gill: [00:00] The first step to adding a plugin to your Gatsby site is installing it and its dependencies. This video uses gatsby-source-filesystem, which is one of the most popular and commonly used plugins. Run npm install gatsby-source-filesystem. It will add support for including data in your site from files that are part of the local file system.
[00:18] After installing, you should see it show up in your package.json. Then, add the name of the plugin to your plugins array in the gatsby-config file. Plugins that are included as strings will run with default plugin options, but other plugins like gatsby-source-filesystem are configured by including them as objects and including an options key.
[00:45] Add gatsby-source-filesystem as an object and provide options of name and path which tells the plugin to pick up the files in my images folder. You can read about each plugin's specific options in its documentation.
[01:02] When you run gatsby develop or gatsby build, your plugins in the plugins array will also be run. For source plugins like the file system plugin, you can verify it installed and is running by navigating to http://localhost:8000/___graphql and querying for all files. The files from the folder you source should be included.