83

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

2
  • I'm not familiar with that option. Can you show where to enable that/where it's documented? Jun 6, 2016 at 22:44
  • 2
    @FrankvanPuffelen check out the screenshot that I added to my question Jun 7, 2016 at 15:58

5 Answers 5

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"
  } ]
}
4
  • 2
    With this config localhost:5000/qqq renders but not localhost:5000/qqq/www how can I fix this issue? Second link does not renders index.html Jan 24, 2018 at 4: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 ** May 22, 2018 at 7:12
  • 1
    Thanks for flagging. I added the more complete example from the linked documentation to help reduce that risk. Dec 5, 2019 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 6, 2022 at 17:40
30

Full example:

{
  "hosting": {
    "public": ".",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
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.

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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.