書名： Progressive Web Apps with React
作者名： Scott Domes
本章字數： 292字
更新時間： 2021-07-08 09:36:23

Setting up

Here's how we'll get going with Firebase:

We'll go to the Firebase console.
From there, we'll create a project.
We'll name our lovely little project.
We'll get the code necessary to integrate it into our app.
We'll add that code to index.html.
We'll make Firebase available as a global variable.

If you're ready to get started, let's do it:

Once you've created or logged in to your Google account, head over to https://firebase.google.com/. In the top-right corner of your screen, you should see a button titled GO TO CONSOLE:

From the Firebase console, we want to Add Project. Click on the icon:

For Project Name, choose chatastrophe (all lowercase), and then select your Country/Region.
Firebase should take you directly to the project page once that's done. From there, click on the link that says Add Firebase to your web app:

Copy and paste the code it gives you into your public/index.html, before the closing </body> tag:

<body>
  <div id="root"></div> 
  <script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script> 
  <script>  
    // Initialize Firebase  
    var config = {    
      apiKey: /* API KEY HERE */,    
      authDomain: "chatastrophe-77bac.firebaseapp.com",    
      databaseURL: "https://chatastrophe-77bac.firebaseio.com",    
      projectId: "chatastrophe-77bac",    
      storageBucket: "chatastrophe-77bac.appspot.com",    
      messagingSenderId: "85734589405"  
    };  
    firebase.initializeApp(config); 
  </script> 
</body>

Lastly, we need to make our Firebase application available to the rest of our app. At the bottom of the script tag, just before the firebase.initializeApp(config) line, add the following:

window.firebase = firebase;

This code stores our Firebase setup on the window object, so we can access it in the rest of our JavaScript.

If you're not using source control (GitHub or Bitbucket, for example) or are using a private repository to store your code, you can skip to the next section. For the rest of us, we need to do some work to ensure that we don't display our config.apiKey to the entire world (a recipe for malicious use).

官术网_书友最值得收藏!

Progressive Web Apps with React

Setting up