How to Set Up Expo Dev Client: A Complete Guide [2024]

Preface— Similar to many others, I am a complete beginner in Expo and React Native. I faced challenges while setting up the development client, as the official documentation proved less helpful. However, through experimentation and tinkering, I successfully navigated the process and fully configured it for development.

💡 Note: Expo Go and Expo Dev Client are not the same. Make sure you know which one you want to set up.

So, Let’s Get Started!

The following tutorial is tailored for Windows machines, specifically Windows 10 (64-bit). If you’re using a Mac or Linux, feel free to read through to grasp the overall process.

Contents —

1. Install Java Development Kit (JDK)
2. Setup Environment Variables : JAVA_HOME & JAVA Path
3. Download Android Studio
4. Configure SDK & Build Tools
5. Configure Android Emulator
6. Configure Android Environment Variables : ANDROID_HOME & Path
7. Install NodeJS
8. Setup Expo Project
9. Setup Expo Dev Client & Compile Expo Project Locally
10. Create Your First Debug-Development Build

What is Expo Dev Client ?

According to the official Expo documentation, opting for development builds instead of Expo Go grants you complete control over the native runtime. This allows you to install any native libraries, adjust project configurations, or even write your own native code.

In simpler terms, the default Expo configuration involves uploading the project to the Expo cloud and then receiving the build. However, this process seamlessly supports only Expo libraries. If you’re working with native libraries, such as @react-native-google-signin/google-signin, it doesn’t operate in the same manner.

Setting up Expo Dev Client: A Step-by-Step Guide

For this tutorial, you will need the JAVA Development Kit (JDK), Android Studio, and Node.

Step 1 : Install Java Development Kit (JDK)

Visit Oracle or OpenJDK Platform to download JDK, ensuring compatibility with your Gradle version. As of 2024, React Native is using Gradle 8.3, which is compatible with JDK 17.

Follow the installation guide and note the path where you are installing JAVA by default it is C:\Program Files\Java\jdk-17

Oracle JAVA Downloads Page

Step 2 : Setup Environment Variables : JAVA_HOME and JAVA Path

Search for ‘Environment Variables’ in the system properties. Within this section, you will find variables for your user account and system. It’s advisable to set variables for both.

Follow these steps:

1. Create a new variable in both system and user variables with the name ‘JAVA_HOME,’ and input the path where you installed your JDK
   (e.g., C:\Program Files\Java\jdk-17).
2. Locate the ‘Path’ variable under system variables. Add the path to your ‘jdk/bin’ folder (e.g., C:\Program Files\Java\jdk-17\bin).

Finally, to verify the setup, run ‘java - -version’ in the command prompt (cmd). If set up correctly, you should see the Java version information.

Step 3 : Download Android Studio

We need Android Studio to set up our emulator, SDK, and platform tools. Additionally, you can run your local build through the IDE.

Visit the official Android website and download the latest IDE. Follow the default installation guide and remember the installation path.

Android Studio Downloads Page

Step 4 : Configure SDK & Build Tools

After completing the installation, open Android Studio and open the SDK Manager.

Android Studio SDK Manager

Install the latest SDK version along with the version immediately prior to it for compatibility. For example, currently the latest SDK version is 34, thus install the version 33 as well.

Android Studio SDK Download Page

Along with the SDK, we require the necessary tools. While some tools are installed by default, in addition to them, we need:

1. Android SDK command line tools
2. Android SDK platform tools
3. Android SDK build tools
4. Android Emulator
5. Google play licening library (optional)

Just mark the checkbox and click Apply to install.

Android Studio SDK tools Download Page

Step 5 : Configure Android Emulator

We need to set up a default emulator to run your applications. While you can also run the apps on your device, it’s essential to have at least one emulator.

Head over to the Virtual Device Manager.

Android Studio Virtual Device Manager Page

At first, you may not see any new devices. Click + icon ‘Create New Virtual Device,’ choose any device, click ‘Next,’ and select the OS version and portrait orientation.

While setting up a new device, you may encounter an error related to Intel HAXM installation Failed. Follow this Stack Overflow answer guide to resolve it.

Once the setup is complete, you should be able to run your virtual device. It takes a few minutes to load, so be patient.

Android Studio Virtual Device

Step 6 : Configure Android Environment Variables : ANDROID_HOME & Path

To enable Expo and React Native to access the SDK tools correctly, we have to declare the paths for them in Environment Variables section similar to step 2

The location where your SDK tools are installed is given in the SDK Manager by default it’s in the users/AppData directory

Navigate to that path through File Explorer. Please note that the ‘AppData’ folder inside your user account is hidden by default. To access the AppData folder, you will need to enable ‘Show Hidden Files.’

