> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-401-angularfirebase/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-401-angularfirebase/module-4-firebase-setup.md).

# Module 4: Firebase Setup

## Goals

To set up Firebase for use with our Angular app. This is a setup-only module with no conceptual explanations.

## Create new Firebase Project

Disclaimer: Unless you use Firebase and Angular for a living, it’s unlikely that you will remember these exact setup steps - that’s fine - we don’t want you focusing on the 1-time setup, instead you should be focused on the other modules in this project, like how to actually use this after setup.

1. Visit the Firebase home page [here](https://firebase.google.com/). 
2. In the top right corner, sign in to Google, and then “Go To Console”.
3. Create a new project.
4. Enter a name for your project, and then click “Create Project”.
5. You will then be directed to a website looking something like:

   ![img](https://i.imgur.com/3aOsxGu.png)
6. Click on the “Add Firebase to your web app” to display your project details.
7. You should see a modal with some information. Keep this page up we'll use this shortly

## Configure Angular Project

1. We’ll need two packages - one for Firebase (“firebase”), and another to make Firebase and Angular play well together (“angularfire2”). run `npm install firebase@^4.13.1 angularfire2@5.0.0-rc.3 --save`

   We have a few more packages we will need to make everything work together. 

   run `npm install webpack firebase-cli popper.js rxjs-compat --save`
2. Again, the Angular “boss” file will need to be aware of these Firebase packages. Open `app.module.ts` and import these modules: 

   ```javascript
   import { AngularFireModule, FirebaseAppConfig } from 'angularfire2';
   import { AngularFireDatabaseModule } from 'angularfire2/database';
   import { AngularFireAuthModule } from 'angularfire2/auth';
   import { AngularFirestoreModule } from 'angularfire2/firestore';
   ```
3. We also have to include them in the “imports” section, so it should look like this:

```javascript
imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    FormsModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
```

1. And now you see the red underline beneath “firebaseConfig”, the same way we saw a red underline beneath “routes” earlier, before we created the “routes” variable. Time to do the same thing for “firebaseConfig”. Open the Firebase website and copy the configuration settings. 

   ![img](https://i.imgur.com/ulIFyFC.png)
2. Create a new const called firebaseConfig in your `app.module.ts` above `@NgModule`, with the above data. It should look something like this. Note that the typescript linter may yell at you to use single quotes.

```javascript
const firebaseConfig = {
  apiKey: 'yourKeyHere',
  authDomain: 'your-app-here.firebaseapp.com',
  databaseURL: 'https://your-app-here.firebaseio.com',
  projectId: 'your-app-here',
  storageBucket: 'your-app-here.appspot.com',
  messagingSenderId: '1234567890'
};
```

1. Return to the Firebase console and close the configuration popup. Select the “Database” tab on the left side of the screen, and then “Get Started” under the Realtime Database.

   ![img](https://i.imgur.com/dnAN5GZ.png)
2. Select Start in Locked Mode.

   ![img](https://i.imgur.com/F8XJffv.png)
3. Switch to the “Rules” tab at the top

   ![img](https://i.imgur.com/7Kuocj1.png)
4. Adjust the “read” and “write” rules to always be true (everyone can read and write to our database). Make sure to “Publish” the changes. You will get a warning that “your security rules are defined as public, anyone can read or write to your database” - that’s fine for now. 

   ![img](https://i.imgur.com/8BVAZyA.png)
5. Return to the "data" tab:

   ![img](https://i.imgur.com/HQv3Rvp.png)
6. Return to your code, and run “ng serve” again. Open your website and check your console - you should have no errors. 

Since we’re at the end of a module, let’s do a quick git commit!

Next, we'll learn about authentication.

[Authentication](https://github.com/ElevenfiftyAcademy/JavaScript-401-AngularFirebase-Gitbook/tree/02b7895dd3c6e641a49878c6ec6af45b25b45867/PartThree/PartFour/4.0.md)