Learn Hermes JS Engine - Installation & Setup of Hermes

#Introduction

In episode 2 we understood Hermes' architecture in theory. Now it's time to get our hands dirty: installing and setting up Hermes in a React Native project.

Episode 3 covers three things: adding Hermes to the project, setting up the build environment for Android and iOS, then verifying that the running engine really is Hermes. Along the way, we also build hermesc from source as preparation for episode 4.

#Hermes in Modern React Native

Good news: since React Native 0.70, Hermes is the default engine on Android and iOS. If your project was created with that version, Hermes is already active with no extra configuration. But it's important to know how to turn it off and back on — because in old projects or during rollbacks, you'll need this.

#Adding Hermes to a New Project

Create a new project with the official template, then make sure Hermes is active:

npx react-native init BelajarHermes --version latest
cd BelajarHermes
npx react-native config

In modern React Native, the output of npx react-native config doesn't directly show the engine. The reliable way to check is in the native config files, as we discuss below. For old projects that don't use Hermes yet, you only need to enable the two flags below.

#Android Configuration

For Android, Hermes is controlled from the android/gradle.properties file. Add this line:

hermesEnabled=true

A value of false reverts to JavaScriptCore. After changing this file, sync Gradle:

cd android
./gradlew clean

#iOS Configuration

For iOS, Hermes is controlled from the ios/Podfile. Enable it with the :hermes_enabled line on the app target:

# IOS
platform :ios, min_ios_version_supported
prepare_react_native_project!
 
use_react_native!(
  :path => config[:reactNativePath],
  :hermes_enabled => true
)

After changing the Podfile, reinstall the pods:

cd ios
bundle exec pod install

bundle exec pod install reads the Podfile and includes the Hermes runtime in the Xcode project. Without the :hermes_enabled => true line, iOS falls back to JavaScriptCore.

#Building hermesc from Source

Even though the Hermes runtime ships bundled in React Native, building your own hermesc is useful for the bytecode experiments in episodes 4 and 5. The repo cloned in episode 0 is built with CMake:

cd hermes
cmake -S . -B build -DCMAKE_BUILD_TYPE=Release

cmake --build build --target hermesc -j 4

If it succeeds, the hermesc binary is at build/bin/hermesc. Verify it:

build/bin/hermesc -version

The output shows the Hermes version and the commit SHA used. Another quick path that avoids a long build: install a prebuilt compiler from npm, for example hermes-compiler, with npm install -g hermes-compiler.

#Setting Up the Android Build Environment

Before running the app, make sure the Android toolchain is complete:

• JDK 17 for modern AGP versions — check with java -version.
• Android SDK with the latest platform and build-tools.
• An emulator or physical device with ADB enabled.

Run the automated check:

npx react-native doctor

This command validates the JDK, Android SDK, emulator, and device connection. If everything is green, run the app:

npx react-native run-android

#Setting Up the iOS Build Environment

For iOS, the main requirements: macOS with Xcode and CocoaPods. Make sure the Xcode license is accepted:

sudo xcodebuild -license accept

Then build from the Xcode project or directly from the React Native CLI:

npx react-native run-ios

The iOS simulator has used Hermes since React Native 0.70, so the verification results in the next step apply here as well.

#Verifying Hermes on a Device or Emulator

There are three ways to confirm Hermes is really the engine running.

Method 1 — via the global HermesInternal. Hermes exposes the HermesInternal global object. Check it from the developer console or inside your code:

Check for HermesInternal

const isHermes = typeof globalThis.HermesInternal === "object";
console.log("Running on Hermes:", isHermes);

Method 2 — via the developer menu. On the emulator, press Ctrl+M (Android) or Cmd+D (iOS) to open the Dev Menu, then open Settings. If the engine shown is Hermes, the configuration worked.

Method 3 — via ADB. For Android, press Ctrl+M, select View Logs, and look for a line mentioning Hermes in adb logcat. We can filter for it directly:

adb logcat -s ReactNative:V | grep -i hermes

#Conclusion

Hermes is now installed and verified. Here's what you must take away:

• Hermes is the default in React Native 0.70+, but understanding explicit activation is still important.
• Android is controlled via hermesEnabled=true in android/gradle.properties.
• iOS is controlled via :hermes_enabled => true in ios/Podfile, then pod install.
• hermesc can be built from source with CMake or installed quickly from npm.
• Verify the engine via HermesInternal, the Dev Menu settings, or adb logcat.

Next, in episode 4 we dissect the build pipeline: Hermes' integration with the Metro bundler, the role of HermesBytecodePlugin, and how to read the artifact output along with source maps. See you there!