RTE App Builder Quickstart Guide
The RTE App Builder (beta) lets you build a complete, customizable video calling application from scratch without writing any code! You can deploy this to 6 different platforms (Web, IOS, Android, Windows, Mac, Linux) from the same codebase.
Get started by navigating to https://appbuilder.agora.io.
You can start by configuring the RTE App Builder.
Here we can key in some details like the project name which is an alphanumeric identifier.
And we can give the project a Display Name. This would be displayed in the app launcher, desktop, etc.
Also, we can upload images for customization. The square logo is your app icon, rectangle logo is displayed on the home (join) screen. You can also customize the illustration or background as needed.
Next, you can configure the join screen and optionally add OAuth.
In the Agora credentials you would need to enter your Agora App ID and app certificate. If you don’t have an App ID, you can get one by following this guide.
Now we can pick and choose what features we want in the video calling application.
Finally, we can select the platforms and download the source code.
To deploy your backend easily, you can use the deploy to Heroku button. This will launch the Heroku wizard to create a new backend.
Scroll down and click the deploy button. This will now deploy the backend. It should take a couple of minutes. Once this is done, take a note of the heroku URL where this backend is deployed.
We can now extract the downloaded source code and navigate to the agora-app-builder folder. Open config.json in a text editor and add the obtained backend URL inside the file.
config.json
Make sure you have nodejs and git installed to build the source code. Open a terminal inside the extracted source code and type npm i && npm start. This will download the application and install it.
Building for Web
Now let’s try and deploy this web app in netlify. Note that we should deploy the website before we continue to build other platforms since other platforms would need the front-end URL to create meeting links. Run cd < projectName > to navigate into the frontend project directory. Now you can run npm run web to test out a dev version. If everything is working well, you can now deploy it to a CDN.
We can deploy the web app by running npm run web:build. This will generate the built website in the agora-app-builder//dist directory.
This project uses “react-router” to perform front-end routing. So, you need to configure your website host (or webserver) to redirect all the requests to index.html. We have already provided the config for the two most popular SPA hosts: Vercel and Netlify.
vercel.json
_redirects (for netlify)
Copy-paste the appropriate redirect file into dist (which contains index.html and js).
Drag and drop the dist folder into netlify or use the vercel CLI to deploy to vercel.
You will now get the deployed frontend URL. Set the key frontEndURL to < the deployed URL > in config.json (of agora-app-builder directory).
config.json
Run npm start in agora-app-builder directory (rebuilds the source code with the new front-end URL).
Now any other target can be built—(IOS, Android, Mac, Windows, Linux). This is because the Apps require the frontend URL (universal links).
Building for Desktop (Mac, Windows, Linux)
Navigate to the frontend directory agora-app-builder/< projectName >/ in a terminal.Create an empty folder called .electron here.
You can run npm windows or npm run mac to produce a development build. If everything looks good you can run;npm run windows:build or npm run mac:build or npm run linux:build for production release (exe/dmg/AppImage).
The binary will be located at agora-app-builder/< projectName >/out.
For Code Signing, refer to this guide.
Building for Android
First, connect your Android device to the system with debugging on. Type adb devices to verify if the device is connected. Now navigate to the frontend directory agora-app-builder/< projectName >/ in a terminal. Run npm start. This will start the development server
Now, open another terminal in the same folder and run npm run android.
This will deploy the app on the Android device. The app will connect to the development server.
To generate a production build (apk file), go to the < projectName >/android folder and run ./gradlew build assembleRelease.
For Code Signing, refer to this guide.
Building for IOS
Connect IOS device to the system, create an apple developer account, and register the device for development.
Navigate to the frontend directory agora-app-builder/< projectName >/ in a terminal and run npx pod-install to install IOS dependencies. Once pod install is done, open the .xcworkspace file located in < projectName >/ios folder using XCode.
Open the info tab and add the following:
- Camera permission—Privacy Camera description
- Mic permission—Privacy Microphone description
- Add a new URI scheme—set scheme as the lowercase version of
projectName(for deep links)
Set the device as your physical devices and run the project by clicking the Run button in XCode.
Note: Simulators won’t work since the IOS simulator can’t access cameras.
For Code Signing, refer to this guide.
