Read the full tutorial here: [>> How to Build an Ionic Chat App]

Live Demo

This example shows How to Build an Ionic Chat App:

This demo uses:

• CometChat
• Ionic
• Capacitor
• Chooser
• Image Picker
• Firebase
• React
• Uuid
• Validator

To run the demo follow these steps:

2. From the dashboard, add a new app called "ionic-chat-app"
3. Select this newly added app from the list.
4. From the Quick Start copy the APP_ID, APP_REGION and AUTH_KEY. These will be used later.
5. Also copy the REST_API_KEY from the API & Auth Key tab.
6. Navigate to the Users tab, and delete all the default users and groups leaving it clean (very important).
7. Head to Firebase and create a new project
8. Create a file called env in the root folder of your project.
9. Import and inject your secret keys in the env file containing your CometChat and Firebase in this manner.

REACT_APP_FIREBASE_API_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_FIREBASE_AUTH_DOMAIN=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_FIREBASE_STORAGE_BUCKET=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx

REACT_APP_COMETCHAT_APP_ID=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_COMETCHAT_REGION=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_COMETCHAT_AUTH_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx

11. Install capacitor cli with version 2.4.1

npm install -g @capacitor/cli@2.4.1

12. Install ionic cli

npm install -g @ionic/cli

12. cd to your root folder and hit npm i to install the packages.
13. Run the following statement.

cap sync

14. Run cd to the ios/App folder then run pod install to install the pods. Once pods are installed run cd .. to go back to the root folder.
15. build the project by running the following statement.

ionic build

16. Copy the build folder to your native platform

cap copy

17. Make sure to include .env file in your gitIgnore file from being exposed online.
18. Run the project by using Android Studio/Xcode. For more information you can refer to the Ionic documentation

• 🏠 CometChat Homepage
• 🚀 Create your free account
• 📚 Documentation
• 👾 GitHub
• 🔥 Firebase
• 🔷 Ionic