1. Navigate to your pre-existing angular project

    $ cd ~/dev && git clone https://github.com/<username>/my-project my-project
    $ cd ~/dev/my-project
   

2. Install the Firebase CLI

    $ npm -g install firebase-tools
    $ firebase --version
    $ firebase login
   

3. Initialize firebase configuration for your pre-existing angular project

    $ cd ~/dev/my-project && \
      firebase init
   
    ? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. 
     ◯ Database: Deploy Firebase Realtime Database Rules
     ◉ Firestore: Deploy rules and create indexes for Firestore
     ◯ Functions: Configure and deploy Cloud Functions
    ❯◉ Hosting: Configure and deploy Firebase Hosting sites
     ◯ Storage: Deploy Cloud Storage security rules
   
    ? What file should be used for Firestore Rules? firestore.rules
    ? What file should be used for Firestore indexes? firestore.indexes.json
    ? What do you want to use as your public directory? dist/my-project
    ? Configure as a single-page app (rewrite all urls to /index.html)? No
    ✔  Wrote dist/my-project/404.html
   
    ? File dist/my-project/index.html already exists. Overwrite? No
    i  Skipping write of dist/my-project/index.html
   
    i  Writing configuration info to firebase.json...
    i  Writing project information to .firebaserc...
   
    ✔  Firebase initialization complete!
   

   NOTE: It is SUPER important to point public directory accurately to wherever your prod build will dump its data, like I did to dist/my-project in the step above.

4. Install dependencies for firebase locally in your pre-existing angular project

    $ cd ~/dev/my-project
    $ npm install --save-exact firebase
    $ npm install --save-exact @angular/fire
    % npm install --save-exact @types/firebase
   

5. Setup src/app/environments/environment.ts file in your Angular project with a firebaseConfig object and insert the relevant details from your firebase project.

    export const environment = {
      production: false,
      firebaseConfig : {
        apiKey: "YOUR_API_KEY",
        authDomain: "YOUR_AUTH_DOMAIN",
        databaseURL: "YOUR_DATABASE_URL",
        projectId: "YOUR_PROJECT_ID",
        storageBucket: "YOUR_STORAGE_BUCKET",
        messagingSenderId: "YOUR_MESSAGING_SENDER_ID"
      }
    };
   

6. Load relevant firebase modules into Angular. Open the src/app/app.module.ts file and update it accordingly:

    import { AngularFireModule } from '@angular/fire';
    import { AngularFirestoreModule } from '@angular/fire/firestore';
    import { environment } from '../environments/environment';
   
    @NgModule({
            // [...]
        imports: [
            // [...]
            AngularFireModule.initializeApp(environment.firebaseConfig),
            AngularFirestoreModule
        ],
   

7. Build and deploy locally

    ng build --prod
    firebase serve --only hosting
   

8. Setup src/app/environments/environment.prod.ts file (NOTICE: this is prod.ts, itsdifferent from the one before) in your Angular project with a firebaseConfig object and insert the relevant details from your firebase project.

    export const environment = {
      production: true,
      firebaseConfig : {
        apiKey: "YOUR_API_KEY",
        authDomain: "YOUR_AUTH_DOMAIN",
        databaseURL: "YOUR_DATABASE_URL",
        projectId: "YOUR_PROJECT_ID",
        storageBucket: "YOUR_STORAGE_BUCKET",
        messagingSenderId: "YOUR_MESSAGING_SENDER_ID"
      }
    };
   

9. Build and deploy to the world

    ng build --prod
    firebase deploy
   

Written with StackEdit.