Ngx-firebase-cms NPM

Description

ngx-firebase-cms is a set of tool that combines the admin panel using ng-zorro-antd and backend linkage to Google Firebase with what developers need for their Angular project. It provides user authentication, file storage and firestore database using Google Firebase.

Features

User Authentication using Firebase Authentication
Media upload using Firebase Storage
Post CRUD using Firebase Firestore
Admin Panel using ng-zorro-antd

Environment Support

Angular ^7.0.0
Modern browsers and Internet Explorer 11+ (with polyfills)

Installation

1. Create a new project

ng new <project-name> --routing
cd <project-name>

2. Install NGX-FIREBASE-CMS

npm i -S ngx-firebase-cms
npm i -S @angular/fire firebase 
ng add ng-zorro-antd

3. Add Firebase config to environments variable

Open /src/environments/environment.ts and add your Firebase configuration. You can find your project configuration in the Firebase Console. From the project overview page, click Add Firebase to your web app.

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  },
  ngxFirebaseCms: {
    
  }
};

4. Setup @NgModule for the NgxFirebaseCMSModule and edit `app.component.html`

Open /src/app/app.module.ts, inject the NgxFirebaseCms and BrowserAnimationsModule providers, and specify your NgxFirebaseCms configuration.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { NgxFirebaseCMSModule } from 'ngx-firebase-cms';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase),
    NgxFirebaseCMSModule.forRoot(environment.ngxFirebaseCms)
    ...
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Open /src/app/app.component.html, replace with <router-outlet></router-outlet>

5. Enable Email/Password Authenication Provider

Open console.firebase.google.com and go to Develop > Authentication > Sign-in method

6. Amend the Rules for firestore

Open console.firebase.google.com and go to Develop > Database > Cloud Firestore > Rules Temporarily, allow read/write access on all documents to any user signed in to the application

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth.uid != null
    }
  }
}

This is temporary settings, it is not safe as everyone could register to be a user using any email.

7. Add ngx-firebase-cms Admin Panel to route module

Open app-routing.module.ts and add the NgxFirebaseCMSModule

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NgxFirebaseCMSModule } from 'ngx-firebase-cms';

const routes: Routes = [
  { path: 'admin', loadChildren: () => NgxFirebaseCMSModule },
  /***
    Your other routes
  ***/
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

The Admin Panel is now at localhost:4200/admin or you could change the admin to any other url You should consider to add https cert for production use.