Connect to Firebase

In this step you will connect your Firebase instance with the FireAdmin Panel.

To get your connection detail go in Firebase Console. If you don't have account, register new one and create new app. Go inside your app and from the Overview->Project Settings click on Add Firebase to your web app

Copy the config element content and paste in "src/config/app.js" in the firebaseConfig variable, in the source code you got from CodeCanyon

Now in order to be able to login, add user with email in "Authentication"

And you can re-use "fireadmin" and "firestore" pages multiple times to build your menu. As for example, we will be building admin panel for a app, that list events per night club in different cities. You can get the demo schema here so you can practice on your own if you want. So lets get started, and explain what each item does.

On the code above, we are displaying 4 menus ( 2 Firebase, 2 Firestore). One with submenus, and 3 normal menu. Each of them, includng the sub menus, have: link,path,name,icon,tableFields.

link - components used, in all cases "firebase"
path - Firebase path, ex "clubs/skopje/items"
name - Name of the menu, you can name it as you wish
icon - Material design iconstableFields - Array of fields, that should be displayed in the table when viewing the data
subMenus - List of sub menus, they have the same elements.

Schema Setup - FIREBASE

In order to have the posibilities of adding complete elements, let's say add new events, with all fields inside, we will need to have the "Schema" definied so the admin panel to understand to how the new elements should look. When you define your schema, your will see a "+" button on top of each table, allowing you to insert new items.

The schema should be defined in "src/config/schema.json".

If you are just starting with your Firebase, on a fresh new project, and you have some small number of dataitems there, you can export your current data as json, and use it as your schema. You can modify the first element of each section with some general data.

If you are already running a firebase instance, and have big amount of data, best will be to define the schema on your own, folowing the patern from your database structure. . Or you can export your data, and remove element from your data, leaving only one per each point in your data structure.

Since v2.0.0 the ordering of the schema fields control the ordering of the data inside the admin panel.

Schema Setup - FIRESTORE

In order to have the posibilities of adding complete elements, let's say add new events, with all fields and collections inside, we will need to have the "Schema" definied so the admin panel to understand to how the new elements and collections should look. When you define your schema, your will see a "+" button on top of each table, allowing you to insert new collections and documents.

The schema for Firestore should be defined in "src/config/firestoreschema.json".

Let'm make Firestore simple. Firstore consists of Collection and documents.

STEP 1, write all your collections ex, no need to nest them

var collectionMeta={
"events":{},
"tickets":{}
}

STEP 2, add the "collections" element in each of them. Example each event's document has collection of ticketes. And tickets doesn't have any collection so just use empty array

Fields setup

Most usefull feature of the admin panel is that is can display your data in different contianes, and not just a text fild. You can defined, dates, dropdowns, image pickers, html editor etc.

To setup the filds go in "src/config/app.js" and there you will find the adminConfig->fieldsTypes element. Each field inside list typeOfField:[list of names of firebase fields that should be converted to given type].

So for an example. If you have a fields "photo" in your data, the firebase admin, with get the URL of the photo and convert it to image view with upload button. You can extend the list of fields here and add your own field types. The code for doing that is located in "src/components/fields/Fields.js".

Our most advance component is the HTML WYSWYG editor. It is based on this module. You can write your HTML there, put remote images etc..

radio,checkbox and dropdowns are special type of filds that can have predefined values for their selection. To manage it, you will see the element "optionsForSelect" in the same "adminConfig" element in "src/config/app.js". Here is how it looks. You can list your field, and add the options that should be there for that field.

Sine v2.0.0 there is new "Relation" field. This field is really powerfull because gives relations capabilities to Firebase. It can display list of data (ex.Categories) in givven field list (ex.Article details). This action can also create additional fields in firebase so later can be used in your search query in Firebase. To manage it, you will see the element "optionsForRelation" in the same "adminConfig" element in "src/config/app.js". Here is how it looks. You can list your field, and add the options that should be there for that field.

copy

"optionsForRelation":[
{
"key":"type", //Type of fields, always remains same
"path":"/static/genres/items", //Path to the referenced data, ex Categories in article
"value":"name", //What key to put in the "value" of the select
"display":"name", //What key to put in the "name" of the select element
"isValuePath":false, //If true, for the value we will put the value key, if false, we will use the path to the referenced object
"produceRelationKey":true, //You will need new field automaticaly produced if you want to query the reference ex. Category -> Action
"relationKey":"type_eventid", //Name of the newly produced field
"relationJoiner":"-" //How the values of the both object are joined ex. category_id-article_id
},
],

Sine v4.0.0 there is new and improuved "DateTime" field based on this module. The React-DateTime module is based on moment.js. So follow the date/time formating of moment.js as explained here. To manage it, you will see the element "optionsForDateTime" in the same "adminConfig" element in "src/config/app.js". Here is how it looks.

dateFormat: Date Format to display in the fields and on the component. This can be string or boolean. Follow the date/time formating of moment.js as explained here

