Initializing Firebase app using Create React App

Creating Create React App for use with Firebase

Let's dive right into it and create a new app using Create React App:

npx create-react-app tame-impala-chart

You need to have Node.js and npm! Also, note that the latest Node.js version supported by Firebase Functions is v10, so I recommended to install it.

The command will prepare an empty React project and install all dependencies. It might take a while.

Once, it's done start our app and open locahost:3000 in a browser:

cd tame-impala-chart
npm start # yarn start

You'll see this:

The app is ready! You can check the source code created by Create React App.

Creating Firebase project

Now let's create and initialize a Firebase project.

First, sign up at Firebase and create a project. Then go to the Database tab and create a database. Make sure you create it in the test mode or adjust security rules to allow writes and reads.

See Firebase documentations for more details.

Inserting Firebase initialize code

Now, let's integrate Firebase into the our app. First, install firebase package:

npm i --save firebase
# or
yarn add firebase

Once it's done let's add Firebase initialization code and finally get to coding. Update src/index.js:

// 1. Import Firebase app
import firebase from "firebase/app";
// 2. Import the auth module*
import "firebase/auth";
// 3. Import Firestore module*
import "firebase/firestore";
// * You don't always need to import those modules (except firebase/app),
// load only when use it or even better import asynchronously.
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

// 4. Initialize Firebase using values that you can find at:
// https://console.firebase.google.com/project/_/settings/general/
firebase.initializeApp({
  apiKey: "web-api-key",
  projectId: "project-id"
});

ReactDOM.render(<App />, document.getElementById("root"));

serviceWorker.unregister();

This will initialize our project and give us access to Firestore, the Firebase's database.

From now own, you can start using the authentication, Firestore, and other Firebase products available on the web.

In the next chapter you'll learn how to add and read data from Firestore.