All Articles

How To Include External JavaScript using Helmet

Gatsby can be confusing for web developers who are new to this world of React server-side rendering. In this short article, I answer the question for how to include external JavaScript libraries from a CDN in your Gatsby site using react-helmet.

First; you will need to install react-helmet using npm (or Yarn).

npm install --save react-helmet

Second; you will need to decide if you want this external library to appear on every page of your site or only on certain pages (like posts or another template).

If you would like this external JavaScript library to appear on every page of your website; you will want to insert your <Helmet /> React component on a page that is used everywhere perhaps the <Layout /> or <SEO /> React components that are common in many of the Gatsby starters.

For example, if you are using the Gatsby-Starter-Blog starter; react-helmet is already included and you will want to your script link in the <SEO /> component in src/components/seo.js.

Third; react-helmet is powerful so you can use any valid head tag like <script />, <link />, <style />, etc. You will want to find the <Helmet /> component and add your script tag in it like so:

<Helmet>
  <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
</Helmet>

You will now have jQuery loaded on every page of your Gatsby site.

If you need help with a different Gatsby starter and you are stuck, feel free to reach out to @ramisayar on Twitter or use the contact form.

/**
 * SEO component that queries for data with
 *  Gatsby's useStaticQuery React hook
 *
 * See: https://www.gatsbyjs.org/docs/use-static-query/
 */

import React from "react"
import PropTypes from "prop-types"
import Helmet from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

const SEO = ({ description, lang, meta, title }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            social { twitter }
          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.social.twitter,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    >
      <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
    </Helmet>
  )
11}

SEO.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

SEO.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default SEO