Gatsby: How to use Iframe to introduce HTML files in Gatsbyjs?

[PiccoloYu]

I have an HTML file that I need to import and display in the form of an Iframe

. But... I haven't found a way to achieve it. Can you tell me how to achieve it? It is an HTML file and cannot be converted into a react component.

[PiccoloYu]

[LekoArts]

Have you tried using the static folder?
https://www.gatsbyjs.org/docs/static-folder/

So placing the HTML file there and pointing the src there instead of using GraphQL.

[PiccoloYu]

您是否尝试过使用静态文件夹？
https://www.gatsbyjs.org/docs/static-folder/

因此，将HTML文件放在此处并将src指向那里，而不是使用GraphQL。

Yes, there is no problem in introducing pictures. But Iframe will make a mistake.

Create a React.js component in your site directory at src/pages/impress/impress.html.js and this page will automatically refresh to show the new page component you created. If you were trying to reach another page, perhaps you can find it below.

[jonniebigodes]

@PiccoloYu if you want i can make a small reproduction and describe how you can do it. Sounds good?

[PiccoloYu]

@jonniebigodes Of course, this is the best. Thank you very much.

[jonniebigodes]

No need to thank, i'm going make the reproduction and report back.

[jonniebigodes]

@PiccoloYu i have a solution for you, i'm going to describe the steps i took to triage below:

• Created a new gatsby site based on the hello world starter.
• Based on the guidelines and best practices in gatsby, i created a new file called test.html inside the static folder with some random content.
• Modified /src/pages/index.js to the following:

import React from "react"

export default () => (
  <div
    style={{
      display: "flex",
      alignContent: "center",
      margin: "3rem auto",
      justifyContent: "space-around",

    }}
  >
    <div>
      <iframe src="/test.html" title="dummy" style={{width:'800px',height:'600px'}}></iframe>
    </div>
    <div>this is content for the page</div>
  </div>
)

• Issued gatsby develop and opened up http://localhost:8000 and i'm presented with the folllowing, also on the right side i tried to access the page directly and as you can see by the image the issue persists:
  
• Tried gatsby build && gatsby serve and i opened up http://localhost:9000 on one window and http://localhost:9000/test.html and i can now see the content as you can see below:
  

It seems that on build you can see the actual html without any issues.

• Did a little search and it seems your issue is related to #13072 . Went through the issue and pieh's comment offered a workaround and a explanation on what is happening. With that in mind i changed gatsby-node.js to contain the following:

const express= require('express');

exports.onCreateDevServer=({app})=>{
    app.use(express.static('public'))
}

• Issued gatsby develop and opened up browser windows to bothhttp://localhost:8000 and http://localhost:8000/test.html and i'm presented with the following:
  

If you want i can hoist up the code to a repo and you can go over it at your own pace.

Feel free to provide feedback so that we can close this issue or continue to work on it until we find a suitable solution.

[PiccoloYu]

@jonniebigodes (∩_∩)It would certainly be very helpful to provide an example.

[jonniebigodes]

@PiccoloYu here you go, i've set up a repo with the code used for this issue in here

[PiccoloYu]

@jonniebigodes Yes, it works！！

[jonniebigodes]

@PiccoloYu glad that i was able to help you and you managed to get it to work.

[LukyVj]

@jonniebigodes Just a comment to say thank you, your well detailed explanatory comment was super helpful, thanks a lot.

[jonniebigodes]

@LukyVj no need to thank, glad that i was able to help you aswell.

[stevemarksd]

you just need to add this code in gatsby-node.js

const express = require('express')
exports.onCreateDevServer=({app})=>{
    app.use(express.static('public'))
}