Including local JS and CSS files using Gatsbyjs

Question

I am completely new to the gatsbyjs ecosystem, and at the same time I am learning a bit of reactjs. I recently bought an html template and was trying to use it as a UI in a gats

Answer 1

After a more extensive search, I found a couple of articles with a solution. This was the first approach:

import { withPrefix } from "gatsby"
import Helmet from "react-helmet"

const IndexPage = () => (
  <div>
    <Helmet>
        <script src={withPrefix('revolution/js/extensions/revolution.extension.actions.min.js')} type="text/javascript" />
    </Helmet>

  </div>
)
export default IndexPage

This is the second approach using the gatsby-ssr.js file:

const React = require("react")

exports.onRenderBody = ({setPostBodyComponents}) => {
          setPostBodyComponents([
            <script key="1" src={'js/plugins/plugins.js'} type="text/javascript" />,
            <script type="text/javascript" src={"js/beauty.custom.js"}/>
          ]);
  };

this way the scripts tags will be added at the end of the body instead of the head

I think the second one is the best one, but have to take in count that every time you change something in the gatsby-ssr.js file have to stop the gatsby develop and re-run it.

In the first case usingreact-helmet will hot-reload.

NOTE: In both approaches, files have to be in the static folder

Here are the links to where I found this approach:

How to include local javascript on a Gatsby page?

How do you insert an external script using gatsby-browser?