Now, reopen your Environment Variables.

1. Create a new variable in both system and user variables with the exact name ‘ANDROID_HOME’ and include the path where you have installed your SDK (C:\Users\Username\AppData\Local\Android\Sdk).
2. Now, within the ‘Path’ variable located in both system and user variables, add the following paths. Be sure to replace ‘Username’ with your actual account name :
   - C:\Users\Username\AppData\Local\Android\Sdk
   - C:\Users\Username\AppData\Local\Android\Sdk\platform-tools
   - C:\Users\Username\AppData\Local\Android\Sdk\emulator
   - C:\Users\Username\AppData\Local\Android\Sdk\tools
   - C:\Users\Username\AppData\Local\Android\Sdk\tools\bin

Finally, you should be able to run the ADB shell inside CMD. Execute
‘adb - -version’ to validate your setup.

Android Studio SDK Installation Path

Step 7 : Install NodeJS

Download the stable version of Node; I am currently on 18.18.0 simply follow the default installation guide.

Validate your installation with the ‘node - -version’ command inside CMD.

Node JS Downloads Page

Step 8 : Setup Expo Project

Finally, we can begin with our Expo application. I use the following example to set up my application, which includes NativeWind-Tailwind support, the latest Expo SDK 50, Expo file-based routing, React Reanimated library, and TypeScript integration.

npx create-expo-app -e with-router-tailwind

Check if the project is working and there are no errors. Download the Expo Go Client on your real device from the Play Store or App Store. Then, execute the following command to run your Expo application on your device by scanning the QR code. Note that we are now running the application with the Expo Go Client.

npm run start

If everything is working correctly, download the EAS CLI to log in to your Expo dashboard.

npm install --global eas-cli

Once completed, use the following commands to log in to your dashboard. Create an Expo account here if you don’t have one.

eas login  // will prompt for username and password
eas whoami // will return your username

Create an eas.json file, which serves as your build configuration with three profiles. Learn more about them here. To create eas.json, run the following command in your project terminal.

eas:configure

I have updated my eas.json to specify the build type as APK, allowing for direct installation on my device.

{
  "cli": {
    "version": ">= 7.2.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

To validate, you can build your Expo application with the preview profile inside the Expo dashboard using the following command. However, note that you cannot build a development build since we have developmentClient set to true.

eas build -p android --profile preview

Step 9 : Setup Expo Dev Client & Compile Expo Project Locally

We need to install the Expo Dev Client library, which adds the necessary headers to your application to set up the development environment. Run the following command in project terminal

npx expo install expo-dev-client

Note: When you install the library, the default configuration to run the Expo project (using npm run start) will shift to a development build. Therefore, your Expo Go Client mobile application will not work. If you want to run it inside the Expo Client, you will have to switch to Expo Go using the terminal. Additionally, make sure you are not using any native libraries.

Switch Expo Dev Client to Expo Go Client

Compile your project locally using the following command.

npx expo run:android 

This utilizes the JDK we installed previously and SDK tools to generate Gradle files. It first creates .android folder inside project and also starts up your emulator to run the application. Please note that the compilation process takes around 15 minutes or more, so please be patient.

Step 10 : Create your first debug-development build

To create your first development build, use the following command:

eas build --profile development --platform android

This will send your application to the EAS server for compilation. You can track the progress in your dashboard after logging in.

Once completed, you can see the “Install” button to download the application (APK). Additionally, the terminal will prompt you to choose whether you want to run the application inside an emulator. I prefer running the application on a real device, so if you share the same preference, open the link inside your mobile’s browser and download the application.

Note: Don’t worry about the application size; it’s an unoptimized APK build.

Expo Dev Client Build Download

Once you download and install the application, you will see the following interface along with your application name at the top.

Expo Dev Client Debug Application Interface

Now go back to the project terminal and run the following command:

npx expo start --dev-client

Initially, the application may not automatically detect your development server, so you have to enter the URL manually. After the code compiles with the above command, it will provide you with a localhost URL, for example, http://localhost:8081.

In your application, replace the “localhost” part with your IP address. Ensure that your phone is connected to the same Wi-Fi network, and then enter the URL manually in the application, like http://192.168.0.100:8081, and you should see your application loading, it will support the hot-refresh feature similar to the Expo Go Client.

Note: Every time you install a new library, you have to build the application again using the above command and download/install the latest build on your device.

So, finally, take a deep breath. You have completed the setup for the Expo development client. Cheers! 🥂

Feel free to contact if you face any difficulties.
LinkedIn | Twitter (X)