Inject Custom JavaScript Into a Gatsby Site


Learn how to add custom JavaScript to your Gatsby's main HTML.
This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.
Learn how to add custom JavaScript to your Gatsby's main HTML.
Access all courses and lessons, track your progress, gain confidence and expertise.
Instructor: We need to make a copy of the html JavaScript file from Gatsby's cache and move it into our source directory. Open up html.js. You'll see that this is what Gatsby auto-generates for us.
For this example, I just want to add a basic console log just so we can see our custom JavaScript being injected. When I refresh my site, I expect to see the new console log statement, but it's not showing up. The reason is because we're not working with an actual html file here. We're still working with a JavaScript file.
We need to inject the JavaScript in a way that React allows us to. We can do that by using React's dangerouslySetinnerHTML attribute on the script tag.
Now, when we refresh our site, we see our custom JavaScript.