From the course: React: Cloud-Powered Apps with Firebase

Configuring your web application

From the course: React: Cloud-Powered Apps with Firebase

Start my 1-month free trial

Configuring your web application

“

- [Instructor] Now that we have created a Firebase project and installed the Firebase CLI tools, we need to configure our web application with Firebase through the Firebase console, and also install the Firebase library. We will be using the official Firebase library by Google and install it through npm. This will be the starting point for the course. So in the exercise files, first, make sure to check out the branch, 01-04-begin and install dependencies with npm install. To get the most of this course, I suggest you start here and continue as you work with begin, building out the entire application. In your terminal install Firebase. At the time of this recording, the latest version is 7.15.0. So we'll be using that. Let's head over now to the Firebase console. Click on the Project settings and scroll down to the area that says Your apps. Go ahead and click on the web icon. I will write here REACT DASHBOARD as the app nickname, and we don't have to set up hosting just yet. Go ahead and click on Register app. It will then suggest you copy and paste this scripts, but since we have installed Firebase through npm, we don't need to do that. However, we will need these values. We will go ahead and use the feature of Create React App that allows us to easily add environment variables. Often in your application that are desired to provide different environment variables, depending on what environment your app is being served on. For instance, on developing locally or in a staging or production environment, we will need to prefix each variable with REACT_APP_. This is a convention that is used, you can read more about it here. Heading over to the Firebase console again, we will grab these values and place them in a new environment file. Go ahead and copy that and head over and out to your project. We'll create a new file .env and paste the values we just copied. Let's go ahead and format this file to the convention that React expects. So be an equal sign and each environment variable will be prefixed by REACT_APP_. You have the API_KEY, the AUTH_DOMAIN, the DATABASE_URL, PROJECT_ID, STORAGE_BUCKET, and the MESSAGING_SENDER_ID. We don't need the appId here. Lastly, let's get rid of these quotation marks and also the trailing commas. Let's create a folder called Firebase and here create a new file called config.js. This is where we will initialize Firebase with our configuration, import firebase from 'firebase/app'. And then we can create our Firebase app by calling firebase.InitializeApp, with an object containing our configuration here. Let's replace these values with our new environment variables, REACT_APP_. This is the API_KEY, the AUTH_DOMAIN, the DATABASE_URL, the PROJECT_ID, STORAGE_BUCKET and also the MESSAGING_SENDER_ID. And these variables can be accessed using process.env. Heading over to App.js now, we can import our new configuration file add './firebase/config'. And lastly, back in config.js, let's insert a quick console.log to ensure that our Firebase app initialize with the correct configuration. You can do that using firebase.app.options. Let's test our app now by running npm start. So open up our console, verify that you don't have any computation errors, and we can see that we have our configuration here. It looks like MESSAGING_SENDER_ID is undefined. Let's head back to our application and there's a typo here. Save that, head back to your application, and now we see all of our values displayed.

Contents