First you will need to setup your environment. This is ReactJS project, and for it, we will need Node + NPM installation. You will also need GIT on your system.

Install node and npm: Download it from here.

Install GIT: Download it from here.

To verify your installation run

node --version
npm --version
git --version

Start the local server

Extract the downloaded zip file. Using your terminal / command prompt go in that folder and run the follwing command

npm install
npm start

This will start your local node server, and automatically should open your localhost:3000

In your Project, click on the cog icon. 

Then click on Users and permissions

Step 2. 

Now click on Add Member button and enter

mobidonia@gmail.com as editor

Then click on Add Member

Now we can see your database. 

After the problem is resolved, you can revoke the access by deleting our user from there. 

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"

Create the real time database

Go to Database and then click on the button called "Create database"

After clicking on the button it should appear a window that will ask you about security rules. Click on the Start in test mode and after that click Enable.

With rules configured like this everyone can read and write in your database. This is ok for test and development purposes.

But for production, this is a good starting point. This will allow edit and write to all registered users.

{
  "rules": {
    ".read": "auth !== null",
     ".write": "auth !== null"
  }
}

Create Firestore Database

Go in Databases ->Cloud Firestore

Then, a pop up will appear.

For now, use Start in test mode.

Start your app builder locally

In your project opened in the terminal or command line run the command npm start. After running this command in your browser you should see a newly opened window looking like this one like in the picture below.

Create a user in Firebase

After this you should create a user in firebase for been able to login to your the app builder.

Go into firebase console and click on Authentication and after that click on Set up sign-in method

Click on Email/Password and enable them and click Save.

Now click on Users and now you should be able to click on Add user.

Enter your email and password click Add user.

Login to your builder whit the email and password that you added.

Ok, now the most important step. To setup your navigation.

The navigation system is the core of this project. It can point to different data paths in your Firebase. You also have to option to build multilevel menus.

To get started, go in the config file "src/config/app.js". There at the end you will find "exports.navigation"

We have the folowing pages,

• "/" - the dashboard page ("containers/App.js")
• "push" - The push notification page ("containers/Push.js")
• "fireadmin" - the Firebase manager ("containers/Fireadmin.js")
• "firestore" - the Firestore manager ("containers/Firestore.js") - since version 3.0.0

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.

{
      "link": "fireadmin",
      "path": "clubs",
      "name": "Clubs",
      "icon":"room",
      "tableFields":["name","description"],
      "subMenus":[
        {
          "link": "fireadmin",
          "path": "clubs/skopje/items",
          "name": "Skopje",
          "icon":"event",
          "tableFields":["name","description"]
        },{
          "link": "fireadmin",
          "path": "clubs/sofia/items",
          "name": "Sofia",
          "icon":"event",
          "tableFields":["name","description"],
        }
      ]
},
{
      "link": "fireadmin",
      "path": "static",
      "name": "Cities & Genres",
      "icon":"location_city",
      "tableFields":["name","description"],
},
{
      "link": "firestoreadmin",
      "path": "events",
      "name": "FireStore Events",
      "icon":"event",
      "tableFields":["name"],
},
{
      "link": "firestoreadmin",
      "path": "clubs",
      "name": "FireStore Clubs",
      "icon":"disco",
      "tableFields":["name","description"],
},

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 icons

tableFields - Array of fields, that should be displayed in the table when viewing the data subMenus - List of sub menus, they have the same elements.

View video of setting up navigation

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.

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

var collectionMeta={
    "events":{
        "collections":["tickets"],
    },
    "tickets":{
        "collections":[],
    }
}

STEP 3. describe each collection documents by adding the "fields" element ex.

var collectionMeta={
    "events":{
        "fields":{
            "name":"My Event name"
        },
        "collections":["tickets"],
    },
    "tickets":{
        "fields":{
            "price":"300",
            "name":"My ticket name"
        },
        "collections":[],
    }
}

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

