CODEWITHSUNDEEP
reactjsiframeurl-rewritingreact-routerstatic-html
Jim Peeters
Jim Peeters

Reputation: 2853

How to serve a static html file with react app in iframe when using react router?

I'm currently having problems when serving a HTML file in my react app. I use @nrwl/react to build my application.

The html folder is present after building my application (in the public folder). My setup works when running the application locally. The moment I deploy the application and host it I think the react router is messing up the path. In the deployed version I see my application nested with a blank screen in my iframe.

Router:

<Switch>
    <Route path="/" exact />
    <Route path="/home" component={HomeComp} />
    <Route path="/iframe" component={IframeComp} />
    <Route onEnter={() => window.location.reload()} />
    <Route component={NotFoundPage} />
</Switch>

IframeComp:

import React from 'react';

const IframeComp= () => {
  return (
    <iframe
      src="/staticfolder/index.html"
    ></iframe>
  );
};

export default IframeComp;

My rewrite rules in web.config

<rewrite>
  <rules>
    <rule name="HTTPSs">
      <match url="(.*)"/>
      <conditions>
        <add input="{HTTPS}" pattern="Off"/>
        <add input="{HTTP_HOST}" negate="true" pattern="^localhost" />
      </conditions>
      <action type="Redirect" url="https://{HTTP_HOST}/{R:1}"/>
    </rule>
    <rule name="ReactRoutes" stopProcessing="true">
      <match url="^(?!api|swagger).*" />
      <conditions>
        <add input="{HTTP_METHOD}" pattern="^GET$" />
        <add input="{HTTP_ACCEPT}" pattern="^text/html" />
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      </conditions>
      <action type="Rewrite" url="/index.html" />
    </rule>
  </rules>
</rewrite>

Upvotes: 3

Views: 485

Answers (0)

Related Questions