Deployment Configuration

The firebase.json file

The firebase init command creates a firebase.json configuration file in the root of your project directory. This required file is used to configure which files are published upon deployment.

If you select Firebase Hosting during the initialization process, the default "hosting" configuration in the firebase.json file looks like this:

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

The default properties for Firebase Hosting — "public" and "ignore" — are described in detail below, but you can further customize your Hosting configuration using optional advanced properties in the firebase.json file.

public

"public": "public"

required — The "public" setting tells the firebase command which directory to upload to Firebase Hosting. The default value is a directory named "public", but you can specify any directory's path as long as it exists in your project directory. For example:

"public": "dist/app"

ignore

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

optional — The "ignore" setting specifies files to ignore on deploy. It can take glob definitions the same way that 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 it 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 HTML5pushState.

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.

The following headers are not permitted to be set using a headers configuration:

  • Strict-Transport-Security
  • Public-Key-Pinning
  • Set-Cookie

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 (for example, 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 a more detailed reference, but here's an explanation of the examples from above:

  • firebase.json only matches the firebase.json file in the root of the public directory.
  • ** matches any file or folder in an arbitrary sub-directory. Note that * only 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.