Step 1. Install React App Builder

Step 1. Setup your environment

You will need to set up 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
  • expo --version

Login in expo cli ( This is not recorded in the video above )

Run the command

expo login

Log in with your AppBuilder account.


What you should get

j3dyDRZ7I8o1xaQpnsttXvxCkbDfR18i8j6zyfgD.png

  1. Builder - This represents the builder of the mobile apps - the web project where you define the app
  2. Cloud Functions - Cloud Firestore Functions used to help the Builder do the job like encryption, mail sending...
  3. DOCS.html - Link to the documents
  4. Mobile App - The React Native Project - is the mobile app's code. There is also the script for compiling the apps
  5. SaaS Lading Page - The landing page for your DIY Mobile App Builder 
  6. SyncScripts - Shopify and Radio  data sync script
  7. App Maker Docs - Exported Docs so you can have your own support portal


Step 2. Connect to your Firebase 

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

tnRD4SuAHOPCj9hML0ZZz54zuiY8hFxHCDLoBFen.png

Then copy the config string. 

FIwtBCyS0eX4OwBagCQDEw7k8QSZvcdXClgtbob1.png


** Important Steps **


NdcpHVQEHwiMvTVggauiIwIj0LYvEJEKfrsPpxpi.png

Then in your Builder, in src/config/ folder there is "firebase_config.js" file.

Replace the config value there, with your value. 


P5hnPxlMELTuMR8iKJNtLlBKPPJKmV2mei1zNzks.png

Copy the file "firebase_config.js" and paste it in SaaS Landing Page /app-builder-landing/src/config.

Overwrite the existing file there


xteWioQrp1lko9Bz1PkqiPPJwoFqT8MGnUp1pbDW.png

Paste the same  "firebase_config.js"  file in Mobile app folder.

Overwrite the existing file there


iF0VblSCkOLfxS8rLR9SNEcO8C6gr2r7CZimvjhS.png

Paste the same "firebase_config.js" file in Cloud Functions/functions folder.

Overwrite the existing file there



Step 3. Start your app builder locally

Open the Build folder in the terminal or command line. 
Or, you can also open the folder in the Visual Studio CodeThey have a integrated terminal. 

2nu7VeJhWQ8ilnl3Iep65zPdqH8SDHw6bJRaVB6c.png

qsmvPuVPHdot7XPZU69zDKI2SkoLlL8ejr26nXxk.png


Then execute the commands 

npm install

You may get some warnings and errors during install. But this doesn't mean it will not work. So let's execute the next command

npm start

After running this command in your browser you should see a newly opened window looking like the one in the picture below.

If something goes wrong. Pls, check out our Common Problems page. If this is not answered there, send us a ticket

Include the log output from the terminal.

jjJrA8MaAVfp4arNPHyeH7alhPdNBlN1zSNWSRTq.png


Admin users

In Builder/src/config/app.js around line 18, you will find adminUsers array.

It should be empty. Add the email you registered in Firebase.

"adminUsers":["myemai@gmail.com"],


Build Account set

In Builder/src/config/app.js around line 317 (bottom), you will find buildAccountUsername and buildAccountPassword variables.

defaultExport.buildAccountUsername="mobidoniabuild";
defaultExport.buildAccountPassword="AppBuild";

Change the values with the build account you have created in this step.


Set your purchase code

Go in your CodeCanyon Downloads page, and locate the React App Builder - Unlimited number of apps

5vrE1HyPRkApPUkx8UBK1soQFkQWEgx5NmgWBrQ6.png

Download the License certificate & purchase code ( text )

Open it

Locate the Item purchase code

Vni5FswVEXY7vDlKmEBVAUO4gH6BVz7GNmX622xO.png

Copy it and paste it in Builder/src/config/app.js around line 315 in the variable licenseCode

licenseCode="YOUR ITEM PURCHASE CODE"


Login in the app builder

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

7x0qdMzrzFYh1LlUNnAikxI6NMlQlcYSl6PDsQ7Q.png

And after a successful login, you should see this screen. 

XLXaEouBbzNN1pFgNydX1TBpGYZmf2Tt4m0JCwvs.png

If Purchase code is invalid you will see this screen

mxVaUYKuoYcsvmHkEKyX7SE4iMpFwgovn6LFF7Zv.png


Set up Google Maps API Key 

Follow this additional step, to enable the Google MAPS widget in your Mobile App Builder.

Then continue with the next steps. 


Next


If you own Regular License follow

Step 2. Deploy React app builder


If you own Extended License - SaaS follow

Getting started with SaaS React App Builder