"fieldsTypes":{
    "photo":["photo","image"],
    "dateTime":["datetime","start"],
    "date":["date","created"], //removed in v4.0.0
    "time":["time"], //removed in v4.0.0
    "textarea":["description"],
    "html":["content"],
    "radio":["radio"],
    "checkbox":["checkbox"],
    "map":["map","latlng","location"], //since v3.0.0
    "dropdowns":["status","dropdowns"],
        "file":["video"],       //since v2.0.0
        "rgbaColor":['rgba',"*Color"],  //since v2.0.0  //Since 3.2.0 you can use * to math all fields ending on some key ex. textColor, rowColor etc..
        "hexColor":['color'],   //since v2.0.0
        "relation":['type'],    //since v2.0.0
        "iconmd":['icon'],      //Material Icon since v2.1.0
        "iconfa":['iconfa'],    //FontAwesome since v2.1.0
        "iconti":['iconti'],    //Typicons since v2.1.0

  },

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.

"optionsForSelect":[
      {"key":"dropdowns","options":["new","processing","rejected","completed"]},
      {"key":"checkbox","options":["Skopje","Belgrade","New York"]},
      {"key":"status","options":["just_created","confirmed","canceled"]},
      {"key":"radio","options":["no","maybe","yes"]}
  ],

View video of setting up fields

Relations

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.

"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
        },
],

View video of setting up relation fields

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.

"optionsForDateTime":[
    {"key":"end", "dateFormat":"YYYY-MM-DD" ,"timeFormat":true, "saveAs":"x","locale":"es"},
    {"key":"start", "dateFormat":"YYYY-MM-DD" ,"timeFormat":"HH:mm", "saveAs":"YYYY-MM-DD HH:mm"},
  ],

Each element has:

• key: The key that affects this setup - firebase or firestore
• 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

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

View video of CRUD

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"]

Also there is available option for user registration. If you go in "scr/config/app.js" in the adminConig element you will find field allowRegistration and by default this option is false. By changing this option to true register option should be shown together with login option.

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

View video of Authorization

The admin panel can sen push notification to Firebase or OneSignal

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

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

IMPORTANT: THIS COMMAND IS REQUIRED IN BOTH CASES

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.

Option 1: 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.

OPTION 2: Deploy on your own server.

After you have done STEP 1, you should see a build folder created.

You can upload this build folder on any hosting like a normal HTML web page.

View video of Deployment

We have created few components and views that are used throught this project. They are template independed. So implmenting any bootstrap template should be relativly easy now. This guide purpose is just that, to gude you in the process of implementing new template.

What bootstrap admin templates I can use

You can use any bootstrap admin template. But we recomend one that has the following pagaes / features.

• Login / Register page
• Blank Page
• Has Side menu navigation ( most do )
• Has form wizzard / tabs
• Tiles

DEMO

Username: admin@admin.com Password: password

In the demo we have disabled the delete and insert function

In the project, you will find the folder public. This is the folder that contains the default template. Rename it to public_md. We will not use this folder anymore.

There is another folder public_example. Make new copy of that folder and rename it to public. This will be our new public folder.

In the folder you copied, there are one .css and one .js file we use cross template. You can modify the values and functions of them to suit your need.

This is how the folder structure should look now.

Download and place your files

Download your HTML Admin Bootstrap template. If zipped, extract it. Most of the HTML admin templates contain asssets folder that contains all the image + js + css. Copy the asssets folder ( or similar ) and put in in the public folder.

Most HTML templates have blank.html (If there is no blank.html use index.html file). Put it in the same public folder. Rename blank.html to index.html

This is how the folder structure of the public folder should look now.

Set up index.htm

Open the index.html you just copied from your template. Change the title atribute to match your needs.

Delete everithing that is inside the body tag. In some admin panels, javascirp is loaded at the end of the body tag. Don't remove the Javascript library imports.

Step 1. Inside the body tag, add the folowing div element

 <div id="root"></div>

Step 2. In the <head>...</head> section add the folowing css import

<link rel="stylesheet" href="assets_vendor/css/fireadmin.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Step 3. On the bottom of the HTML code just before closing the html with </html> add the folowing

<script src="assets_vendor/vendors/js/noty/noty.min.js"></script>
    <script src="assets_vendor/js/interface.js"></script>
    <script type="text/javascript">
        function getReactInterfaceToJS(){
        return reactInterfaceToJS;
      }
    </script>

Click here to see our products

We have create few components that are used in the project and that look different in each template

Complex Components

• Login - Login UI
• Master - The Master view (side navigation with central content part)
• NavBar - Navigation bar that displays breadcrumbs and actions

Simple Components

