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 codecanyon-22649230-react-app-builder-unlimited-number-of-apps.zip 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"

tnRD4SuAHOPCj9hML0ZZz54zuiY8hFxHCDLoBFen.png

Then copy the config string. 

FIwtBCyS0eX4OwBagCQDEw7k8QSZvcdXClgtbob1.png

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"

MJgdE4MsO943LIZEwmGi0AjjudXNgV7gp62VP1nH.png

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.

fUzpKg2ktMjb4PVCgzbRZdIubCABg0fWlSxnGHx5.png

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

rr77a8wOoaOlYzx1SstmLOda5uyNOXPPYnu0XhCN.png

Then, a pop up will appear. 

NFDhlKFILxh38cLLOHVqaBYYp4hVjLqgdL9qid1e.png

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. 

QUUZZymsiX0NqBLdAFdRO8Iy6JP3N7cyXjQr4Wn7.png

iLB5zSWpBwNfRV1nJQpPadBm4zqaeairq9E8N5OI.png




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.

jjJrA8MaAVfp4arNPHyeH7alhPdNBlN1zSNWSRTq.png

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 

qe83S1BmTWZnMf8Sgefmm0pKFzw93KrQs3CZ63GN.png

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

noPpZWk9PiDRbnNRPoIu7AZezp80HVFuFWfSVSdk.png

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

pHDOkSG5CpX3u7O1JogghnLEzUsmEwzSUtq53PQG.png

Enter your email and  password click Add user.

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

7x0qdMzrzFYh1LlUNnAikxI6NMlQlcYSl6PDsQ7Q.png

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

iwdobNBOMENd322Omtm6pufFbhGjiFle2Ac1SqrS.png