Mobile App Development Setup

Setup guide for Chatwoot mobile app development

Setup guide for mobile app

Complete guide to setting up the Chatwoot mobile app for development and contribution.

Installation and setup

Prerequisites

Before starting, ensure you have the following installed:

To learn more about the most up-to-date instructions, please refer to the guide available here.

Clone the repository

Install dependencies

Install Expo CLI

Environment Variables

Create your environment configuration file:

Configure the following environment variables:

NameDescriptionDefault ValueRequired
EXPO_PUBLIC_CHATWOOT_WEBSITE_TOKEN
Web widget token for in-app support
-
No
EXPO_PUBLIC_CHATWOOT_BASE_URL
Self-hosted installation URL
Yes
EXPO_PUBLIC_JUNE_SDK_KEY
June analytics SDK key
-
No
EXPO_PUBLIC_MINIMUM_CHATWOOT_VERSION
Minimum supported Chatwoot version
-
Yes
EXPO_PUBLIC_SENTRY_DSN
Sentry DSN URL for error reporting
-
No
EXPO_PUBLIC_PROJECT_ID
Expo project identifier
-
Yes
EXPO_PUBLIC_APP_SLUG
Application slug for Expo
-
Yes
EXPO_PUBLIC_SENTRY_PROJECT_NAME
Project name in Sentry
-
No
EXPO_PUBLIC_SENTRY_ORG_NAME
Organization name in Sentry
-
No
EXPO_PUBLIC_IOS_GOOGLE_SERVICES_FILE
Path to iOS Google Services config file
-
No
EXPO_PUBLIC_ANDROID_GOOGLE_SERVICES_FILE
Path to Android Google Services config file
-
No
EXPO_APPLE_ID
Apple Developer account ID
-
No
EXPO_APPLE_TEAM_ID
Apple Developer team ID
-
No
EXPO_STORYBOOK_ENABLED
Enable/disable Storybook
false
No

Generate the native code

This command generates native Android and iOS directories using Prebuild.

You need to run pre-build if you add a new native dependency to your project or change the project configuration in Expo app config (app.config.ts).

How to run the app

Connect your iPhone/Android device and run the following command to install the app on your device.

iOS Development

Android Development

Package Installation

Please always install packages using the command npx expo install package-name instead of pnpm install package-name.

This is crucial for native dependencies because Expo will automatically install the correct compatible version, while pnpm/yarn/npm may install the latest version, which may not be compatible.

Push notification

If you are using the community edition of Chatwoot, you can now use the official mobile app with push notifications without any additional configuration.

For more details, please refer to the push notification documentation.

Build & Submit using EAS

We use Expo Application Services (EAS) for building, deploying, and submitting the app to app stores. EAS Build and Submit is available to anyone with an Expo account, regardless of whether you pay for EAS or use our Free plan.

You can sign up at Expo EAS.

Build the app

iOS Build

Android Build

Submit the app

iOS Submission

Android Submission

When you run the above command, you will be prompted to provide a path to a local app binary file. Please select the file that you built in the previous step:

  • iOS: .ipa file
  • Android: .aab file

It may take a while to complete the submission process. You will see the status of the submission on your terminal.

Troubleshooting

Contributing Guidelines

When contributing to the mobile app:

  1. Follow coding standards: Use ESLint and Prettier configurations
  2. Write tests: Include unit tests for new features
  3. Test on both platforms: Ensure iOS and Android compatibility
  4. Update documentation: Document new features and changes
  5. Check performance: Monitor app performance impact

Getting Help

If you encounter issues:

Useful Resources

Your Chatwoot mobile app development environment is now ready! 📱

Built with

Show your support! Star us on GitHub ⭐️