timeFormat: Time Format to display in the fields and on the component. This can be string or boolean. Follow the date/time formating of moment.js as explained here

saveAs: In what format to save in the database. This is also used for reading and convertign. Ex "x" will save it as timestamp. Follow the date/time formating of moment.js as explained here

locale: Components locale, optional. Default is en

C.R.U.D

Create.

There are two types of creating data. Creating a fields, is creatign new fields inside existing element. You enter the name and the value. It doesn't require the schema to be set. You can also add complete elment with all his predefined data. In our example, we can add new events ( with all fields ), clubs etc. This way of inserting reguires your schema to be set.

In the second method, when you create complete object (ex. events ) you have two ways of inserting your data.As a timestamp where we use the key + timestam. and As a push where we use the firebase keys to insert your new data. This is per all data and can be set up in "scr/config/app.js" in the adminConig element you will find field methodOfInsertingNewObjects

Read.

Depending on the type of data to be presented, we are automatically displaying your fields in a "fields" group. If we see an array, we display it as a table. If we see regular elements we display them ad buttons in the "elements" group.

If you want your elements to be grouped in a table, in "scr/config/app.js" in the adminConig element you will find field prefixForJoin. Here you can define what kind of elements you want to be grouped into a table. In our case, all our event start with the prefix "-event". This is common practice in Firebase. Even the elements pushed in Firebase have prefix, that is different per each instance. You can use it to group you element.

Central part of our project is the "TableView" where we display your data. You can define what fields should be displayed ( in table, and in table header). In "scr/config/app.js" in the navigation on each "firebase" item you can have tableFields. This is list of fields to be displayed.

Update.

Using ReactJS state change we are updating your data on fly. So there is no save button in order to update your data. Just modify your content and it is updated directly in firebase. This also applies to the HTML WYSWYG editor.

Delete.

As for create, for delete you have two options. Delete single fields, that you will see at right of each field, and delete everithing in current path ( a delete button on top ). Both of them triger same fuction for deleting notifaing you that everithing under this path will be completly removed (Firebase) and that SubCollection will not be deleted for (Firestore).

Authorization

Manage who and how can access this admin panel.

The users inside your "Authentication" in Firebase, are the user that can asses this domain. This in most of the cases can be your app user. And you don't want any of your user to be able to login inside the admin panel, right. So if you go in "scr/config/app.js" in the adminConig element you will find field allowedUsers. If it is null, every user is able to login. Make an array of emails to list who can access the data ex. ["admin@myemail.com","anotheradmin@myemail.com"]

You can also mange who and how can manage the data using the Firebase Databse Rules system.

Appereances

Modify existing look and feel.

We are running on a profesional bootstrap PRO theme from Creative-Tim called Material Dashboard Pro. We love this admin panel because it is so sexy. It is fast and looks so modern. You can easily chage the color theme. Go in "scr/config/app.js" in the adminConig element you will find element design. There you have the option to change the side image, side nav selection color and side background. You can find the assets of the template in public/assets

Use another bootstrap template.

Today, most of the Admin themes have Login screen, side menu, and content part. This is how we also designed our project so you can easily replace it with your own bootstrap admin theme. Most of the work in is the public folder where you shoul use the assets of your theme. Change the public/index.html to be the blank page of your new theme. All you need here is to have the "root" element to be in your body eleent.

< div id="root" />

Then modify the src/containers/Master.js to mach your side menu. Modify the src/Login.js to mach the login of your theme. Most of the code will remain unnchanged, since you are using bootstrap theme.

Push notifications

Send push notification from your admin panel

OneSignal

To configure OneSignal push notification, first regiser account and app in OneSignal. Then in "src/config/app.js" on the bottom you will find exports.pushSettings. There enter the oneSignal_REST_API_KEY and oneSignal_APP_KEY that you have form OneSignal. Done

Firebase Push

In "src/config/app.js" on the bottom you will find exports.pushSettings. There enter the Firebase_AuthorizationPushKey and pushTopic. For pushType enter firebase. Done

Deployment

This project is based on Create React App. So you can follow the instruction here to build your project. All you have to di in fact is to run

npm run build

This will compile your code, and make a build folder that is ready for uploading on Firebase or on your own HTTP server.

Deploy on Firebase.

Go in your firebase console, and then go in Hosting. Click on Get started. Next, run the command to install the Firebase tools globally in your system.

npm install -g firebase-tools

Next, run the command to login in Firebase (Insrtuctions on firebase console).

firebase login

In your project root, run the command to initialize your firebase project.

firebase init

In the options, select "Hosting" using the Space button on your keyboard. The selection should become green. Next select your project. For public folder enter build. On Configure as a single-page app enter y. Enter N to not overwrite any file. Next run

firebase deploy

and enjoy your site running on supper fast google environment. The console will tell you the link to your admin.

We recommend to watch the video on how to deploy to firebase.

Deploy on your own server.

All you have to do is to upload your build folder content to any server / hosting. For more advance usages, and including the script in pre-existing node server follow the guide on React Create App