Add Firebase to your JavaScript project

<!doctype html> <html lang="en" dir="ltr"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://firebase.google.com/docs/web/setup","20210506173739","https://web.archive.org/","web","/_static/", "1620322659"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email"> <meta property="og:site_name" content="Firebase"> <meta property="og:type" content="website"> <meta name="theme-color" content="#039be5"> <meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/web/20210506173739/https://firebase.google.com/_pwa/firebase/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//web.archive.org/web/20210506173739/https://www.gstatic.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20210506173739/https://fonts.gstatic.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20210506173739/https://fonts.googleapis.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20210506173739/https://apis.google.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20210506173739/https://www.google-analytics.com/" crossorigin> <link rel="stylesheet" href="//web.archive.org/web/20210506173739cs_/https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700|Material+Icons"> <link rel="stylesheet" href="https://web.archive.org/web/20210506173739cs_/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/firebase/css/app.css"> <link rel="shortcut icon" href="https://web.archive.org/web/20210506173739im_/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/firebase/images/favicon.png"> <link rel="apple-touch-icon" href="https://web.archive.org/web/20210506173739im_/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/firebase/images/touchicon-180.png"><link rel="canonical" href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/web/setup"><link rel="search" type="application/opensearchdescription+xml" title="Firebase" href="https://web.archive.org/web/20210506173739/https://firebase.google.com/s/opensearch.xml"> <title>Add Firebase to your JavaScript project</title> <meta property="og:title" content="Add Firebase to your JavaScript project"> <meta property="og:url" content="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/web/setup"> <meta property="og:locale" content="en"> <meta name="gtm_var" data-key="docType" data-value="get-started"> </head> <body class="" template="page" theme="firebase-theme" type="article" layout="docs" pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"><devsite-header> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/web/20210506173739/https://firebase.google.com/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="firebase" track-metadata-position="nav" track-metadata-eventdetail="nav"> <img src="https://web.archive.org/web/20210506173739im_/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/firebase/images/lockup.png" class="devsite-site-logo" alt="Firebase"> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list"> <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab dropdown> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/products-build" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="products" data-category="Site-Wide Custom Events" data-label="Tab: Products"> Products </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Products" track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="products" data-category="Site-Wide Custom Events" data-label="Tab: Products" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/products-build" track-type="navMenu" track-name="Build" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/products-build" tooltip> <div class="devsite-nav-item-title"> Build </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/products-release" track-type="navMenu" track-name="Release & Monitor" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/products-release" tooltip> <div class="devsite-nav-item-title"> Release & Monitor </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/products-engage" track-type="navMenu" track-name="Engage" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/products-engage" tooltip> <div class="devsite-nav-item-title"> Engage </div> </a> </li> </ul> </div> </div> </div> </tab> <tab> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/use-cases" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="useCases" data-category="Site-Wide Custom Events" data-label="Tab: Use Cases"> Use Cases </a> </tab> <tab> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/pricing" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="pricing" data-category="Site-Wide Custom Events" data-label="Tab: Pricing"> Pricing </a> </tab> <tab dropdown active> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="docs" aria-label="Docs, selected" data-category="Site-Wide Custom Events" data-label="Tab: Docs"> Docs </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Docs" track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="docs" data-category="Site-Wide Custom Events" data-label="Tab: Docs" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs" track-type="navMenu" track-name="Overview" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs" tooltip> <div class="devsite-nav-item-title"> Overview </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/guides" track-type="navMenu" track-name="Fundamentals" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/guides" tooltip> <div class="devsite-nav-item-title"> Fundamentals </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/build" track-type="navMenu" track-name="Build" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/build" tooltip> <div class="devsite-nav-item-title"> Build </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/release" track-type="navMenu" track-name="Release & Monitor" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/release" tooltip> <div class="devsite-nav-item-title"> Release & Monitor </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/engage" track-type="navMenu" track-name="Engage" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/engage" tooltip> <div class="devsite-nav-item-title"> Engage </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/reference" track-type="navMenu" track-name="Reference" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/reference" tooltip> <div class="devsite-nav-item-title"> Reference </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/samples" track-type="navMenu" track-name="Samples" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/samples" tooltip> <div class="devsite-nav-item-title"> Samples </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/libraries" track-type="navMenu" track-name="Libraries" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/libraries" tooltip> <div class="devsite-nav-item-title"> Libraries </div> </a> </li> </ul> </div> </div> </div> </tab> <tab> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/community" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="community" data-category="Site-Wide Custom Events" data-label="Tab: Community"> Community </a> </tab> <tab> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/support" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="support" data-category="Site-Wide Custom Events" data-label="Tab: Support"> Support </a> </tab> </nav> </devsite-tabs> </div> <devsite-search aria-expanded="false" aria-haspopup="listbox" enable-signin enable-search enable-suggestions enable-query-completion project-name="Firebase" tenant-name="Firebase" role="combobox"> <form class="devsite-search-form" action="https://web.archive.org/web/20210506173739/https://firebase.google.com/s/results" method="GET"> <div class="devsite-search-container"> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-haspopup="false" aria-multiline="false" aria-label="Search box" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value=""> <div class="devsite-search-image material-icons" aria-hidden="true"></div> </div> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-language-selector> <devsite-select class="devsite-language-selector-menu"> <select aria-label="Select your language preference." class="devsite-language-selector-select" name="language" track-name="click" track-type="languageSelector"> <option>Language</option> <option value="en" lang="en" track-metadata-original-language="en" track-metadata-selected-language="en" track-name="changed" track-type="languageSelector"> English </option> <option value="id" lang="id" track-metadata-original-language="en" track-metadata-selected-language="id" track-name="changed" track-type="languageSelector"> Bahasa Indonesia </option> <option value="de" lang="de" track-metadata-original-language="en" track-metadata-selected-language="de" track-name="changed" track-type="languageSelector"> Deutsch </option> <option value="es_419" lang="es_419" track-metadata-original-language="en" track-metadata-selected-language="es_419" track-name="changed" track-type="languageSelector"> Español – América Latina </option> <option value="fr" lang="fr" track-metadata-original-language="en" track-metadata-selected-language="fr" track-name="changed" track-type="languageSelector"> Français </option> <option value="it" lang="it" track-metadata-original-language="en" track-metadata-selected-language="it" track-name="changed" track-type="languageSelector"> Italiano </option> <option value="pl" lang="pl" track-metadata-original-language="en" track-metadata-selected-language="pl" track-name="changed" track-type="languageSelector"> Polski </option> <option value="pt_br" lang="pt_br" track-metadata-original-language="en" track-metadata-selected-language="pt_br" track-name="changed" track-type="languageSelector"> Português – Brasil </option> <option value="vi" lang="vi" track-metadata-original-language="en" track-metadata-selected-language="vi" track-name="changed" track-type="languageSelector"> Tiếng Việt </option> <option value="tr" lang="tr" track-metadata-original-language="en" track-metadata-selected-language="tr" track-name="changed" track-type="languageSelector"> Türkçe </option> <option value="ru" lang="ru" track-metadata-original-language="en" track-metadata-selected-language="ru" track-name="changed" track-type="languageSelector"> Русский </option> <option value="he" lang="he" track-metadata-original-language="en" track-metadata-selected-language="he" track-name="changed" track-type="languageSelector"> עברית' </option> <option value="ar" lang="ar" track-metadata-original-language="en" track-metadata-selected-language="ar" track-name="changed" track-type="languageSelector"> العربيّة </option> <option value="fa" lang="fa" track-metadata-original-language="en" track-metadata-selected-language="fa" track-name="changed" track-type="languageSelector"> فارسی </option> <option value="hi" lang="hi" track-metadata-original-language="en" track-metadata-selected-language="hi" track-name="changed" track-type="languageSelector"> हिंदी </option> <option value="bn" lang="bn" track-metadata-original-language="en" track-metadata-selected-language="bn" track-name="changed" track-type="languageSelector"> বাংলা </option> <option value="th" lang="th" track-metadata-original-language="en" track-metadata-selected-language="th" track-name="changed" track-type="languageSelector"> ภาษาไทย </option> <option value="zh_cn" lang="zh_cn" track-metadata-original-language="en" track-metadata-selected-language="zh_cn" track-name="changed" track-type="languageSelector"> 中文 – 简体 </option> <option value="zh_tw" lang="zh_tw" track-metadata-original-language="en" track-metadata-selected-language="zh_tw" track-name="changed" track-type="languageSelector"> 中文 – 繁體 </option> <option value="ja" lang="ja" track-metadata-original-language="en" track-metadata-selected-language="ja" track-name="changed" track-type="languageSelector"> 日本語 </option> <option value="ko" lang="ko" track-metadata-original-language="en" track-metadata-selected-language="ko" track-name="changed" track-type="languageSelector"> 한국어 </option> </select> </devsite-select> </devsite-language-selector> <a class="devsite-header-link devsite-top-button button gc-analytics-event" href="//web.archive.org/web/20210506173739/https://console.firebase.google.com/" data-category="Site-Wide Custom Events" data-label="Site header link"> Go to console </a> <devsite-user enable-profiles fp-auth id="devsite-user"></devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row"> <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list"> <li class="devsite-breadcrumb-item "> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail=""> Documentation </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="overview" data-category="Site-Wide Custom Events" data-label="Tab: Overview"> Overview </a> </tab> <tab dropdown active> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/guides" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="fundamentals" aria-label="Fundamentals, selected" data-category="Site-Wide Custom Events" data-label="Tab: Fundamentals"> Fundamentals </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Fundamentals" track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="fundamentals" data-category="Site-Wide Custom Events" data-label="Tab: Fundamentals" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/ios/setup" track-type="navMenu" track-name="Add Firebase - iOS" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/ios/setup" tooltip> <div class="devsite-nav-item-title"> Add Firebase - iOS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/android/setup" track-type="navMenu" track-name="Add Firebase - Android" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/android/setup" tooltip> <div class="devsite-nav-item-title"> Add Firebase - Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/web/setup" track-type="navMenu" track-name="Add Firebase - Web" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/web/setup" tooltip> <div class="devsite-nav-item-title"> Add Firebase - Web </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/cpp/setup" track-type="navMenu" track-name="Add Firebase - C++" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/cpp/setup" tooltip> <div class="devsite-nav-item-title"> Add Firebase - C++ </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/unity/setup" track-type="navMenu" track-name="Add Firebase - Unity" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/unity/setup" tooltip> <div class="devsite-nav-item-title"> Add Firebase - Unity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/admin/setup" track-type="navMenu" track-name="Add Firebase - Server environments" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/admin/setup" tooltip> <div class="devsite-nav-item-title"> Add Firebase - Server environments </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/projects/learn-more" track-type="navMenu" track-name="Manage Projects" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/projects/learn-more" tooltip> <div class="devsite-nav-item-title"> Manage Projects </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/emulator-suite" track-type="navMenu" track-name="Use Emulator Suite" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/emulator-suite" tooltip> <div class="devsite-nav-item-title"> Use Emulator Suite </div> </a> </li> </ul> </div> </div> </div> </tab> <tab dropdown> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/build" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="build" data-category="Site-Wide Custom Events" data-label="Tab: Build"> Build </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Build" track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="build" data-category="Site-Wide Custom Events" data-label="Tab: Build" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/emulator-suite" track-type="navMenu" track-name="Emulator Suite" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/emulator-suite" tooltip> <div class="devsite-nav-item-title"> Emulator Suite </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/auth" track-type="navMenu" track-name="Authentication" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/auth" tooltip> <div class="devsite-nav-item-title"> Authentication </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/database" track-type="navMenu" track-name="Realtime Database" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/database" tooltip> <div class="devsite-nav-item-title"> Realtime Database </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/firestore" track-type="navMenu" track-name="Firestore" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/firestore" tooltip> <div class="devsite-nav-item-title"> Firestore </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/storage" track-type="navMenu" track-name="Storage" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/storage" tooltip> <div class="devsite-nav-item-title"> Storage </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/ml" track-type="navMenu" track-name="ML" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/ml" tooltip> <div class="devsite-nav-item-title"> ML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/hosting" track-type="navMenu" track-name="Hosting" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/hosting" tooltip> <div class="devsite-nav-item-title"> Hosting </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/functions" track-type="navMenu" track-name="Cloud Functions" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/functions" tooltip> <div class="devsite-nav-item-title"> Cloud Functions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/rules" track-type="navMenu" track-name="Security Rules" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/rules" tooltip> <div class="devsite-nav-item-title"> Security Rules </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/extensions" track-type="navMenu" track-name="Extensions" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/extensions" tooltip> <div class="devsite-nav-item-title"> Extensions </div> </a> </li> </ul> </div> </div> </div> </tab> <tab dropdown> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/release" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="release&Monitor" data-category="Site-Wide Custom Events" data-label="Tab: Release & Monitor"> Release & Monitor </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Release & Monitor" track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="release&Monitor" data-category="Site-Wide Custom Events" data-label="Tab: Release & Monitor" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/crashlytics" track-type="navMenu" track-name="Crashlytics" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/crashlytics" tooltip> <div class="devsite-nav-item-title"> Crashlytics </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/test-lab" track-type="navMenu" track-name="Test Lab" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/test-lab" tooltip> <div class="devsite-nav-item-title"> Test Lab </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/app-distribution" track-type="navMenu" track-name="App Distribution" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/app-distribution" tooltip> <div class="devsite-nav-item-title"> App Distribution </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/perf-mon" track-type="navMenu" track-name="Performance Monitoring" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/perf-mon" tooltip> <div class="devsite-nav-item-title"> Performance Monitoring </div> </a> </li> </ul> </div> </div> </div> </tab> <tab dropdown> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/engage" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="engage" data-category="Site-Wide Custom Events" data-label="Tab: Engage"> Engage </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Engage" track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="engage" data-category="Site-Wide Custom Events" data-label="Tab: Engage" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/analytics" track-type="navMenu" track-name="Analytics" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/analytics" tooltip> <div class="devsite-nav-item-title"> Analytics </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/remote-config" track-type="navMenu" track-name="Remote Config" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/remote-config" tooltip> <div class="devsite-nav-item-title"> Remote Config </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/predictions" track-type="navMenu" track-name="Predictions" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/predictions" tooltip> <div class="devsite-nav-item-title"> Predictions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/ab-testing" track-type="navMenu" track-name="A/B Testing" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/ab-testing" tooltip> <div class="devsite-nav-item-title"> A/B Testing </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/cloud-messaging" track-type="navMenu" track-name="Cloud Messaging" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/cloud-messaging" tooltip> <div class="devsite-nav-item-title"> Cloud Messaging </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/in-app-messaging" track-type="navMenu" track-name="In-App Messaging" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/in-app-messaging" tooltip> <div class="devsite-nav-item-title"> In-App Messaging </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/dynamic-links" track-type="navMenu" track-name="Dynamic Links" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/dynamic-links" tooltip> <div class="devsite-nav-item-title"> Dynamic Links </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/admob" track-type="navMenu" track-name="Google AdMob" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/admob" tooltip> <div class="devsite-nav-item-title"> Google AdMob </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/ads" track-type="navMenu" track-name="Google Ads" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/ads" tooltip> <div class="devsite-nav-item-title"> Google Ads </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/app-indexing" track-type="navMenu" track-name="App Indexing" track-metadata-position="nav" track-metadata-href="https://firebase.google.com/docs/app-indexing" tooltip> <div class="devsite-nav-item-title"> App Indexing </div> </a> </li> </ul> </div> </div> </div> </tab> <tab> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/reference" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="reference" data-category="Site-Wide Custom Events" data-label="Tab: Reference"> Reference </a> </tab> <tab> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/samples" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="samples" data-category="Site-Wide Custom Events" data-label="Tab: Samples"> Samples </a> </tab> <tab> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/libraries" class="gc-analytics-event " track-type="globalNav" track-metadata-position="nav" track-metadata-eventdetail="nav" track-name="libraries" data-category="Site-Wide Custom Events" data-label="Tab: Libraries"> Libraries </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/web/20210506173739/https://firebase.google.com/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="firebase" track-metadata-position="nav" track-metadata-eventdetail="nav"> <img src="https://web.archive.org/web/20210506173739im_/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/firebase/images/lockup.png" class="devsite-site-logo" alt="Firebase"> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list"> <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/products-build" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Products" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="products"> <span class="devsite-nav-text" tooltip> Products </span> <span class="devsite-nav-icon material-icons" data-icon="forward"> </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip menu="Products"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Products"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/use-cases" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Use Cases" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="useCases"> <span class="devsite-nav-text" tooltip> Use Cases </span> <span class="devsite-nav-icon material-icons" data-icon="forward"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/pricing" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Pricing" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="pricing"> <span class="devsite-nav-text" tooltip> Pricing </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="docs"> <span class="devsite-nav-text" tooltip> Docs </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip menu="Docs"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Docs"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="overview"> <span class="devsite-nav-text" tooltip> Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/guides" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Fundamentals" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="fundamentals"> <span class="devsite-nav-text" tooltip menu="_book"> Fundamentals </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip menu="Fundamentals"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Fundamentals"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/build" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Build" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="build"> <span class="devsite-nav-text" tooltip> Build </span> <span class="devsite-nav-icon material-icons" data-icon="forward"> </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip menu="Build"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Build"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/release" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Release & Monitor" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="release&Monitor"> <span class="devsite-nav-text" tooltip> Release & Monitor </span> <span class="devsite-nav-icon material-icons" data-icon="forward"> </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip menu="Release & Monitor"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Release & Monitor"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/engage" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Engage" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="engage"> <span class="devsite-nav-text" tooltip> Engage </span> <span class="devsite-nav-icon material-icons" data-icon="forward"> </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip menu="Engage"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Engage"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/reference" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="reference"> <span class="devsite-nav-text" tooltip> Reference </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/samples" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="samples"> <span class="devsite-nav-text" tooltip> Samples </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/libraries" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Libraries" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="libraries"> <span class="devsite-nav-text" tooltip> Libraries </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/community" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Community" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="community"> <span class="devsite-nav-text" tooltip> Community </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/support" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Support" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="support"> <span class="devsite-nav-text" tooltip> Support </span> </a> </li> <li class="devsite-nav-item"> <a href="//web.archive.org/web/20210506173739/https://console.firebase.google.com/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Go to console" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="goToConsole"> <span class="devsite-nav-text" tooltip> Go to console </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom" role="navigation"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/guides" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Fundamentals</span></a></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><devsite-expandable-nav collapsed> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"><span class="devsite-nav-text" tooltip>Get started with Firebase</span></div><ul class="devsite-nav-section"><li class="devsite-nav-item devsite-nav-expandable"><devsite-expandable-nav collapsed> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"><span class="devsite-nav-text" tooltip>Add Firebase to an app</span></div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/ios/setup" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>iOS</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/android/setup" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Android</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/web/setup" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Web</span></a></li></ul></devsite-expandable-nav></li><li class="devsite-nav-item devsite-nav-expandable"><devsite-expandable-nav collapsed> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"><span class="devsite-nav-text" tooltip>Add Firebase to a game</span></div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/games/setup" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/cpp/setup" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>C++</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/unity/setup" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Unity</span></a></li></ul></devsite-expandable-nav></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/admin/setup" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Add Firebase to a server</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><devsite-expandable-nav collapsed> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"><span class="devsite-nav-text" tooltip>Use Firebase with a framework</span></div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/flutter/setup" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Flutter</span></a></li></ul></devsite-expandable-nav></li><li class="devsite-nav-item devsite-nav-beta"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/api/workflow_set-up-and-manage-project" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Set up projects programmatically</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li></ul></devsite-expandable-nav></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><devsite-expandable-nav collapsed> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"><span class="devsite-nav-text" tooltip>Manage your Firebase projects</span></div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/learn-more" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Understand Firebase projects</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/locations" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Select locations for your project</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/multiprojects" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Configure multiple projects</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><devsite-expandable-nav collapsed> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"><span class="devsite-nav-text" tooltip>Understand billing</span></div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/billing/firebase-pricing-plans" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Firebase pricing plans</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/billing/avoid-surprise-bills" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Avoid surprise bills</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/billing/advanced-billing-alerts-logic" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Advanced billing alerts & logic</span></a></li></ul></devsite-expandable-nav></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/api-keys" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Learn about API keys for Firebase</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/pwa" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Use Firebase in PWAs</span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/bigquery-export" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Export project data to BigQuery</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/manage-installations" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Manage Firebase installations</span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/import-segments" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Import segments</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"><span class="devsite-nav-text" tooltip>Manage projects programmatically</span></div></li><li class="devsite-nav-item devsite-nav-beta"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/api/workflow_set-up-and-manage-project" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Use the REST API</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-expandable"><devsite-expandable-nav collapsed> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"><span class="devsite-nav-text" tooltip>Use the Admin SDK</span></div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/reference/admin/node/admin.projectManagement" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Node.js</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/reference/admin/java/reference/com/google/firebase/projectmanagement/package-summary" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Java</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/reference/admin/python/firebase_admin.project_management" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Python</span></a></li></ul></devsite-expandable-nav></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/provisioning/configure-oauth" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Configure OAuth identity providers for Firebase Auth</span></a></li><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"><span class="devsite-nav-text" tooltip>Manage project access (IAM)</span></div></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/iam/overview" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><devsite-expandable-nav collapsed> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"><span class="devsite-nav-text" tooltip>Roles</span></div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/iam/roles" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/iam/roles-basic" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Owner, Editor, Viewer roles</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><devsite-expandable-nav collapsed> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"><span class="devsite-nav-text" tooltip>Firebase predefined roles</span></div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/iam/roles-predefined" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/iam/roles-predefined-all-products" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Firebase-level roles</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/iam/roles-predefined-category" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Product-category roles</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/iam/roles-predefined-product" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Product-level roles</span></a></li></ul></devsite-expandable-nav></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/iam/roles-custom" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Custom roles</span></a></li></ul></devsite-expandable-nav></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/projects/iam/permissions" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Permissions</span></a></li></ul></devsite-expandable-nav></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><devsite-expandable-nav collapsed> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"><span class="devsite-nav-text" tooltip>Platforms and frameworks</span></div><ul class="devsite-nav-section"><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"><span class="devsite-nav-text" tooltip>iOS</span></div></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/ios/learn-more" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Learn about iOS + Firebase</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/ios/link-firebase-static-dynamic" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Link Firebase dependencies statically or dynamically</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/ios/app-store-data-collection" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Prepare for Apple App Store data disclosure requirements</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/ios/supporting-ios-14" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Supporting iOS 14</span></a></li><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"><span class="devsite-nav-text" tooltip>Android</span></div></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/android/learn-more" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Learn about Android + Firebase</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/android/android-play-services" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Dependencies of Firebase Android SDKs on Google Play services</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/android/integrate-play-games" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Integrate with your Play Games Services project</span></a></li><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"><span class="devsite-nav-text" tooltip>Web</span></div></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/web/learn-more" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Learn about Web + Firebase</span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/web/20210506173739/https://firebase.google.com/docs/web/modular-upgrade" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Upgrade to the v9 modular SDK</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/web/environments-js-sdk" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Supported environments for the Firebase JS SDK</span></a></li><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"><span class="devsite-nav-text" tooltip>Unity</span></div></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/unity/setup-alternative" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Additional installation options</span></a></li></ul></devsite-expandable-nav></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion devsite-nav-beta"><devsite-expandable-nav collapsed> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"><span class="devsite-nav-text" tooltip>Prototype and test with Emulator Suite</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/emulator-suite" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Introduction</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><devsite-expandable-nav collapsed> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"><span class="devsite-nav-text" tooltip>Connect your app and prototype</span></div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/emulator-suite/connect_and_prototype" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Get started</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/emulator-suite/connect_auth" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Connect to the Authentication emulator</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/emulator-suite/connect_rtdb" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Connect to the Realtime Database emulator</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/emulator-suite/connect_firestore" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Connect to the Cloud Firestore emulator</span></a></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/emulator-suite/connect_functions" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Connect to the Cloud Functions emulator</span></a></li></ul></devsite-expandable-nav></li><li class="devsite-nav-item"><a href="/web/20210506173739/https://firebase.google.com/docs/emulator-suite/install_and_configure" class="devsite-nav-title"><span class="devsite-nav-text" tooltip>Install, configure and integrate</span></a></li></ul></devsite-expandable-nav></li> </ul> <ul class="devsite-nav-list" menu="Products" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/products-build" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Build" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="build"> <span class="devsite-nav-text" tooltip> Build </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/products-release" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Release & Monitor" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="release&Monitor"> <span class="devsite-nav-text" tooltip> Release & Monitor </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/products-engage" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Engage" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="engage"> <span class="devsite-nav-text" tooltip> Engage </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Docs" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="overview"> <span class="devsite-nav-text" tooltip> Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/guides" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Fundamentals" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="fundamentals"> <span class="devsite-nav-text" tooltip> Fundamentals </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/build" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Build" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="build"> <span class="devsite-nav-text" tooltip> Build </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/release" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Release & Monitor" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="release&Monitor"> <span class="devsite-nav-text" tooltip> Release & Monitor </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/engage" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Engage" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="engage"> <span class="devsite-nav-text" tooltip> Engage </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/reference" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="reference"> <span class="devsite-nav-text" tooltip> Reference </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/samples" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="samples"> <span class="devsite-nav-text" tooltip> Samples </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/libraries" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Libraries" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="libraries"> <span class="devsite-nav-text" tooltip> Libraries </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Fundamentals" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/ios/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - iOS" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="addFirebase-IOS"> <span class="devsite-nav-text" tooltip> Add Firebase - iOS </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/android/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - Android" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="addFirebase-Android"> <span class="devsite-nav-text" tooltip> Add Firebase - Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/web/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - Web" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="addFirebase-Web"> <span class="devsite-nav-text" tooltip> Add Firebase - Web </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/cpp/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - C++" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="addFirebase-C++"> <span class="devsite-nav-text" tooltip> Add Firebase - C++ </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/unity/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - Unity" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="addFirebase-Unity"> <span class="devsite-nav-text" tooltip> Add Firebase - Unity </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/admin/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - Server environments" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="addFirebase-ServerEnvironments"> <span class="devsite-nav-text" tooltip> Add Firebase - Server environments </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/projects/learn-more" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Manage Projects" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="manageProjects"> <span class="devsite-nav-text" tooltip> Manage Projects </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/emulator-suite" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Use Emulator Suite" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="useEmulatorSuite"> <span class="devsite-nav-text" tooltip> Use Emulator Suite </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Build" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/emulator-suite" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Emulator Suite" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="emulatorSuite"> <span class="devsite-nav-text" tooltip> Emulator Suite </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/auth" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Authentication" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="authentication"> <span class="devsite-nav-text" tooltip> Authentication </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/database" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Realtime Database" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="realtimeDatabase"> <span class="devsite-nav-text" tooltip> Realtime Database </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/firestore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Firestore" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="firestore"> <span class="devsite-nav-text" tooltip> Firestore </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/storage" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Storage" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="storage"> <span class="devsite-nav-text" tooltip> Storage </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/ml" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ML" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="mL"> <span class="devsite-nav-text" tooltip> ML </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/hosting" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Hosting" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="hosting"> <span class="devsite-nav-text" tooltip> Hosting </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/functions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Cloud Functions" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="cloudFunctions"> <span class="devsite-nav-text" tooltip> Cloud Functions </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/rules" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Security Rules" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="securityRules"> <span class="devsite-nav-text" tooltip> Security Rules </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Extensions" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="extensions"> <span class="devsite-nav-text" tooltip> Extensions </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Release & Monitor" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/crashlytics" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Crashlytics" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="crashlytics"> <span class="devsite-nav-text" tooltip> Crashlytics </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/test-lab" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Test Lab" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="testLab"> <span class="devsite-nav-text" tooltip> Test Lab </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/app-distribution" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: App Distribution" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="appDistribution"> <span class="devsite-nav-text" tooltip> App Distribution </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/perf-mon" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance Monitoring" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="performanceMonitoring"> <span class="devsite-nav-text" tooltip> Performance Monitoring </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Engage" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/analytics" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Analytics" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="analytics"> <span class="devsite-nav-text" tooltip> Analytics </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/remote-config" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Remote Config" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="remoteConfig"> <span class="devsite-nav-text" tooltip> Remote Config </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/predictions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Predictions" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="predictions"> <span class="devsite-nav-text" tooltip> Predictions </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/ab-testing" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: A/B Testing" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="a/BTesting"> <span class="devsite-nav-text" tooltip> A/B Testing </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/cloud-messaging" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Cloud Messaging" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="cloudMessaging"> <span class="devsite-nav-text" tooltip> Cloud Messaging </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/in-app-messaging" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: In-App Messaging" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="in-AppMessaging"> <span class="devsite-nav-text" tooltip> In-App Messaging </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/dynamic-links" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Dynamic Links" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="dynamicLinks"> <span class="devsite-nav-text" tooltip> Dynamic Links </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/admob" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AdMob" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="googleAdMob"> <span class="devsite-nav-text" tooltip> Google AdMob </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/ads" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Ads" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="googleAds"> <span class="devsite-nav-text" tooltip> Google Ads </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/app-indexing" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: App Indexing" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav" track-name="appIndexing"> <span class="devsite-nav-text" tooltip> App Indexing </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav has-toc> <devsite-toc class="devsite-nav"></devsite-toc> <devsite-content> <article class="devsite-article"><style> /* Styles inlined from /styles/docs.css */ .center { text-align: center } /* Used in AdMob code examples */ .oldcode { opacity: .40; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); /* IE <= 7 */ filter:alpha(opacity=40); } .newcode { font-weight: bold; } /* Device Screenshots */ .deviceshot { max-width: 700px; max-height: 400px; } /* Start Changelog styles */ .badge { position: relative; top: -3px; border-radius: 16px; display: inline-block; width: 90px; height: 32px; line-height: 32px; margin-right: 10px; text-transform: uppercase; font-size: 13px; font-weight: 700; text-align: center; } /* Colours for each type of changelog entry. */ /* TODO: Change the colours to match the site colour scheme */ .badge-changed { background-color: #F4B400; color: #fff; } .badge-fixed { background-color: #4285F4; color: #fff; } .badge-important { background-color: #DB4437; color: #fff; } .badge-feature { background-color: #0F9D58; color: #fff; } .badge-deprecated { background-color: #DB4437; color: #fff; } .badge-issue { background-color: #DB4437; color: #fff; } .changelog > ul { padding-left: 0; } .changelog > ul > li { list-style-type: none; margin-bottom: 22px; } .firebase-support-release-page .changelog > ul { list-style-type: none; padding-left: 110px; } .firebase-release-roundup .changelog > ul { list-style-type: disc outside; padding-left: 40px; } .firebase-release-roundup .changelog > ul > li { list-style-type: disc outside; margin-bottom: 12px; } .release-changed::before, .release-feature::before, .release-fixed::before, .release-issue::before, .release-deprecated::before, .release-removed::before, .release-unchanged::before, .release-rules::before, .release-android::before, .release-android-bom::before, .release-ios::before, .release-admin::before, .release-cpp::before, .release-unity::before, .release-functions::before, .release-javascript::before { display: block; float: left; color: white; width: 100px; height: 32px; margin-left: -110px; margin-right: 10px; margin-top: -5px; padding-top: 4px; text-transform: uppercase; font-size: 13px; font-weight: 700; text-align: center; border-radius: 16px; } .release-changed::before { content: "changed"; background-color: #F4B400; } .release-feature::before { content: "feature"; background-color: #0F9D58; } .release-fixed::before { content: "fixed"; background-color: #4285F4; } .release-issue::before { content: "issue"; background-color: #DB4437; } .release-deprecated::before { content: "deprecated"; background-color: #E65100; } .release-removed::before { content: "removed"; background-color: #546E7A; } .release-unchanged::before { content: "no change"; background-color: #CCCCCC; } .release-android::before { content: "android"; background-color: #A4C639; } .release-android-bom::before { content: "android bom"; background-color: #A4C639; } .release-ios::before { text-transform: none; content: "iOS"; background-color: #007aff; } .release-admin::before { content: "admin"; background-color: #039BE5; } .release-cpp::before { content: "c++"; background-color: #FF8A65; } .release-unity::before { content: "unity"; background-color: #00cccc; } .release-functions::before { content: "functions"; background-color: #2C384A; } .release-javascript::before { content: "javascript"; background-color: #7e57c2; } .release-rules::before { content: "rules"; background-color: #1B3A57; } /* End Changelog styles */ /* Docs Overview page styles */ .docs-android, .docs-ios, .docs-web, .docs-cpp, .docs-unity { height: 64px; width: 64px; margin: 10px 16px 0 -16px; } .firebase-docs-overview .devsite-landing-row h2 { margin: 80px 0 -40px; } .devsite-landing-row-3-up .docs-landing-row-item { width: calc((100% - 80px)/2); display: inline-block; } .docs-landing-icon { font-size: 48px; height: 48px; margin: 11px; width: 48px; } .firebase-reference-list { display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin: 0 0 40px; padding: 0; } .firebase-reference-list-item { -ms-flex: 0 0 50%; flex: 0 0 50%; margin: 40px 0 0; padding: 0; } .firebase-reference-list-item > a { -ms-flex-align: center; align-items: center; display: -ms-flex; display: flex; } .firebase-reference-list-item > a:not(:hover) h3 { color: #424242; } .firebase-reference-list-item > a:not(:hover) li, .firebase-reference-list-item > a:not(:hover) p { color: #757575; } .firebase-reference-list-item .docs-landing-icon { -ms-flex-align: center; align-items: center; background-color: #f5f5f5; border-radius: 50%; -ms-flex: 0 0 88px; flex: 0 0 88px; height: 88px; -ms-justify-content: center; justify-content: center; margin: 0 16px 0 0; padding: 20px; } .firebase-reference-list-item h3 { -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 18px; line-height: 28px; margin: 0; } .firebase-reference-list-item ul { list-style: none; padding: 0; } .docs-android, .docs-ios, .docs-web, .docs-cpp, .docs-unity { height: 88px; width: auto; } .firebase-reference-list-item.docs-android .docs-landing-icon { color: #00bfa5; } .firebase-reference-list-item.docs-cpp .docs-landing-icon { color: #fd8c09; } .firebase-reference-list-item.docs-ios .docs-landing-icon { color: #16aaca; } .firebase-reference-list-item.docs-unity .docs-landing-icon { color: #000000; } .firebase-reference-list-item.docs-web .docs-landing-icon { color: #c52062; } .firebase-reference-list-item.docs-http .docs-landing-icon { color: #3F51B5; } @media (max-width: 1000px) { .firebase-reference-list { -ms-flex-direction: column; flex-direction: column; } } /* end Docs Overview page styles */ /* Full-page platform selector for Crashlytics docs */ /* Note: h3 in selector content must include hide-from-toc */ .full-page-selector, .full-page-selector-content { border: none; font-size: inherit; } .full-page-selector > .kd-buttonbar { margin: 32px 0px; } .full-page-selector > section { display: none; } .full-page-selector-content > .selected { padding: 0; font-size: inherit; } .full-page-selector-content > .kd-buttonbar { display: none; } .select-page { display: none; } .select-page + .ds-selector-tabs, .after-selection ~ .ds-selector-tabs { border: none; font-size: inherit; } .select-page + .ds-selector-tabs > .kd-buttonbar { margin: 32px 0px; } .select-page + .ds-selector-tabs > section { display: none; } .after-selection ~ .ds-selector-tabs > .selected { padding: 0; font-size: inherit; } .after-selection ~ .ds-selector-tabs > section p { line-height: 24px; } .after-selection ~ .ds-selector-tabs > .kd-buttonbar { display: none; } /* End full-page platform selector */ /* Custom beta and alpha indicators (v1 format, followed by v2 format) */ .devsite-nav-alpha .devsite-nav-icon::before, .devsite-nav-icon[data-icon="alpha"]::before { content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMuMjA2IDE1YTU0LjIxNCA1NC4yMTQgMCAwIDEtLjkyLTIuNTc4bC0uMTQtLjQxNGE4MS43NiA4MS43NiAwIDAgMC0uMTM2LS40MDJDMTAuODUgMTMuNjcyIDkuNTYyIDE0LjUgNy41IDE0LjUgNC44MSAxNC41IDMgMTIuNjE2IDMgOXMxLjgxLTUuNSA0LjUtNS41YzIuMDYyIDAgMy4zNS44MjggNC41MSAyLjg5NGwuMTM3LS40MDIuMTM5LS40MTRjLjM4LTEuMTI3LjY1My0xLjkwMi45Mi0yLjU3OGgyLjE2NmMtLjM2NC44My0uNjcyIDEuNjgtMS4xOSAzLjIxN2wtLjE0LjQxM0E1Ny45OSA1Ny45OSAwIDAgMSAxMy4xOTQgOWMuMjc1LjcxLjU1NCAxLjQ5OC44NDggMi4zN2wuMTQuNDEzYy41MTggMS41MzguODI2IDIuMzg3IDEuMTkgMy4yMTdoLTIuMTY2ek03LjUgNS41QzUuOTMyIDUuNSA1IDYuNDcgNSA5YzAgMi41My45MzIgMy41IDIuNSAzLjUgMS40OTcgMCAyLjQ0NC0uOTE3IDMuNTM1LTMuNUM5Ljk0NCA2LjQxNyA4Ljk5NyA1LjUgNy41IDUuNXoiIGZpbGw9InJnYmEoMCwwLDAsLjM4KSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+'); } .devsite-nav-beta .devsite-nav-icon::before, .devsite-nav-icon[data-icon="beta"]::before { content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuMjM2IDcuNjgzQTQgNCAwIDAgMSAxMCAxNUg3djJINVY0YTIgMiAwIDAgMSAyLTJoMi41YTMuNSAzLjUgMCAwIDEgMi43MzYgNS42ODN6TTcgMTNoM2EyIDIgMCAxIDAgMC00SDd2NHptMC02aDIuNWExLjUgMS41IDAgMCAwIDAtM0g3djN6IiBmaWxsPSJyZ2JhKDAsMCwwLC4zOCkiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg=='); } .firebase-platform-label { font: 500 12px/24px Roboto,sans-serif; } /* Full-page platform selector dropdown */ /* Note: use menu variables in _elements.html file */ .full-page-selector-dropdown { border: none; position: relative; float: left; display: inline-block; } .full-page-selector-dropdown > .ds-selector-tabs { display: none; position: absolute; min-width: 160px; z-index: 1; } .full-page-selector-dropdown:hover .ds-selector-tabs { display: block; margin: 0; } .full-page-selector-dropdown:hover .kd-tabbutton { display: block; border: none; height: inherit; text-align: left; } .full-page-selector-dropdown:hover .kd-buttonbar { border: none; height: inherit; } .full-page-selector-dropdown h3:hover { color: white; background-color: #039be5; } .full-page-selector-dropdown:hover .devsite-overflow-menu-button { display: none; } </style> <div class="devsite-banner devsite-banner-announcement"> <div class="devsite-banner-message"> <div class="devsite-banner-message-text"> <style> .devsite-banner-announcement { background: #e1f3fc; color: #0288d1; font-weight: 500; } .devsite-banner-announcement a { color: #0288d1; font-weight: 700; } .devsite-banner-announcement a:link, .devsite-banner-announcement a:visited { background: 0; } .devsite-banner-announcement a:hover, .devsite-banner-announcement a:focus { text-decoration: none; } .devsite-banner-announcement .devsite-banner-message-text { margin: 0 auto; } </style> Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As;, earn Google Developer profile badges, and more. <a href="https://web.archive.org/web/20210506173739/https://events.google.com/io/?utm_source=firebase&utm_medium=embedded_marketing&utm_campaign=svd-2021-fb" target="_blank" rel="noopener noreferrer">Register now</a> </div> </div> </div> <div class="devsite-article-meta" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Firebase"> Firebase </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail=""> Docs </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.archive.org/web/20210506173739/https://firebase.google.com/docs/guides" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail=""> Fundamentals </a> </li> </ul> <devsite-thumb-rating position="header"> <template class="thumb-down-categories"> [{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] </template> <template class="thumb-up-categories"> [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }] </template> <template class="thumb-rating-feedback"> <devsite-feedback position="thumb-rating" project-name="Firebase" product-id="719752" bucket="" context="" version="t-devsite-webserver-20210429-r00-rc01.434909919929661024" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="thumb-rating" project-feedback-url="https://firebase.google.com/support/contact/bugs-features/" project-icon="https://firebase.google.com/_static/firebase/images/logo.png" project-support-url="https://firebase.google.com/support/" feedback-type="thumb-rating"> <button> Need to tell us more? </button> </devsite-feedback> </template> </devsite-thumb-rating> </div> <devsite-feedback position="header" project-name="Firebase" product-id="719752" bucket="" context="" version="t-devsite-webserver-20210429-r00-rc01.434909919929661024" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="header" project-feedback-url="https://firebase.google.com/support/contact/bugs-features/" project-icon="https://firebase.google.com/_static/firebase/images/logo.png" project-support-url="https://firebase.google.com/support/" feedback-type="thumb-rating"> <button> Send feedback </button> </devsite-feedback> <h1 class="devsite-page-title">Add Firebase to your JavaScript project</h1> <devsite-toc class="devsite-nav" devsite-toc-embedded> </devsite-toc> <div class="devsite-article-body clearfix "> <p>Follow this guide to use the Firebase JavaScript SDK in your web app or as a client for end-user access, for example, in a Node.js desktop or IoT application.</p> <aside class="caution">To set up administrative access from privileged environments (such as servers) <a href="/web/20210506173739/https://firebase.google.com/docs/admin/setup">set up the Firebase Admin SDK</a> instead. </aside> <h2 id="prerequisites" data-text="Prerequisites">Prerequisites</h2> <ul> <li><p>Install your preferred editor or IDE.</p></li> <li><p><a href="//web.archive.org/web/20210506173739/https://console.firebase.google.com/" class="external">Sign into Firebase</a> using your Google account.</p></li> </ul> <p>If you don't already have a JavaScript project and just want to try out a Firebase product, you can download one of our <a href="/web/20210506173739/https://firebase.google.com/docs/samples">quickstart samples</a>.</p> <h2 id="create-firebase-project" data-text="Step 1: Create a Firebase project"><strong>Step 1</strong>: Create a Firebase project</h2> <p>Before you can add Firebase to your JavaScript app, you need to create a Firebase project to connect to your app.</p> <aside class="note"><strong>Note:</strong><span> If you already have a Firebase-registered mobile app and it shares Firebase resources with your JavaScript app, skip this step and configure your JavaScript app to use the same project as your mobile app.</span></aside> <p>Visit <a href="/web/20210506173739/https://firebase.google.com/docs/projects/learn-more">Understand Firebase Projects</a> to learn more about Firebase projects and best practices for adding apps to projects.</p> <section class="expandable"> <p class="showalways"><strong>Create a Firebase project</strong></p> <ol> <li> <p>In the <a href="//web.archive.org/web/20210506173739/https://console.firebase.google.com/" class="link external gc-analytics-event" data-category="console" data-action="linkClick">Firebase console</a>, click <strong>Add project</strong>, then select or enter a <strong>Project name</strong>.</p> <p>If you have an existing Google Cloud project, you can select the project from the dropdown menu to add Firebase resources to that project.</p> </li> <li> <p><em>(Optional)</em> If you are creating a new project, you can edit the <strong>Project ID</strong>.</p> <p>Firebase automatically assigns a unique ID to your Firebase project. Visit <a href="/web/20210506173739/https://firebase.google.com/docs/projects/learn-more#project-id">Understand Firebase Projects</a> to learn about how Firebase uses the project ID.</p> <aside class="caution"><strong>After Firebase provisions resources for your Firebase project, you cannot change your project ID.</strong> <br>To use a specific identifier, you must edit your project ID during this setup step. </aside> </li> <li> <p>Click <strong>Continue</strong>.</p> </li> <li> <p><em>(Optional)</em> Set up Google Analytics for your project, which enables you to have an optimal experience using any of the following Firebase products:</p> <table class="columns"> <tr> <td> <ul> <li><a href="/web/20210506173739/https://firebase.google.com/docs/crashlytics">Firebase Crashlytics</a></li> <li><a href="/web/20210506173739/https://firebase.google.com/docs/predictions">Firebase Predictions</a></li> </ul> </td> <td> <ul> <li><a href="/web/20210506173739/https://firebase.google.com/docs/cloud-messaging">Firebase Cloud Messaging</a></li> <li><a href="/web/20210506173739/https://firebase.google.com/docs/in-app-messaging">Firebase In-App Messaging</a></li> </ul> </td> <td> <ul> <li><a href="/web/20210506173739/https://firebase.google.com/docs/remote-config">Firebase Remote Config</a></li> <li><a href="/web/20210506173739/https://firebase.google.com/docs/ab-testing">Firebase A/B Testing</a></li> </ul> </td> </tr> </table> <p>When prompted, select to use an existing <a href="//web.archive.org/web/20210506173739/https://support.google.com/analytics/answer/1009618?ref_topic=3544906&authuser=0">Google Analytics account</a> or to create a new account.<br> If you choose to create a new account, select your <a href="/web/20210506173739/https://firebase.google.com/docs/projects/locations">Analytics reporting location</a>, then accept the data sharing settings and Google Analytics terms for your project. </p> <aside class="note">You can always set up Google Analytics later in the <a href="//web.archive.org/web/20210506173739/https://console.firebase.google.com/project/_/settings/integrations"><em>Integrations</em></a> tab of your <span class="material-icons" aria-hidden="true" translate="no">settings</span> <em>Project settings</em>. </aside> </li> <li> <p>Click <strong>Create project</strong> (or <strong>Add Firebase</strong>, if you're using an existing Google Cloud project).</p> </li> </ol> <p>Firebase automatically provisions resources for your Firebase project. When the process completes, you'll be taken to the overview page for your Firebase project in the Firebase console.</p> </section> <h2 id="register-app" data-text="Step 2: Register your app with Firebase"><strong>Step 2</strong>: Register your app with Firebase</h2> <p>After you have a Firebase project, you can add your web app to it.</p> <p>Visit <a href="/web/20210506173739/https://firebase.google.com/docs/projects/learn-more#best-practices">Understand Firebase Projects</a> to learn more about best practices and considerations for adding apps to a Firebase project.</p> <ol> <li><p>In the center of the <a href="//web.archive.org/web/20210506173739/https://console.firebase.google.com/" class="external">Firebase console's project overview page</a>, click the <strong>Web</strong> icon (<span title="Web" aria-label="Web" class="gmp-icons material-icons" aria-hidden="true" translate="no">plat_web</span>) to launch the setup workflow.</p> <p>If you've already added an app to your Firebase project, click <strong>Add app</strong> to display the platform options.</p></li> <li><p>Enter your app's nickname.<br> This nickname is an internal, convenience identifier and is only visible to you in the Firebase console.</p></li> <li><p><em>(Optional)</em> Set up Firebase Hosting for your web app.</p> <ul> <li><p>You can set up Firebase Hosting now or <a href="/web/20210506173739/https://firebase.google.com/docs/hosting/quickstart">later</a>. You can also link your Firebase Web App to a Hosting site at any time in your <a href="//web.archive.org/web/20210506173739/https://console.firebase.google.com/project/_/settings/general/">Project settings</a>.</p></li> <li><p>If you choose to set up Hosting up now, select a site from the dropdown list to link to your Firebase Web App.</p> <ul> <li><p>This list displays your project's default Hosting site and any <a href="/web/20210506173739/https://firebase.google.com/docs/hosting/multisites">other sites</a> that you've set up in your project.</p></li> <li><p>Any site that you've already linked to a Firebase Web App is unavailable for additional linking. Each Hosting site can only be linked to a single Firebase Web App.</p></li> </ul></li> </ul> <aside class="note"><strong>Note:</strong><span> Firebase Hosting is <strong><em>not required</em></strong> for you to use Firebase products with your web app.</span></aside></li> <li><p>Click <strong>Register app</strong>.</p></li> </ol> <h2 id="add-sdks-initialize" data-text="Step 3: Add Firebase SDKs and initialize Firebase"><strong>Step 3</strong>: Add Firebase SDKs and initialize Firebase</h2> <p>Firebase provides JavaScript libraries for most Firebase products, including Remote Config, FCM, and more. You can add any of the <a href="#available-libraries">available libraries</a> to your app.</p> <p>How you add Firebase SDKs to your Web app depends on whether you've chosen to use Firebase Hosting for your app, what tooling you're using with your app (like a module bundler), or if you're configuring a Node.js app. For more help choosing between these alternatives, see <a href="/web/20210506173739/https://firebase.google.com/docs/web/learn-more#ways-to-add-web-sdks">Ways to add the Web SDKs to your app</a>.</p> <p>If you're interested in trying out the <a href="/web/20210506173739/https://firebase.google.com/docs/web/learn-more#modular-version">new Beta SDK</a> optimized for modular app development, select the option for version 9 (Beta). Keep in mind that there are no technical support obligations in a beta release.</p> <div> <devsite-nav-buttons id="#add-sdks-initialize" name="sdk_version"> <button value="v8" default>Version 8</button> <button value="v9">Version 9 (Beta)</button> </devsite-nav-buttons> </div> <div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="with-npm_1" data-text=" With npm "> With npm </h3><p>You can configure partial import of the Firebase JavaScript SDK and only load the Firebase products that you need. If you're using a bundler (like Browserify or webpack), you can <code translate="no" dir="ltr">import</code> individual Firebase products when you need them.</p> <aside class="note"><strong>Note:</strong><span> You can use this option even if you use Firebase Hosting, but make sure to add your <a href="#config-object">Firebase config object</a> before initializing Firebase.</span></aside> <ol> <li><p>Install the Firebase JavaScript SDK:</p> <ol> <li><p>If you don't already have a <code translate="no" dir="ltr">package.json</code> file, create one by running the following command from the root of your JavaScript project:</p> <p><pre class="devsite-terminal" translate="no" dir="ltr">npm init</pre></p></li> <li><p>Install the <code translate="no" dir="ltr">firebase</code> npm package and save it to your <code translate="no" dir="ltr">package.json</code> file by running:</p> <p><pre class="devsite-terminal" translate="no" dir="ltr">npm install --save firebase</pre></p></li> </ol></li> <li><p>To include only <a href="#libraries-bundle">specific Firebase products</a> (like Authentication and Cloud Firestore), <code translate="no" dir="ltr">import</code> Firebase modules:</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">// Firebase App (the core Firebase SDK) is always required and must be listed first import firebase from "firebase/app"; // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import // import * as firebase from "firebase/app" // If you enabled Analytics in your project, add the Firebase SDK for Analytics import "firebase/analytics"; // Add the Firebase products that you want to use import "firebase/auth"; import "firebase/firestore"; </code></pre></li> <li><p>Initialize Firebase in your app:</p> <pre class="prettyprint" translate="no" dir="ltr"> // TODO: Replace the following with your app's <a href="#config-object">Firebase project configuration</a> // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </pre></li> </ol></section> <section><h3 id="from-the-cdn_1" data-text=" From the CDN "> From the CDN </h3><p>You can configure partial import of the Firebase JavaScript SDK and only load the Firebase products that you need. Firebase stores each library of the Firebase JavaScript SDK on our global CDN (content delivery network).</p> <aside class="note"><strong>Note:</strong><span> You can use this option even if you use Firebase Hosting, but make sure to add your <a href="#config-object">Firebase config object</a> before initializing Firebase.</span></aside><ol> <li><p>To include only <a href="#libraries-cdn">specific Firebase products</a> (for example, Authentication and Cloud Firestore), add the following scripts to the bottom of your <code translate="no" dir="ltr"><body></code> tag, but before you use any Firebase services:</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr"><body>   <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-app.js"></script>  <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-analytics.js"></script>  <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-firestore.js"></script> </body> </code></pre> <aside class="note">You can optionally <a href="#delay-sdks-cdn">delay loading of Firebase SDKs</a> until the entire page has loaded.</aside> <section class="expandable"> <p class="showalways">Include the entire Firebase JavaScript SDK, rather than individual SDKs <em>(not recommended for production apps)</em></p> <aside class="caution">Loading the entire SDK is not efficient for production web apps.<br> Use this option for development purposes only. </aside> <pre class="prettyprint" translate="no" dir="ltr"> <body>   <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase.js"></script> </body> </pre> </section> <p><br></p></li> <li><p>Initialize Firebase in your app:</p> <pre class="prettyprint" translate="no" dir="ltr"> <body>  <script> // TODO: Replace the following with your app's <a href="#config-object">Firebase project configuration</a> // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script> </body> </pre></li> </ol></section> <section><h3 id="from-hosting-urls_1" data-text=" From Hosting URLs "> From Hosting URLs </h3><p>When you use Firebase Hosting, you can configure your app to load the Firebase JavaScript SDK libraries dynamically from reserved URLs. Learn more about <a href="/web/20210506173739/https://firebase.google.com/docs/hosting/reserved-urls">adding SDKs via reserved Hosting URLs</a>.</p> <p>With this setup option, after you <a href="/web/20210506173739/https://firebase.google.com/docs/hosting/quickstart">deploy to Firebase</a>, your app automatically pulls the Firebase configuration object from the Firebase project to which you've deployed. You can deploy the same codebase to multiple Firebase projects, but you don't have to track the Firebase configuration that you're using for <code translate="no" dir="ltr">firebase.initializeApp()</code>.</p> <p>This setup option also works for <a href="#test-locally">testing your web app locally</a>.</p> <aside class="note"><strong>Note:</strong><span> You aren't required to use this option if you use Firebase Hosting, but this option does offer a convenience for managing your Firebase configuration when initializing Firebase.</span></aside><ol> <li><p>To include only <a href="#libraries-hosting-urls">specific Firebase products</a> (for example, Analytics, Authentication, or Cloud Firestore), add the following scripts to the bottom of your <code translate="no" dir="ltr"><body></code> tag, but before you use any Firebase services:</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr"><body>   <script src="/__/firebase/8.5.0/firebase-app.js"></script>  <script src="/__/firebase/8.5.0/firebase-analytics.js"></script>  <script src="/__/firebase/8.5.0/firebase-auth.js"></script> <script src="/__/firebase/8.5.0/firebase-firestore.js"></script> </body> </code></pre> <section class="expandable"> <p class="showalways">Include the entire Firebase JavaScript SDK, rather than individual SDKs <em>(not recommended for production apps)</em></p> <aside class="caution">Loading the entire SDK is not efficient for production web apps.<br> Use this option for development purposes only. </aside> <pre class="prettyprint" translate="no" dir="ltr"> <body>   <script src="/__/firebase/8.5.0/firebase.js"></script> <body> </pre> </section> <p><br></p></li> <li><p>Initialize Firebase in your app (no need to include your Firebase config object when using reserved Hosting URLs):</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr"><body>   <script src="/__/firebase/init.js"></script> </body> </code></pre></li> </ol></section> <section><h3 id="node.js-apps_1" data-text=" Node.js apps "> Node.js apps </h3><aside class="caution"><strong>Caution:</strong><span> The following instructions are for using the Firebase JavaScript SDK as a client for end-user access (for example, in a Node.js desktop or IoT application). To set up administrative access from privileged environments (such as servers), <a href="/web/20210506173739/https://firebase.google.com/docs/admin/setup">set up the Firebase Admin SDK</a> instead.</span></aside><aside class="note"><strong>Note:</strong><span> You can use this option even if you use Firebase Hosting, but make sure to add your <a href="#config-object">Firebase config object</a> before initializing Firebase.</span></aside><ol> <li><p>Install the Firebase JavaScript SDK:</p> <ol> <li><p>If you don't already have a <code translate="no" dir="ltr">package.json</code> file, create one by running the following command from the root of your JavaScript project:</p> <pre class="devsite-terminal" translate="no" dir="ltr">npm init</pre></li> <li><p>Install the <code translate="no" dir="ltr">firebase</code> npm package and save it to your <code translate="no" dir="ltr">package.json</code> file by running:</p> <pre class="devsite-terminal" translate="no" dir="ltr">npm install --save firebase</pre></li> </ol></li> <li><p>Use one of the following options to use the Firebase module in your app:</p> <ul> <li><p><strong>You can <code translate="no" dir="ltr">require</code> modules from any JavaScript file</strong></p> <p>To include only <a href="#libraries-nodejs">specific Firebase products</a> (like Authentication and Cloud Firestore):</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">// Firebase App (the core Firebase SDK) is always required and // must be listed before other Firebase SDKs var firebase = require("firebase/app"); // Add the Firebase products that you want to use require("firebase/auth"); require("firebase/firestore"); </code></pre> <section class="expandable"> <p class="showalways">Include the entire Firebase JavaScript SDK, rather than individual SDKs <em>(not recommended for production apps)</em></p> <aside class="caution">Loading the entire SDK is not efficient for production web apps.<br> Use this option for development purposes only. </aside> <pre class="prettyprint" translate="no" dir="ltr">var firebase = require("firebase");</pre> </section> <p><br></p></li> <li><p><strong>You can use ES2015 to <code translate="no" dir="ltr">import</code> modules</strong></p> <p>To include only <a href="#libraries-nodejs">specific Firebase products</a> (like Authentication and Cloud Firestore):</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">// Firebase App (the core Firebase SDK) is always required and // must be listed before other Firebase SDKs import firebase from "firebase/app"; // Add the Firebase services that you want to use import "firebase/auth"; import "firebase/firestore"; </code></pre> <section class="expandable"> <p class="showalways">Include the entire Firebase JavaScript SDK, rather than individual SDKs <em>(not recommended for production apps)</em></p> <aside class="caution">Loading the entire SDK is not efficient for production web apps.<br> Use this option for development purposes only. </aside> <pre class="prettyprint" translate="no" dir="ltr">import firebase from "firebase";</pre> </section> <aside class="note"><strong>Note:</strong><span> <a href="//web.archive.org/web/20210506173739/https://nodejs.org/api/esm.html#esm_ecmascript_modules">Using the <code translate="no" dir="ltr">import</code> syntax directly with Node.js is experimental</a>, but you can convert to CommonJS format (<code translate="no" dir="ltr">require</code> syntax) using compilers like <a href="//web.archive.org/web/20210506173739/https://babeljs.io/docs/en/">Babel</a>.</span></aside></li> </ul></li> <li><p>Initialize Firebase in your app:</p> <pre class="prettyprint" translate="no" dir="ltr"> // TODO: Replace the following with your app's <a href="#config-object">Firebase project configuration</a> // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </pre></li> </ol></section> </div> <h3 id="config-object" data-text="Learn about the Firebase config object">Learn about the Firebase config object</h3> <p>To initialize Firebase in your app, you need to provide your app's Firebase project configuration. You can <a href="//web.archive.org/web/20210506173739/https://support.google.com/firebase/answer/7015592" class="external">obtain your Firebase config object</a> at any time.</p> <ul> <li><p>If you use <a href="/web/20210506173739/https://firebase.google.com/docs/hosting/reserved-urls">reserved Hosting URLs</a>, your Firebase config is automatically pulled from your Firebase project, so you don't need to explicitly provide your config object in your code.</p></li> <li><p>We do not recommend manually editing your config object, especially the following required "Firebase options": <code translate="no" dir="ltr">apiKey</code>, <code translate="no" dir="ltr">projectId</code>, and <code translate="no" dir="ltr">appID</code>. If you initialize your app with invalid or missing values for these required "Firebase options", users of your app may experience serious issues.</p></li> <li><p>If you enabled Google Analytics in your Firebase project, your config object contains the field <code translate="no" dir="ltr">measurementId</code>. Learn more about this field in the <a href="/web/20210506173739/https://firebase.google.com/docs/analytics/get-started?platform=web#add-sdk">Analytics getting started page</a>.</p></li> </ul> <aside class="note"><strong>Note:</strong><span> The Firebase config object contains unique, but non-secret identifiers for your Firebase project. <br>Visit <a href="/web/20210506173739/https://firebase.google.com/docs/projects/learn-more#config-files-objects">Understand Firebase Projects</a> to learn more about this config object.</span></aside> <p>Here's the format of a config object with all services enabled (these values are automatically populated):</p> <pre class="prettyprint readonly" translate="no" dir="ltr"> // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { apiKey: <b>"<var translate="no">API_KEY</var>",</b> authDomain: <b>"<var translate="no">PROJECT_ID</var>.firebaseapp.com",</b> databaseURL: <b>"https://<var translate="no">PROJECT_ID</var>.firebaseio.com",</b> projectId: <b>"<var translate="no">PROJECT_ID</var>",</b> storageBucket: <b>"<var translate="no">PROJECT_ID</var>.appspot.com",</b> messagingSenderId: <b>"<var translate="no">SENDER_ID</var>",</b> appId: <b>"<var translate="no">APP_ID</var>",</b> measurementId: <b>"G-<var translate="no">MEASUREMENT_ID</var>",</b> }; </pre> <p>Here's a config object with <em>example</em> values:</p> <pre class="prettyprint" translate="no" dir="ltr"> // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO", authDomain: "myapp-project-123.firebaseapp.com", databaseURL: "https://myapp-project-123.firebaseio.com", projectId: "myapp-project-123", storageBucket: "myapp-project-123.appspot.com", messagingSenderId: "65211879809", appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c", measurementId: "G-8GSGZQ44ST" }; </pre> <h2 id="install-cli-deploy" data-text="Step 4: (Optional) Install CLI and deploy to Firebase Hosting"><strong>Step 4</strong>: <em>(Optional)</em> Install CLI and deploy to Firebase Hosting</h2> <p>If you linked your Firebase Web App with a Firebase Hosting site, you can deploy your site's content and configuration now (when setting up your Web App) or anytime later.</p> <p>To deploy to Firebase, you'll use the Firebase CLI, a command-line tool.</p> <ol> <li><p>Visit the Firebase CLI documentation to learn how to <a href="/web/20210506173739/https://firebase.google.com/docs/cli#install_the_firebase_cli">install the CLI</a> or <a href="/web/20210506173739/https://firebase.google.com/docs/cli#update-cli">update to its latest version</a>.</p></li> <li><p><a href="/web/20210506173739/https://firebase.google.com/docs/hosting/quickstart#initialize">Initialize your Firebase project.</a> Run the following command from the root of your local app directory:</p> <pre class="devsite-terminal" translate="no" dir="ltr">firebase init</pre> <p><section class="expandable"> <p class="showalways"><b>What does this initialization command do?</b></p></p> <ul> <li><p>Links your local app directory with Firebase</p></li> <li><p>Generates a <a href="/web/20210506173739/https://firebase.google.com/docs/cli#the_firebasejson_file"><code translate="no" dir="ltr">firebase.json</code> file</a> (a required file for Firebase Hosting)</p></li> <li><p>Prompts you to specify a public root directory which contains your public static files (HTML, CSS, JS, etc.)</p> <p>The default name for the directory that Firebase looks for is "public". You can also <a href="/web/20210506173739/https://firebase.google.com/docs/hosting/full-config#public">set the public directory</a> later by directly modifying your <code translate="no" dir="ltr">firebase.json</code> file.</p></li> </ul> <p></section></p></li> <li><p>Deploy your content and hosting configuration to Firebase Hosting.</p> <div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="default-hosting-site" data-text=" Default Hosting site "> Default Hosting site </h3><p>By default, every Firebase project has free subdomains on the <code translate="no" dir="ltr">web.app</code> and <code translate="no" dir="ltr">firebaseapp.com</code> domains (<nobr><code translate="no" dir="ltr"><var translate="no">PROJECT_ID</var>.web.app</code></nobr> and <nobr><code translate="no" dir="ltr"><var translate="no">PROJECT_ID</var>.firebaseapp.com</code></nobr>).</p> <ol> <li><p>Deploy to your site. Run the following command from your app's root directory:</p> <pre class="devsite-terminal" translate="no" dir="ltr">firebase deploy</pre></li> <li><p>View your site at either of your default sites:</p> <ul> <li><code translate="no" dir="ltr"><var translate="no">PROJECT_ID</var>.web.app</code></li> <li><code translate="no" dir="ltr"><var translate="no">PROJECT_ID</var>.firebaseapp.com</code></li> </ul></li> </ol></section> <section><h3 id="non-default-hosting-site" data-text=" Non-default Hosting site "> Non-default Hosting site </h3><p>Firebase projects support <a href="/web/20210506173739/https://firebase.google.com/docs/hosting/multisites">multiple sites</a> (these are considered your <em>non-default sites</em>). You can add additional sites to your project either during the console's Web App setup workflow or from the console's <a href="//web.archive.org/web/20210506173739/https://console.firebase.google.com/project/_/hosting/main">Hosting page</a>.</p> <aside class="caution">The quickstart instructions provided below are for initial development only. For production apps, follow the <a href="/web/20210506173739/https://firebase.google.com/docs/hosting/multisites">best practices</a> for setting up deployments for your additional sites. </aside> <ol> <li><p>Add your site to your <a href="/web/20210506173739/https://firebase.google.com/docs/cli#the_firebasejson_file"><code translate="no" dir="ltr">firebase.json</code> file</a> (which was created during <code translate="no" dir="ltr">firebase init</code>).</p> <p>Note that this <code translate="no" dir="ltr">firebase.json</code> configuration assumes that you have separate repositories for each of your sites.</p> <pre class="prettyprint" translate="no" dir="ltr"> { "hosting": { <strong>"site": "<var translate="no">SITE_ID</var>",</strong> "public": "public", // ... } } </pre></li> <li><p>Deploy to your site. Run the following command from your app's root directory:</p> <pre class="devsite-terminal" translate="no" dir="ltr">firebase deploy --only hosting:<var translate="no">SITE_ID</var></pre></li> <li><p>View your site at either:</p> <ul> <li><code translate="no" dir="ltr"><var translate="no">SITE_ID</var>.web.app</code></li> <li><code translate="no" dir="ltr"><var translate="no">SITE_ID</var>.firebaseapp.com</code></li> </ul></li> </ol></section> </div></li> </ol> <h2 id="namespace" data-text="Step 5: Access Firebase in your app"><strong>Step 5</strong>: Access Firebase in your app</h2> <p>The Firebase JavaScript SDK supports the following Firebase products. Each product is optional and can be accessed as shown.</p> <p>Learn about the available methods in the <a href="/web/20210506173739/https://firebase.google.com/docs/reference/js">Firebase JavaScript reference documentation</a>.</p> <table> <thead> <tr> <th><strong>Firebase product</strong></th> <th><strong>Namespace (v8 and lower)</strong></th> <th><strong>Web</strong></th> <th><strong>Node.js</strong></th> </tr> </thead> <tbody> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/analytics/get-started?platform=web">Analytics</a></td> <td><code translate="no" dir="ltr">firebase.analytics()</code></td> <td><span class="compare-yes"></span></td> <td><span class="compare-no"></span></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/auth/web/start">Authentication</a></td> <td><code translate="no" dir="ltr">firebase.auth()</code></td> <td><span class="compare-yes"></span></td> <td><span class="compare-yes"></span></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/firestore/quickstart">Cloud Firestore</a></td> <td><code translate="no" dir="ltr">firebase.firestore()</code></td> <td><span class="compare-yes"></span></td> <td><span class="compare-yes"></span></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/functions/callable#call_the_function">Cloud Functions for Firebase Client SDK</a></td> <td><code translate="no" dir="ltr">firebase.functions()</code></td> <td><span class="compare-yes"></span></td> <td><span class="compare-yes"></span></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/cloud-messaging/js/client">Cloud Messaging</a></td> <td><code translate="no" dir="ltr">firebase.messaging()</code></td> <td><span class="compare-yes"></span></td> <td><span class="compare-no"></span></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/storage/web/start">Cloud Storage</a></td> <td><code translate="no" dir="ltr">firebase.storage()</code></td> <td><span class="compare-yes"></span></td> <td><span class="compare-no"></span></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/perf-mon/get-started-web">Performance Monitoring</a> <em>(<strong>beta</strong> release)</em></td> <td><code translate="no" dir="ltr">firebase.performance()</code></td> <td><span class="compare-yes"></span></td> <td><span class="compare-no"></span></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/database/web/start">Realtime Database</a></td> <td><code translate="no" dir="ltr">firebase.database()</code></td> <td><span class="compare-yes"></span></td> <td><span class="compare-yes"></span></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/remote-config/use-config-web">Remote Config</a> <em>(<strong>beta</strong> release)</em></td> <td><code translate="no" dir="ltr">firebase.remoteConfig()</code></td> <td><span class="compare-yes"></span></td> <td><span class="compare-no"></span></td> </tr> </tbody> </table> <h2 id="available-libraries" data-text="Available libraries">Available libraries</h2> <section class="expandable"> <h3 class="showalways hide-from-toc" id="libraries-hosting-urls" data-text="Available Firebase JS SDKs (from reserved Hosting URLs)">Available Firebase JS SDKs (from reserved Hosting URLs)</h3> <table> <thead> <tr> <th><strong>Firebase product</strong></th> <th><strong>Library reference (reserved URL)</strong></th> </tr> </thead> <tbody> <tr> <td>Firebase core<br>(required)</td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.5.0/firebase-app.js"></script></pre></td> </tr> <tr> <td> <a href="/web/20210506173739/https://firebase.google.com/docs/analytics/get-started?platform=web">Analytics</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.5.0/firebase-analytics.js"></script></pre></td> </tr> <tr> <td> <a href="/web/20210506173739/https://firebase.google.com/docs/auth/web/start">Authentication</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.5.0/firebase-auth.js"></script></pre></td> </tr> <tr> <td> <a href="/web/20210506173739/https://firebase.google.com/docs/firestore/quickstart">Cloud Firestore</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.5.0/firebase-firestore.js"></script></pre></td> </tr> <tr> <td> <a href="/web/20210506173739/https://firebase.google.com/docs/functions/callable#call_the_function">Cloud Functions for Firebase Client SDK</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.5.0/firebase-functions.js"></script></pre></td> </tr> <tr> <td> <a href="/web/20210506173739/https://firebase.google.com/docs/cloud-messaging/js/client">Cloud Messaging</a></td> <td><pre class="prettyprint inline-code" translate="no" dir="ltr"><script src="/__/firebase/8.5.0/firebase-messaging.js"></script></pre> <p>For an optimal experience using Cloud Messaging, also add the Firebase SDK for Analytics.</p></td> </tr> <tr> <td> <a href="/web/20210506173739/https://firebase.google.com/docs/storage/web/start">Cloud Storage</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.5.0/firebase-storage.js"></script></pre></td> </tr> <tr> <td> <a href="/web/20210506173739/https://firebase.google.com/docs/perf-mon/get-started-web">Performance Monitoring</a> <br><em>(<strong>beta</strong> release)</em></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.5.0/firebase-performance.js"></script></pre></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/database/web/start">Realtime Database</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.5.0/firebase-database.js"></script></pre></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/remote-config/use-config-web">Remote Config</a> <br><em>(<strong>beta</strong> release)</em></td> <td><pre class="prettyprint inline-code" translate="no" dir="ltr"><script src="/__/firebase/8.5.0/firebase-remote-config.js"></script></pre> <p>For an optimal experience using Remote Config, also add the Firebase SDK for Analytics.</p></td> </tr> <tr> <td>Firebase JavaScript SDK<br>(entire SDK)</td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.5.0/firebase.js"></script></pre></td> </tr> </tbody> </table> </section> <section class="expandable"> <h3 class="showalways hide-from-toc" id="libraries-cdn" data-text="Available Firebase JS SDKs (from the CDN)">Available Firebase JS SDKs (from the CDN)</h3> <table> <thead> <tr> <th><strong>Firebase product</strong></th> <th><strong>Library reference</strong></th> </tr> </thead> <tbody> <tr> <td>Firebase core<br>(required)</td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-app.js"></script></pre></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/analytics/get-started?platform=web">Analytics</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-analytics.js"></script></pre></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/auth/web/start">Authentication</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script></pre></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/firestore/quickstart">Cloud Firestore</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-firestore.js"></script></pre></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/functions/callable#call_the_function">Cloud Functions for Firebase Client SDK</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-functions.js"></script></pre></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/cloud-messaging/js/client">Cloud Messaging</a></td> <td><pre class="prettyprint inline-code" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-messaging.js"></script></pre> <p>For an optimal experience using Cloud Messaging, also add the Firebase SDK for Analytics.</p></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/storage/web/start">Cloud Storage</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-storage.js"></script></pre></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/perf-mon/get-started-web">Performance Monitoring</a> <br><em>(<strong>beta</strong> release)</em></td> <td><pre class="prettyprint inline-code" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-performance.js"></script></pre> <p>Visit the <a href="/web/20210506173739/https://firebase.google.com/docs/perf-mon/get-started-web#cdn_standalone-sdk">Performance Monitoring Get Started</a> to add a standalone, lightweight Performance Monitoring SDK option.</p></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/database/web/start">Realtime Database</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-database.js"></script></pre></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/remote-config/use-config-web">Remote Config</a> <br><em>(<strong>beta</strong> release)</em></td> <td><pre class="prettyprint inline-code" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-remote-config.js"></script></pre> <p>For an optimal experience using Remote Config, also add the Firebase SDK for Analytics.</p></td> </tr> </tbody> </table> </section> <section class="expandable"> <h3 class="showalways hide-from-toc" id="libraries-bundle" data-text="Available Firebase JS SDKs (using bundler with modules)">Available Firebase JS SDKs (using bundler with modules)</h3> <table> <thead> <tr> <th><strong>Firebase product</strong></th> <th><strong>Library reference for v8 namespaced SDK</strong></th> </tr> </thead> <tbody> <tr> <td>Firebase core <em>(required)</em></td> <td><code translate="no" dir="ltr">import "firebase/app";</code></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/analytics/get-started?platform=web">Analytics</a></td> <td><code translate="no" dir="ltr">import "firebase/analytics";</code></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/auth/web/start">Authentication</a></td> <td><code translate="no" dir="ltr">import "firebase/auth";</code></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/firestore/quickstart">Cloud Firestore</a></td> <td><code translate="no" dir="ltr">import "firebase/firestore";</code></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/functions/callable#call_the_function">Cloud Functions for Firebase Client SDK</a></td> <td><code translate="no" dir="ltr">import "firebase/functions";</code></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/cloud-messaging/js/client">Cloud Messaging</a></td> <td><code translate="no" dir="ltr">import "firebase/messaging";</code> <p>For an optimal experience using Cloud Messaging, also add the Firebase SDK for Analytics.</p></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/storage/web/start">Cloud Storage</a></td> <td><code translate="no" dir="ltr">import "firebase/storage";</code></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/perf-mon/get-started-web">Performance Monitoring</a> <em>(<strong>beta</strong> release)</em></td> <td><code translate="no" dir="ltr">import "firebase/performance";</code></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/database/web/start">Realtime Database</a></td> <td><code translate="no" dir="ltr">import "firebase/database";</code></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/remote-config/use-config-web">Remote Config</a> <em>(<strong>beta</strong> release)</em></td> <td><code translate="no" dir="ltr">import "firebase/remote-config";</code> <p>For an optimal experience using Remote Config, also add the Firebase SDK for Analytics.</p></td> </tr> </tbody> </table> </section> <section class="expandable"> <h3 class="showalways hide-from-toc" id="libraries-nodejs" data-text="Available Firebase JS SDKs (modules for Node.js)">Available Firebase JS SDKs (modules for Node.js)</h3> <table> <thead> <tr> <th><strong>Firebase product</strong></th> <th><strong>Library module</strong></th> </tr> </thead> <tbody> <tr> <td>Firebase core <em>(required)</em></td> <td><code translate="no" dir="ltr">"firebase/app"</code></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/auth/web/start">Authentication</a></td> <td><code translate="no" dir="ltr">"firebase/auth"</code></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/firestore/quickstart">Cloud Firestore</a></td> <td><code translate="no" dir="ltr">"firebase/firestore"</code></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/functions/callable#call_the_function">Cloud Functions for Firebase Client SDK</a></td> <td><code translate="no" dir="ltr">"firebase/functions"</code></td> </tr> <tr> <td><a href="/web/20210506173739/https://firebase.google.com/docs/database/web/start">Realtime Database</a></td> <td><code translate="no" dir="ltr">"firebase/database"</code></td> </tr> </tbody> </table> </section> <h2 id="next_steps" data-text="Next steps">Next steps</h2> <p><strong>Learn about Firebase:</strong></p> <ul> <li><p>Explore <a href="/web/20210506173739/https://firebase.google.com/docs/samples">sample Firebase apps</a>.</p></li> <li><p>Get hands-on experience with the <a href="//web.archive.org/web/20210506173739/https://codelabs.developers.google.com/codelabs/firebase-web/">Firebase Web Codelab</a>.</p></li> <li><p>Explore the <a href="//web.archive.org/web/20210506173739/https://github.com/firebase/firebase-js-sdk">open source code in GitHub</a>.</p></li> <li><p>Review the <a href="/web/20210506173739/https://firebase.google.com/docs/web/environments-js-sdk">supported environments</a> for the Firebase JavaScript SDK.</p></li> <li><p>Speed up your development with additional Firebase-maintained open source libraries, like <a href="//web.archive.org/web/20210506173739/https://firebaseopensource.com/projects/angular/angularfire2/">AngularFire</a>, <a href="//web.archive.org/web/20210506173739/https://github.com/firebase/firebase-js-sdk/tree/master/packages/rxfire#rxfire">RxFire</a>, and <a href="//web.archive.org/web/20210506173739/https://firebaseopensource.com/projects/firebase/firebaseui-web/">FirebaseUI for web</a>.</p></li> <li><p>Prepare to launch your app:</p> <ul> <li>Set up <a href="/web/20210506173739/https://firebase.google.com/docs/projects/billing/avoid-surprise-bills#set-up-budget-alert-emails">budget alerts</a> for your project in the Google Cloud Console.</li> <li>Monitor the <a href="//web.archive.org/web/20210506173739/https://console.firebase.google.com/project/_/usage" class="external"><em>Usage and billing</em> dashboard</a> in the Firebase console to get an overall picture of your project's usage across multiple Firebase services. </li> <li>Review the <a href="/web/20210506173739/https://firebase.google.com/support/guides/launch-checklist">Firebase launch checklist</a>.</li> </ul></li> </ul> <p><strong>Add Firebase services to your app:</strong></p> <ul> <li><p>Host your app with <a href="/web/20210506173739/https://firebase.google.com/docs/hosting">Firebase Hosting</a>.</p></li> <li><p>Set up a user authentication flow with <a href="/web/20210506173739/https://firebase.google.com/docs/auth/web/start">Authentication</a>.</p></li> <li><p>Store data, like user information, with <a href="/web/20210506173739/https://firebase.google.com/docs/firestore/quickstart">Cloud Firestore</a> or <a href="/web/20210506173739/https://firebase.google.com/docs/database/web/start">Realtime Database</a>.</p></li> <li><p>Store files, like photos and videos, with <a href="/web/20210506173739/https://firebase.google.com/docs/storage/web/start">Cloud Storage</a>.</p></li> <li><p>Gain insight into your app's performance issues with <a href="/web/20210506173739/https://firebase.google.com/docs/perf-mon/get-started-web">Performance Monitoring</a>.</p></li> <li><p>Trigger backend code that runs in a secure environment with <a href="/web/20210506173739/https://firebase.google.com/docs/functions/callable#call_the_function">Cloud Functions</a>.</p></li> <li><p>Send notifications with <a href="/web/20210506173739/https://firebase.google.com/docs/cloud-messaging/js/client">Cloud Messaging</a>.</p></li> </ul> </div> <devsite-thumb-rating position="footer"> <template class="thumb-down-categories"> [{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] </template> <template class="thumb-up-categories"> [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }] </template> <template class="thumb-rating-feedback"> <devsite-feedback position="thumb-rating" project-name="Firebase" product-id="719752" bucket="" context="" version="t-devsite-webserver-20210429-r00-rc01.434909919929661024" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="thumb-rating" project-feedback-url="https://firebase.google.com/support/contact/bugs-features/" project-icon="https://firebase.google.com/_static/firebase/images/logo.png" project-support-url="https://firebase.google.com/support/" feedback-type="thumb-rating"> <button> Need to tell us more? </button> </devsite-feedback> </template> </devsite-thumb-rating> <devsite-feedback position="footer" project-name="Firebase" product-id="719752" bucket="" context="" version="t-devsite-webserver-20210429-r00-rc01.434909919929661024" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="footer" project-feedback-url="https://firebase.google.com/support/contact/bugs-features/" project-icon="https://firebase.google.com/_static/firebase/images/logo.png" project-support-url="https://firebase.google.com/support/" feedback-type="thumb-rating"> <button> Send feedback </button> </devsite-feedback> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://web.archive.org/web/20210506173739/https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://web.archive.org/web/20210506173739/https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://web.archive.org/web/20210506173739/https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2021-05-06 UTC.</p> </devsite-content-footer> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Learn</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/guides/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)"> Guides </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/reference/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)"> Reference </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/samples/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)"> Samples </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506173739/https://firebase.google.com/docs/libraries/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)"> Libraries </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//web.archive.org/web/20210506173739/https://github.com/firebase/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)"> GitHub </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Stay connected</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//web.archive.org/web/20210506173739/https://firebase.googleblog.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)"> Blog </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506173739/https://firebase.google.com/summit/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)"> Firebase Summit </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//web.archive.org/web/20210506173739/https://www.facebook.com/Firebase/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)"> Facebook </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//web.archive.org/web/20210506173739/https://twitter.com/Firebase" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)"> Twitter </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//web.archive.org/web/20210506173739/https://www.youtube.com/user/Firebase" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)"> YouTube </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Support</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506173739/https://firebase.google.com/support/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)"> Contact support </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//web.archive.org/web/20210506173739/https://stackoverflow.com/questions/tagged/firebase" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)"> Stack Overflow </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//web.archive.org/web/20210506173739/https://firebase.community/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)"> Slack community </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//web.archive.org/web/20210506173739/https://groups.google.com/forum/#!forum/firebase-talk" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)"> Google group </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506173739/https://firebase.google.com/support/releases" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)"> Release notes </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20210506173739/https://firebase.google.com/support/faq/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)"> FAQs </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://web.archive.org/web/20210506173739/https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <img class="devsite-footer-sites-logo" src="https://web.archive.org/web/20210506173739im_/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/firebase/images/lockup-developers.svg" loading="lazy" alt="Google Developers"> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//web.archive.org/web/20210506173739/https://developer.android.com/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link"> Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//web.archive.org/web/20210506173739/https://developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link"> Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//web.archive.org/web/20210506173739/https://firebase.google.com/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link"> Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//web.archive.org/web/20210506173739/https://cloud.google.com/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link"> Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//web.archive.org/web/20210506173739/https://developers.google.com/products/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link"> All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/web/20210506173739/https://firebase.google.com/terms/" data-category="Site-Wide Custom Events" data-label="Footer Terms link"> Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//web.archive.org/web/20210506173739/https://policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link"> Privacy </a> </li> </ul> <devsite-language-selector> <devsite-select class="devsite-language-selector-menu"> <select aria-label="Select your language preference." class="devsite-language-selector-select" name="language" track-name="click" track-type="languageSelector"> <option>Language</option> <option value="en" lang="en" track-metadata-original-language="en" track-metadata-selected-language="en" track-name="changed" track-type="languageSelector"> English </option> <option value="id" lang="id" track-metadata-original-language="en" track-metadata-selected-language="id" track-name="changed" track-type="languageSelector"> Bahasa Indonesia </option> <option value="de" lang="de" track-metadata-original-language="en" track-metadata-selected-language="de" track-name="changed" track-type="languageSelector"> Deutsch </option> <option value="es_419" lang="es_419" track-metadata-original-language="en" track-metadata-selected-language="es_419" track-name="changed" track-type="languageSelector"> Español – América Latina </option> <option value="fr" lang="fr" track-metadata-original-language="en" track-metadata-selected-language="fr" track-name="changed" track-type="languageSelector"> Français </option> <option value="it" lang="it" track-metadata-original-language="en" track-metadata-selected-language="it" track-name="changed" track-type="languageSelector"> Italiano </option> <option value="pl" lang="pl" track-metadata-original-language="en" track-metadata-selected-language="pl" track-name="changed" track-type="languageSelector"> Polski </option> <option value="pt_br" lang="pt_br" track-metadata-original-language="en" track-metadata-selected-language="pt_br" track-name="changed" track-type="languageSelector"> Português – Brasil </option> <option value="vi" lang="vi" track-metadata-original-language="en" track-metadata-selected-language="vi" track-name="changed" track-type="languageSelector"> Tiếng Việt </option> <option value="tr" lang="tr" track-metadata-original-language="en" track-metadata-selected-language="tr" track-name="changed" track-type="languageSelector"> Türkçe </option> <option value="ru" lang="ru" track-metadata-original-language="en" track-metadata-selected-language="ru" track-name="changed" track-type="languageSelector"> Русский </option> <option value="he" lang="he" track-metadata-original-language="en" track-metadata-selected-language="he" track-name="changed" track-type="languageSelector"> עברית' </option> <option value="ar" lang="ar" track-metadata-original-language="en" track-metadata-selected-language="ar" track-name="changed" track-type="languageSelector"> العربيّة </option> <option value="fa" lang="fa" track-metadata-original-language="en" track-metadata-selected-language="fa" track-name="changed" track-type="languageSelector"> فارسی </option> <option value="hi" lang="hi" track-metadata-original-language="en" track-metadata-selected-language="hi" track-name="changed" track-type="languageSelector"> हिंदी </option> <option value="bn" lang="bn" track-metadata-original-language="en" track-metadata-selected-language="bn" track-name="changed" track-type="languageSelector"> বাংলা </option> <option value="th" lang="th" track-metadata-original-language="en" track-metadata-selected-language="th" track-name="changed" track-type="languageSelector"> ภาษาไทย </option> <option value="zh_cn" lang="zh_cn" track-metadata-original-language="en" track-metadata-selected-language="zh_cn" track-name="changed" track-type="languageSelector"> 中文 – 简体 </option> <option value="zh_tw" lang="zh_tw" track-metadata-original-language="en" track-metadata-selected-language="zh_tw" track-name="changed" track-type="languageSelector"> 中文 – 繁體 </option> <option value="ja" lang="ja" track-metadata-original-language="en" track-metadata-selected-language="ja" track-name="changed" track-type="languageSelector"> 日本語 </option> <option value="ko" lang="ko" track-metadata-original-language="en" track-metadata-selected-language="ko" track-name="changed" track-type="languageSelector"> 한국어 </option> </select> </devsite-select> </devsite-language-selector> </nav> </div> </devsite-footer-utility> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics enable-analytics-iframe> <script type="application/json" analytics>[]</script> <script type="application/json" gtm>{"parameters": {"freeTrialEligibleUser": "False", "internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Firebase", "scriptsafe": null, "signedIn": "False", "tenant": "firebase", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}}, "tags": ["GTM-N84485"]}</script> </devsite-analytics> <devsite-badger></devsite-badger> <firebase-gtm></firebase-gtm> <script nonce="W9/O957YAu+OOR7mHVcQGvAYlKPeOW"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://web.archive.org/web/20210506173739/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/firebase/js/app_loader.js', '[4,"en",null,"/js/devsite_app_module.js","https://web.archive.org/web/20210506173739/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e","https://web.archive.org/web/20210506173739/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/firebase","https://web.archive.org/web/20210506173739/https://firebase-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/firebase/manifest.json","https://web.archive.org/web/20210506173739/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/images/video-placeholder.svg","https://web.archive.org/web/20210506173739/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/firebase/images/favicon.png","https://web.archive.org/web/20210506173739/https://www.gstatic.com/devrel-devsite/prod/ve6010286661f973c8a44ecd021b66ac8957259bcceefb6c1b1428b622ca8a90e/firebase/images/lockup.png","https://web.archive.org/web/20210506173739/https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700|Material+Icons"],1,null,[1,6,8,12,14,17,21,25,40,45,50,63,70,75,76,80,87,88,91,92,93,97,98,100,101,102,103,105,107,108,111,112,113,115,116,117,118,120,122,124,125,127,129,131,132,133,134,135,136],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Add Firebase to your JavaScript project