Including Local Js And Css Files Using Gatsbyjs

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 gatsbyj

Solution 1:

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

import { withPrefix } from"gatsby"importHelmetfrom"react-helmet"constIndexPage = () => (
  <div><Helmet><scriptsrc={withPrefix('revolution/js/extensions/revolution.extension.actions.min.js')} type="text/javascript" /></Helmet></div>
)
exportdefaultIndexPage

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

constReact = require("react")

exports.onRenderBody = ({setPostBodyComponents}) => {
          setPostBodyComponents([
            <scriptkey="1"src={'js/plugins/plugins.js'} type="text/javascript" />,
            <scripttype="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?