Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/appquick/ngx-firebase-cms

Angular Content Management System using Google Firebase (Authentication, Storage & Firestore)
https://github.com/appquick/ngx-firebase-cms

angular cms firebase firebase-auth firebase-database firebase-storage ng-zorro-antd ngx wordpress

Last synced: about 1 month ago
JSON representation

Angular Content Management System using Google Firebase (Authentication, Storage & Firestore)

Awesome Lists containing this project

README 

        


NGX-FIREBASE-CMS






🛑🛑UNDER DEVELOPMENT 🛑🛑






🛑 DONT USE 🛑






Angular Content Management System using Google Firebase (Authentication, Storage & Firestore)



[![GitHub Release Date](https://img.shields.io/github/release-date/AppQuick/ngx-firebase-cms.svg?style=flat-square)](https://github.com/AppQuick/ngx-firebase-cms/releases)

[![npm package](https://img.shields.io/npm/v/ngx-firebase-cms.svg?style=flat-square)](https://www.npmjs.org/package/ngx-firebase-cms)

[![NPM downloads](http://img.shields.io/npm/dm/ngx-firebase-cms.svg?style=flat-square)](https://npmjs.org/package/ngx-firebase-cms)

[![GitHub license](https://img.shields.io/npm/l/ngx-firebase-cms.svg?style=flat-square)](https://github.com/AppQuick/ngx-firebase-cms/blob/master/LICENSE)






## 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](https://angular.io/guide/browser-support))



## Installation

### 1. Create a new project

```

ng new  --routing

cd 

```



### 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](https://console.firebase.google.com/). From the project overview page, click Add Firebase to your web app.

```

export const environment = {

  production: false,

  firebase: {

    apiKey: '',

    authDomain: '',

    databaseURL: '',

    projectId: '',

    storageBucket: '',

    messagingSenderId: ''

  },

  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 ``



### 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.



### 8. Run your app

```

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`



### 9. Next step

Next Step: [Documents](#)



## Usage

- coming soon



## Development

- coming soon



## Road Map

- coming soon



## Contributing

- coming soon



## Users

- coming soon



## License

- GNU GPLv3