Search code examples
firebasefirebase-hosting

firebase hosting - displaying incorrect content in Iframes

I have a react app that runs on firebase and is required to display content in an IFrame. When running on firebase, firebase displays the index.html in the IFrame instead of the relevant page.

All files are in the same directory but firebase defaults to using the index.html instead of the requested page

Solution

  • When you initialized your Firebase project in the command line, pre-deployment, you probably said "Yes" to the prompt asking if this project is a single-page-app. By saying yes, the CLI tool generated the following setting in the firebase.json settings file:

    firebase rewrite settings

    This tells the Firebase server to route all page requests to your index.html file - notice the wildcards ** - so that your React app can load the appropriate page.

    If you don't want a specific route included in that rule, such as the call to your other file - you need to include an additional rewrite in that firebase.json settings file:

    "rewrites": [
    {
        "source": "/more/**",
        "destination": "/more/anotherpage.html"
    },
    {
        "source": "**",
        "destination": "/index.html"
    },
 ]

    *Note that the order is important, make sure it's before the catch-all wildcard option

    You can read more about rewrites in the relevant section of the official documentation.