Build plugins
Learn how to install and use Netlify Build Plugins.
Build Plugins expand what your Netlify builds are capable of. For example, you can use plugins to:
- speed up builds by optimizing and debugging your build cache
- import and convert data from external sources
- check for broken links in a site after building
- analyze and optimize site asset handling for better runtime performance
- generate content like sitemaps, RSS feeds, and search indexes
Install a plugin
Section titled “Install a plugin”To get a sampling of what plugins can do, navigate to Project configuration for your site. You’ll find different types of plugins, including plugins from our partners and plugins from the community. Plugins can be Build & deploy Build pluginsinstalled directly from the Netlify UI. They can also be installed using the Netlify configuration file, which allows more configuration options. Netlify automatically installs plugins or runtimes recommended for certain frontend frameworks when you link a repository for a new project.
UI installation
Section titled “UI installation”- In the Netlify UI, navigate to Project configuration for your project. Build & deploy Build plugins
- Search or browse for the plugin you want.
- Select Enable.
- Follow the installation guidance in the Netlify UI to install the plugin on a site. You may be prompted to add build environment variables required by the plugin.
- To use your new plugin, visit the Deploys tab for your site and select Trigger deploy.
Required environment variables
Section titled “Required environment variables”Though many plugins listed in the Netlify UI require no configuration for default operation, some may require you to set one or more build environment variables for your site during or after installation. Refer to the plugin’s documentation, linked from Options menu in the plugin’s listing.
File-based installation
Section titled “File-based installation”File-based plugin installation allows advanced plugin configuration.
You can use file-based installation for either of the following:
- installing local plugins that you write and store in your repository
- accessing a wide selection of plugins published by the community on npm
In both cases, you configure settings in netlify.toml
. For a plugin published to npm, you also add it as a dependency. Then you can test or run the plugin as part of a build.
Configure settings
Section titled “Configure settings”To run a plugin during your build, add it to a Netlify configuration file stored in your site’s base directory. A plugin configured globally with [[plugins]]
runs in all deploy contexts, but you can also configure a plugin by deploy context.
Here’s a sample configuration with two plugins installed in all deploy contexts.
# Configuration for a plugin published to npm[[plugins]]package = "netlify-plugin-lighthouse"
[plugins.inputs] output_path = "reports/lighthouse.html"
# Configuration for a local plugin[[plugins]]package = "/plugins/netlify-plugin-hello-world"
Each [[plugins]]
entry accepts two keys:
package
(required):- for a plugin installed from npm, the npm package name of the plugin.
- for a local plugin, the absolute path to a directory containing the plugin’s
index.js
andmanifest.yml
files. Thepackage
value for a local plugin must start with.
or/
.
inputs
: custom settings that the plugin author may specify as required or available for configuring the plugin. To specifyinputs
per deploy context, refer to configure by deploy context.
For npm-published plugins, you can find these details in each plugin’s package documentation on the npm Public Registry.
Configure by deploy context
Section titled “Configure by deploy context”Using specific settings in your Netlify configuration file, you can limit a build plugin to run in a certain deploy context only, or you can configure a plugin’s inputs
settings differently per context.
Here’s an example configuration that runs the Sitemap plugin in the context of production deploys only.
# Use double brackets since `plugins` is an array of tables.[[context.production.plugins]]package = "@netlify/plugin-sitemap"
And here’s an example configuration that runs the Cypress plugin differently based on deploy contexts.
# Use Cypress plugin for this site.# This section, by itself, configures the plugin# for all deploy contexts (production, branch deploys, Deploy Previews).[[plugins]]package = "netlify-plugin-cypress" [plugins.inputs] record = true
# Don’t record Cypress tests in Deploy Previews.# Since this entry is more specific, it overrides the entry above.# `context.deploy-preview.plugins` and `package` must be included.[[context.deploy-preview.plugins]]package = "netlify-plugin-cypress" # Use single brackets since `inputs` is an object property [context.deploy-preview.plugins.inputs] record = false
This configuration records test results and artifacts on the Cypress Dashboard for production and branch deploys only, not Deploy Previews.
Next steps
Section titled “Next steps”If you’re installing a local plugin, you can run and test it after configuration. Otherwise, you’ll add a dependency to package.json
.
Add dependency
Section titled “Add dependency”For a plugin from npm, there’s an additional step beyond editing the Netlify configuration file. You must use npm, yarn, or another Node.js package manager to add the plugin to devDependencies
in your site’s package.json
.
From your project’s base directory, use a command like this to add the dependency:
# Replace `BUILD_PLUGIN_NAME` with a real plugin name,# like `netlify-plugin-lighthouse`npm install -D BUILD_PLUGIN_NAME
# Replace `BUILD_PLUGIN_NAME` with a real plugin name,# like `netlify-plugin-lighthouse`yarn add -D BUILD_PLUGIN_NAME
Run and test
Section titled “Run and test”When you save your changes to your repository and push them to your Git provider, the build that’s triggered on Netlify will run with plugins installed for that deploy context. If you would like to test a plugin before running it in a production build, you can use a branch deploy or Deploy Preview, or you can run the build locally with Netlify CLI.
Automatic installation
Section titled “Automatic installation”When you link a repository for a new site, Netlify runs a build detection utility to determine whether your site uses a particular frontend framework. Certain frameworks have recommended Build Plugins or runtimes. These help extend the functionality of the Netlify Build process to support key framework-specific features. Recommended plugins and runtimes may have site conditions requirements, such as a minimum Node.js version.
If your new site uses a framework with recommended plugins or runtimes, Netlify checks whether these are already installed in a Netlify configuration file. If not, Netlify automatically installs them. These automatically installed plugins run in all deploy contexts.
For an existing site that’s already linked to Netlify, you can choose to install framework-specific recommended plugins yourself.
Manage plugin versions
Section titled “Manage plugin versions”Netlify encourages plugin authors to regularly update functionality and release new versions using semantic versioning. Minor plugin version updates introduce only backward compatible new features, while major plugin version updates can introduce breaking changes. Refer to the plugin’s changelog, linked from the Options menu for the plugin listing in the Netlify UI, for version details.
The steps for managing plugin versions for your site depend on the plugin installation method.
For plugins installed in the UI or installed automatically, Netlify updates your site for minor plugin version releases automatically. To manage major plugin updates for a site, take the following steps:
- Navigate to Project configuration for your project Build & deploy Build plugins
- Search or browse to find the plugin you want to manage.
- Select .
- Select the desired major version.
- Select Change version to save.
Subsequent builds will use the plugin version that you’ve chosen and confirmed.
For plugins installed through file-based installation, you can manage versions in your site’s package.json
file under devDependencies
.
Remove a plugin
Section titled “Remove a plugin”The steps for removing a plugin depend on how it was installed or whether it is an Essential Gatsby or Next.js Runtime plugin.
For plugins installed in the UI or installed automatically:
-
For your selected project, go to Project configuration . Build & deploy Build plugins
-
Find the plugin you want to remove.
-
In the plugin’s card select Disable.
Subsequent builds will not use the uninstalled plugin and environment variables entered for this integration will not be deleted.
For plugins installed through file-based installation:
-
Open your site’s
netlify.toml
. -
Delete or comment out the plugin’s configuration fields.
When you push your committed changes, the resulting build will run without the plugin. If you’re removing an npm-published plugin and want to avoid installing code you won’t use, you can uninstall the plugin package using npm.
For the Essential Gatsby and Next.js Runtime v4 plugins:
- For your selected site, go to Project configuration . Build & deploy
- In Build settings, find your plugin in the Runtime field and select Remove.
Create a plugin
Section titled “Create a plugin”Once you’ve had a chance to try out plugins, you may want to make one of your own. To learn how, visit the create plugins doc.
Get help
Section titled “Get help”Netlify Build Plugins are created by our partners and developers at Netlify and in the community. If you need help with a plugin, contact the plugin author by submitting an issue on the plugin repository. For plugins in the Netlify UI, you can find a link to the plugin issues under the Options menu for the plugin listing. If a plugin author doesn’t respond to an issue within a week, you can request deactivation of the plugin from the Netlify UI.
For more general questions, or to discuss Build Plugins with other members of the community, visit the Netlify Support Forums.
More Build Plugins resources
Section titled “More Build Plugins resources”Did you find this doc useful?
Your feedback helps us improve our docs.