Skip to content

Firebase Deployment Configuration

William Noll edited this page Dec 19, 2016 · 3 revisions

Configure your Firebase deployment!

Firebase deployment settings are located in the firebase.json file at the root of your project directory. Don't see one? Visit the Readme for installation details or run firebase init from the Command Line.

The initial config will look something like:

{
  "hosting": {
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

This file configures which files are published upon deployment.

Public (required)

The public field tells the Firebase CLI which directory to upload to Firebase Hosting. This directory must exist within the project directory. You will not want to commit this directory to version control and should instead add it to your .gitignore file.

Ignore (optional)

The ignore field specifies which files to ignore when deploying the app via the Firebase CLI. It can handle glob definitions.

Redirects (optional)

The redirects field contains an array of redirect rules. Each rule must specify a source, destination, and type.

The source is a glob pattern matched against all URL paths at the start of every request - before determining if a file or folder exists at that path. When a match is found, a HTTP redirect response is set with the Location header set to the static destination field string - this field can be either a relative path or an absolute URL.

The type parameter specifies the HTTP response code served and can include a 301 (Moved Permanently) or a 302 (Found - Temporary Redirect).

"redirects": [{
  "source": "/foo",
  "destination": "/bar",
  "type": 301
},
  "source": "/firebase/*",
  "destination": "https://www.firebase.com",
  "type": 302
{

}]

Capture Redirects

When you wish to capture information from the source URL of a redirect and re-use it at the destination, use a : prefix to identify the segment and an optional * after the name to indicate that the redirect should capture the rest of the URL:

"redirects": [{
  "source": "/blog/:post*",
  "destination": "https://blog.myblog.com/:post*",
  "type": 301
},
{
  "source": "/users/:id/profile",
  "destination": "/users/:id/newProfile",
  "type": 301
}]

Use redirects to prevent broken links if a page moves or to shorten URLs.

Rewrites (optional)

The rewrites field contains an optional array of URL rewrite rules. Each rule must contain source and destination parameters. The destination should be an existing file. A rewrite rule is only applied if a file or folder does not exist at the source location. It will return the content of the destination location instead of redirecting.

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

This example will rewrite any URL to the content found at /index.html if a match does not exist. Use rewrites when you would like to display the same content for multiple URLs.

Headers (optional)

The headers field contains an array of custom header definitions. Each definition must contain a source key and an array of headers to be applied. Each entry of the latter must contain a key and a value. The source key is matched against the original request path disregarding any rewrite rules. When a file or folder cannot be found, headers are instead matched against the source 404.html.

"header": [{
  "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
  "headers": [{
    "key": "Access-Control-Allow-Origin",
    "value": "*"
  }]
},
{
  "source": "**/*.@(jpg|jpeg|gif|png)",
  "headers": [{
    "key": "Cache-Control",
    "value": "max-age=7200"
  }]
},
  "source": "404.html",
  "headers": [{
    "key": "Cache-Control",
    "value": "max-age=300"
  }]
{
}]

Supported Keys for Headers:

  • Cache-Control
  • Access-Control-Allow-Origin
  • X-UA-Compatible
  • X-Content-Type-Options
  • X-Frame-Options
  • X-XSS-Protection
  • Content-Type
  • Link
  • Content-Security-Policy

cleanUrls (optional)

cleanUrls: true

This parameter will drop the .html extension from uploaded file URLs. If the extension is added manually, a 301 redirect will trigger the same path without the .html extension.

trailingSlash (optional)

trailingSlash: true

This parameter forces redirect URLs to either add (true) or remove (false) trailing slashes. When unspecified, trailing slashes used for directory index files only (about/index.html).

Glob Pattern Matching

See this Wiki Article for an in-depth explanation.

Firebase

See the Firebase documentation for full details.