Angular Content Management System using Google Firebase (Authentication, Storage & Firestore)
LGPL-3.0 License
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.
ng-zorro-antd
^7.0.0
ng new <project-name> --routing
cd <project-name>
npm i -S ngx-firebase-cms
npm i -S @angular/fire firebase
ng add ng-zorro-antd
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: {
}
};
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>
Open console.firebase.google.com
and go to Develop > Authentication > Sign-in method
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.
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 theadmin
to any other url You should consider to addhttps
cert for production use.
ng serve
Run the serve command and navigate to http://localhost:4200
in your browser.
The default route for Admin Panel is at http://localhost:4200/admin
Next Step: Documents