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.
- Install node and npm: Download it from here.
- Install GIT: Download it from here.
- Install Expo: Follow instructions for the local development tool and mobile client.
To verify your installation run
- node --version
- npm --version
- git --version
- Download and unzip the codecanyon-22649230-react-app-builder-unlimited-number-of-apps.zip file from CodeCanyon: Envato into your documents or development folder.
- Now in the REACT APP BUILDER/Builder and there is another zip and extract him. Infect this is the app builder source code.
- 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. )
- Run npm install
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.
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.
".write": "auth !== null"
Go in Databases ->Cloud Firestore
Then, a pop up will appear.
For now, use Start in test mode.
Firebase Storage by default is not initialized. You will need to click on "Storage" and active the Firestorage Bucket.
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.
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.