gatsby-plugin-load-script

Add external libraries to your Gatsby website

Installation

``bash
npm install gatsby-plugin-load-script
`

or

`bash
yarn add gatsby-plugin-load-script
`

Usage

$3

##### Add the following plugin to your gatsby-config.js

`js
// gatsby-config.js
module.exports = {
plugins: [
// ...
{
resolve: 'gatsby-plugin-load-script',
options: {
disable: !process.env.SENTRY_DSN, // When do you want to disable it ?
src: 'https://browser.sentry-cdn.com/5.15.4/bundle.min.js',
integrity:
'sha384-Nrg+xiw+qRl3grVrxJtWazjeZmUwoSt0FAVsbthlJ5OMpx0G08bqIq3b/v0hPjhB',
crossorigin: 'anonymous',
onLoad: () => Sentry.init({dsn:"${process.env.SENTRY_DSN}"}),
},
},
],
}
`

More configuration options on sentry.io

#### Obtain a SENTRY DSN

Click here to create a new organisation on sentry.io and obtain a DSN

#### Add SENTRY_DSN to your environment variables

Learn how to use environment variables with Gatsby ?

In development, create a .env.development file and add your own key obtained on sentry.io

`bash
SENTRY_DSN=https://@sentry.io/
`

Add dotenv to your gatsby-config.js

`js
require('dotenv').config({
path: .env.${process.env.NODE_ENV},
})
`

> /!\ You Probably don't want to use sentry during development, so be sure to remove SENTRY_DSN from your development environment variables once you are sure it works correctly.

In production, add the env variable to your netlify site / docker container.

#### More information on Sentry SDK

https://docs.sentry.io/error-reporting/quickstart/?platform=browser

$3

1. Create a folder named static at the root of your gatsby app
2. Place your script in it
3. Add the following configuration in gatsby-config.js

`js
{
resolve: 'gatsby-plugin-load-script',
options: {
src: '/test-script.js', // Change to the script filename
},
},
``

---

Inspired by: load-script