82

I just used the Firebase CLI to init a static hosting project. What exactly happens when you enable the "configure as a single-page app" option? I'm looking for a description of exactly which files are modified, and what kind of effect this has on the Firebase backend.

Screenshot of firebase init command

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120

5 Answers5

117

That option simply sets a flag in the firebase.json file to redirect all URLs to /index.html.

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

See the documentation of Firebase Hosting for more information, which also contains this fuller example:

"hosting": {
  // ...

 // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    // Serves index.html for requests to files or directories that do not exist
    "source": "**",
    "destination": "/index.html"
  }, {
    // Serves index.html for requests to both "/foo" and "/foo/**"
    // Using "/foo/**" only matches paths like "/foo/xyz", but not "/foo"
    "source": "/foo{,/**}",
    "destination": "/index.html"
  }, {
    // Excludes specified pathways from rewrites
    "source": "!/@(js|css)/**",
    "destination": "/index.html"
  } ]
}
Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • 2
    With this config http://localhost:5000/qqq renders but not http://localhost:5000/qqq/www how can I fix this issue? Second link does not renders index.html – Teoman shipahi Jan 24 '18 at 04:32
  • 1
    How can we also write an API/functions here then? So for example: 'somewebsite.com/api' which would also be redirecting to a function but also has a root somewebsite.com using ```**``` – Oliver Dixon May 22 '18 at 07:12
  • 1
    Thanks for flagging. I added the more complete example from the linked documentation to help reduce that risk. – Frank van Puffelen Dec 05 '19 at 16:04
  • 1
    If you're using React, this will allow your JS to redirect to each route as intended if you are using React Router as your routing system – Mars2024 Apr 06 '22 at 17:40
30

Full example:

{
  "hosting": {
    "public": ".",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
Andrew Stromme
  • 2,120
  • 23
  • 30
19

If you set it to yes, then all invalid URLs like www.example.com/some-invalid-url will be redirected to index.html of your site which is a good thing. You can also set it to your custom 404.html.

firebase.json

{

  "hosting": {
    "public": "pubic",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "cleanUrls": true
  }
}

Bonus: set the cleanUrls to true to remove .html extensions from your deployed website urls else all urls without .html will redirect to index.html.

GorvGoyl
  • 42,508
  • 29
  • 229
  • 225
5

As a note: if you would like to have Server-Side Rendering (SSR), type No and set up your rewrites as follow:

"rewrites": [
  {
    "function": "angularUniversalFunction",
    "source": "**"
  }
]

After all, whatever you will choose you can always change this in a firebase.json file.

Daniel Danielecki
  • 8,508
  • 6
  • 68
  • 94
4

Official Firebase explanation:

We had used that option last year (Q1 & Q2) but it seemed to do nothing, but nowadays when we apply it, definitely things work very different. The complete official explanation of what it does comes in here:

https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites

There's even some useful information about Headers usage in the next section of the same page.

DavidTaubmann
  • 3,223
  • 2
  • 34
  • 43