Fastest way to add pre-existing static HTML page to a React/Gatsby site

Question

I have a simple project working nicely using JSX / React / Gatsby.

I have a pre-existing page (think landing page) in HTML in another project, quite complex, nicely styled using Bootstrap 4, let's call it LandingPage.html and an associated LandingPage.css.

I would like to add the landing page to my Gatsby site. So that for example when navigating to localhost:3000/LandingPage.html the landing page gets shown, properly styled etc.

I am not clear whether I have to fully convert my pre-existing HTML into a react component / JSX? Or whether I can just serve the LandingPage.html (and associated styling files) by placing it somewhere sensible in my Gatsby project structure? Or whether I have to create a react "wrapper" that at "run time" reads in the content of LandingPage.html and LandingPage.css?

Note: I've tried just putting the LandingPage.html and LandingPage.css into the /public folder and actually that does work! So maybe I've answered my own question. But is the the right way to do it?

Answer 1

As of Gatsby v2 (don't know about previous versions), it is maybe more consistent to add the file to the /static folder.

According to the docs, the /public folder is meant to be generated automatically when building the site and should be added to .gitignore.

Files added to the /static folder will be copied to /public when building the site so it should have the same effect. More info here.