Step 1. Install React App Builder

STEP 1. Setup your environment

You will need to setup your computer to prepare for configuring the React App Builder.

You will need Node + NPM to build the phone apps, GIT for version control, and Expo for development testing.

  1. Install node and npm: Download it from here.
  2. Install GIT: Download it from here.
  3. Install Expo: Follow instructions for the local development tool and mobile client.

To verify your installation run

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

Extract and initialize the React App Builder code base.

  1. Download and unzip the file from CodeCanyon: Envato into your documents or development folder.
  2. Now in the REACT APP BUILDER/Builder and there is another zip and extract him. Infect this is the app builder source code.
  3. Open the extracted folder from the previous step in Terminal or Command line (NOTE:  First  delete package-lock.json file located in the builder that you extracted. )
  4.  Run npm install

STEP 2. Create Firebase account

All the data is store in Firebase Realtime Database and Firestore database.

In Firebase we store the informations about the app, like colors, navigation etc..

And in Firestore is where our actual data is. Like menu content, categories, orders etc..

We use Firebase because it has import function. 

Let's get started. Create an account in Firebase with your google account. 

Create Firebase Project. 

Then go in Project settings, and click on "Add Firebase to your web app"


Then copy the config string. 


Then in your builder, in root folder there is "firebase_config.js" file. At start replace the config for firebase there.

You mobile app is set up now and connected to Firebase.

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": true,
     ".write": "auth !== null"

Create Firestore Database

Go in Databases ->Cloud Firestore


Then, a pop up will appear. 


For now, use Start in test mode. 

Initialize Firebase Storage

Firebase Storage by default is not initialized. You will need to click on "Storage" and active the Firestorage Bucket. 



Step 3. 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.


And after successful login you should be able to start using your App Builder and see something like in the picture below.