• Card - A bootstrap card view
• Pager - The paging compoent that is used to paginate your data
• Tile - Bootstrap tile component
• Wizzard - Wizzard view ( buttons on top of card that control the current content)

Create new components UI

In the project, you will find the folder `src\ui\template' that contains the template UI look for the listed components above. So rename that folder to template_md ( or anything else ). We will not need it anymore.

There is folder src\ui\starter\. Copy and rename that folder to template. This will be our new working folder for our template specific code.

Now your folder structure should look like this

Your HTML admin template should have a login.html or named similary, HTML page that is used fore login. Open that html file, and copy all the content inside the body tag.

Then head over to HTMLtoJSX to convert the plain HTML to format suitable for react. Uncheck Create class. Paste your copied HTML inside Live HTML Editor tab.

Copy the generated ouput.

In src\ui\tempate\Login.js look for the render function. Replace the returned <div >...</div> with the ouput you got from HTMLtoJSX

Assign the functions

The copied Login.js comes with some functions. And you need to assign thous functions to the current UI

Form on submit

In the code you just paste, find the <form> tag. Change his onSubmitEvent. It should look like this

<form onSubmit={this.handleSubmit}>

Email and Password on Change events

Your Email filed should have the onChange and value set. Should look like this (don't replace className)

<input type="email" value={this.state.username} onChange={this.handleChangeUsername} className="form-control" />

Your Password filed should have the onChange and value set. Should look like this (don't replace className)

<input type="password" value={this.state.password} onChange={this.handleChangePassword} className="form-control" />

Error Display

At appropriate location in your HTML, you should add the error display blog. So you can inform user of any Authentication error.

<h4>{this.props.error}</h4>

Google Login

To display the Google login button, add the following code

{this.props.showGoogleLogin()}

Python installation

If you want to learn the newest version of Python, you’ll need to install Python 3. You can install it alongside Python 2.7 with no problems, so go ahead and download and run the installer now.

On the first screen, enable the “Add Python 3.6 to PATH” option and then click “Install Now.”

Next, you have a decision to make. Clicking the “Disable path length limit” option removes the limitation on the MAX_PATH variable. This change won’t break anything, but will allow Python to use long path names. Since many Python programmers are working in Linux and other *nix systems where path name length isn’t an issue, turning this on in advance can help smooth over any path-related issues you might have while working in Windows.

If you’re only installing Python 3, you can use the same command line trick of typing

python -v

that we used above to check that it is installed correctly and the path variable is set. If you’re installing both versions, however, you need to make the quick tweak found in the following section.

Adjust System Variables So You Can Access Both Python Versions From the Command Line

This section of the tutorial is completely optional, but will allow you to quickly access both versions of Python from the command line. After installing both versions of Python, you may have noticed a little quirk. Even though we enabled the system path for both Python installations, typing “python” at the command prompt only points you to Python 2.7. 

The reason for this is simple: the variable (whether automatically adjusted by an installer or manually tweaked) simply points at a directory, and every executable in that directory becomes a command line command. If there are two directories listed and both have a “python.exe” file in them, whichever directory is higher in the list of variables gets used. And, if there is a variable set for the system and the user, the system path takes precedence over the user path. 

The latter is exactly what’s happening in this case: the Python 2 installer edited the system wide variable and the Python 3 installer added a user level variable—and we can confirm this by looking at the Windows’ environment variables. 

Hit Start, type “advanced system settings,” and then select the “View advanced system settings” option. In the “System Properties” window that opens, on the “Advanced” tab, click the “Environment Variables” button.

Here, you can see Python 3 listed in the “User variables” section and Python 2 listed in the “System variables” section.

There are a few ways you can remedy this situation. The simplest (albeit the one with the least functionality) is to just remove the entry for the version of Python you plan on using the least. While that’s simple, it’s also not very much fun. Instead we can make another change that will give us access to “python” for Python 2 and “python3” for Python 3.

To do this, fire up File Manager and head to the folder where you installed Python 3

(C:\Users\[username]\AppData\Local\Programs\Python\Python36 by default).

Make a copy of the “python.exe” file, and rename that copy (not the original) to “python3.exe”.

Open a new command prompt (the environmental variables refresh with each new command prompt you open), and type “python3 –version”.

Boom! You can now use the “python” command at the Command Prompt when you want to use Python 2.7 and the “python3” command when you want to use Python 3.

Version 10.2 - 07 Feb 2019

Version 10.1 - 05 Feb 2019

Bug Fixes

Version 10.0 - 29 Jan 2019

New Features

1.  React Tables included
2.  Password reset
3. User Registration
4. User profile setup
5. Change the template of the FireAdmin

Bug Fixes

- Paginator module install error

Upgrade guide

This is a major release. We suggest to download the source code, follow the installation guide. 

You can reuse your old schema.json, firestoreschema.js, and app.js. 

Older Changelog can be found at

http://fireadmin.mobidonia.com/changelog.php

But since there are a lot of use cases of use, there can be some that we haven't tested and that makes a problem for you. 

We will continue to improve our implementation of React Tables. 

But just as a temporary fix,  you can switch to the old DataTables easily. 

In both 

src/container/Fireadmin.js 

and

src/containers/Firestoreadmin.js

at the start of the code replace the table import with the old tables

import Table from  '../components/tables/RTable.js'

into

import Table from  '../components/tables/Table.js'

Obtain API Key

Head over to Google Developers Web Maps JavaScript API to obtain API Key

Click on the "Get Started" button.

Select Maps

Then Select or create a project. 

Then set up billing. 

In the end, you will get the API KEY. 

Important: When you get your Google API Key, by default is not protected, it means, it can be used anywhere. 

Make sure you set up the URL where your key will be used. 

Go in Google Cloud Platform

Locate the key you have created and enter the url.

Place your API KEY

Now in src/config/app.js around line 30, add your API KEY

"googleMapsAPIKey":"YOUR_KEY",

• {Array} items - the breadcrubs items
• {String} current path
• {String} title - Title of the current page

Getting started

For this change we will work in NavBar.js. Inside you will see the render function and the generateBreadCrumb generateBreadCrumb job will be to display the bredcrumbs. So lets start with that

Styling the breadcrumbs

You should already see the breadcrumbs in your page, but the may not look exactly as in yout template demo. So to make them the same, check how they are organized and styled in your template. In most of the cases they are avialbe in the blank page demo.

Page title

One of the avaialbe props in the title of the page. You will already see the title, but maybe the organization is not ok. So what you can do is to copy the HTML part with the title ( or/and breadcrumbs ) and convert them to JSX syntax HTMLtoJSX.

Then replace demo data with the props and calls to functions.

Your HTML admin template should have a blank.html or named similary, HTML page that is just blank and has the side menu. Open that html file, and copy all the content from inside the body tag.

Then head over to HTMLtoJSX to convert the plain HTML to format suitable for react. Uncheck Create class. Paste your copied HTML inside Live HTML Editor tab.

Copy the generated ouput.

In src\ui\tempate\Master.js look for the render function. Replace the returned <div >...</div> with the ouput you got from HTMLtoJSX

Add the childrens to the view

The html that you copied over, it should have the content are somewhere. There add this

 {this.props.children}

Remove the demo menus and add system

Find the <ul>...</ul> list that containst the menu. remove her content and add

 {Config.navigation.map(this.props.printMenuItem)}

Remove unnececery HTML admin demo elements

Lot of admin templates will come with extra things that you will not need like search box, notification pop up etc.. Remove them from the master screen.

Set user related data

The master screen has access to few user related props. Put them in your new master screen. Use them like this ex. {this.props.userPhoto} {this.props.user.DisplayName}

On the logout button, add onClick to call the logout function ex.

<a onClick={this.props.logout}>Logour</a>

Available props

• {String} userPhoto - the user image
• {Object} user - the current logged in user in firebase - Firebase User
• {Function} logout - the logout function, no paramas
• {Function} printMenuItem - function for priting the menu. Param 1 menu items

Remove any content that appear in the content area

Remove any additional data such as breadcrumbs or titles in the template, since in our case they are comming from the childer element that we had incuded.

In this guide, you will learn how to obtain your Tiny MCE API key.

Create account on Tiny MCE website

Open Tiny MCE official website and create account. 

When you logged in with your account you will see your dashboard.

Generate Tiny MCE Api Key  

From the menu open API Key Manager and select Access and configure TinyMCE API Key here

Tiny MCE Api Key will be automatically generated. You only need to copy that key.

Add your domain

After you get your Tiny MCE Api key final step is to add your domain to accept requests.