Deployment Configuration

The firebase.json file

The firebase init command creates a firebase.json settings file in the root of your project directory. This required file is used to configure which files are published upon deployment. The Firebase Hosting config in firebase.json will look something like this:

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

Default properties

The default properties - public, and ignore - are described in detail below.

public

"public": "app"

required - The public setting tells the firebase command which directory to upload to Firebase Hosting. This directory must be inside the project directory and must exist. The default value is a directory named "public".

ignore

"ignore": [
  "firebase.json",
  "**/.*",
  "**/node_modules/**"
]

optional - The ignore setting is an optional parameter that specifies files to ignore on deploy. It can take glob definitions the same way git handles .gitignore.

Advanced properties

The firebase.json file has a few other optional parameters for Hosting configuration. You can see a full Hosting configuration firebase.json file here, and these optional parameters are explained in detail below:

redirects

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

optional - The redirects setting is an optional parameter that contains an array of redirect rules. Each rule must specify a source, destination, and type.

The source parameter is a glob pattern that is matched against all URL paths at the start of every request (before it is determined whether a file or folder exists at that path). If a match is found, an HTTP redirect response is set with the "Location" header set to the static destination string, which can be a relative path or an absolute URL.

Finally, the type parameter specifies the specific HTTP response code served and can either be 301 for 'Moved Permanently' or 302 for 'Found' (Temporary Redirect).

Capture Redirects

Sometimes it is desirable to capture parts of the source URL of a redirect and re-use them in the destination. You can do this using a : prefix to identify the segment and an optional * after the name to indicate that it should capture the rest of the URL:

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

rewrites

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

optional - The rewrites setting is an optional parameter that contains an array of URL rewrite rules. Similar to redirects above, each rewrite rule must have a source glob pattern and a local destination (which should exist and be a file). A rewrite rule is only applied if a file or folder does not exist at the specified source, and returns the actual content of the file at the destination instead of an HTTP redirect.

The example above rewrites any URL to the content of /index.html if a matching uploaded file does not exist - handy for apps utilizing HTML5 pushState.

headers

"headers": [ {
  "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"
  } ]
}, {
  // Sets the cache header for 404 pages to cache for 5 minutes
  "source" : "404.html",
  "headers" : [ {
    "key" : "Cache-Control",
    "value" : "max-age=300"
  } ]
} ]

optional - The headers setting is an optional parameter that contains an array of custom header definitions. Each definition must have a source key that is matched against the original request path regardless of any rewrite rules using glob notation. Each definition must also have an array of headers to be applied, each with a key and a value.

The example above specifies a CORS header for all font files and overrides the default 1 hour browser cache with a 2 hour cache for image files. We currently support the following headers as a key:

  • 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

"cleanUrls": true

optional - The cleanUrls setting is an optional parameter that, when true, will automatically drop the .html extension from uploaded file URLs. If a .html extension is added, a 301 redirect will be performed to the same path without the .html extension.

trailingSlash

"trailingSlash": false

optional - The trailingSlash setting is an optional parameter that allows you to control whether or not URLs should have trailing slashes. When true, it will redirect URLs to add a trailing slash. When false it will redirect URLs to remove a trailing slash. When unspecified, trailing slashes are used only for directory index files (e.g. about/index.html).

Glob pattern matching

The firebase.json definitions detailed above make extensive use of the glob pattern matching notation with extglob, similar to how Git handles .gitignore rules and Bower handles ignore rules. This wiki page is great for a more detailed reference, but here's an explanation of the examples above:

  • firebase.json matches just the firebase.json file in the root of the public directory.
  • ** matches any file or folder in an arbitrary sub-directory. Note that * just matches files and folders in the root directory.
  • **/.* matches any file beginning with a '.' (usually hidden files, like the .git folder) in an arbitrary sub-directory.
  • **/node_modules/** matches any file or folder in an arbitrary sub-directory of a "node_modules" folder, which can itself be in an arbitrary sub-directory of the public directory.
  • **/*.@(jpg|jpeg|gif|png) matches any file in an arbitrary sub-directory that ends with a '.' and exactly one of either 'jpg', 'jpeg', 'gif', or 'png'.

Full Hosting configuration example

{
  "hosting": {
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [ {
      "source" : "/foo",
      "destination" : "/bar",
      "type" : 301
    }, {
      "source" : "/firebase/*",
      "destination" : "https://www.firebase.com",
      "type" : 302
    } ],
    "rewrites": [ {
      "source": "/app/**",
      "destination": "/app/index.html"
    } ],
    "headers": [ {
      "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"
      } ]
    } ],
    "cleanUrls": true,
    "trailingSlash": false
  }
}

Send feedback about...

Need help? Visit our support page.