Published on

Smart RGB lights [Part 5] - EAS builds

Authors
  • avatar
    Name
    Branimir Kirilov
    Twitter

Intro

In the preceding chapter, I completed the initial version of the Home automation app, which focused on controlling the lights. In this chapter, my focus is on creating an APK utilizing the EAS build service. To accomplish this, I referred to the official EAS setup guide, and below is a summary of the steps that I took.

Configuring EAS

Installing the CLI

  1. Install the eas-cli:
npm install -g eas-cli
  1. Login into Expo account
eas login
  1. Navigate to project folder and run:
eas build:configure

At this point, I got an error becuase I changed my app.json to app.config.js in the past. If you have converted your config file too, you'd probably receive the same error:

Warning: Your project uses dynamic app configuration, and the EAS project ID can't automatically be added to it.
https://docs.expo.dev/workflow/configuration/#dynamic-configuration-with-appconfigjs

To complete the setup process, set "extra.eas.projectId" in your app.config.js:

{
  "expo": {
    "extra": {
      "eas": {
        "projectId": "your_project_id"
      }
    }
  }
}

The resolution is easy - go to the config file and add the projectId in the extra object like it is defined above. If you don't have this property you'd need to create it. After this is done the configuration command should pass as expected.

Before I actually trigger a build I'll also modify the configuration in eas.json because I want to only generate an APK and not deploy to any app store:

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

Build APKs for Android Emulators and devices official docs

Starting a build

To start a build, I'll run the below command which specifies the preview profile that I defined above. This profile will result in an APK being generated.

eas build -p android --profile preview

Now, you should see indiciation that the build has started both in your terminal and in the EAS UI.

Defining secrets

In my expo config I'm using an environment variable that defines the host of the Wemos server. I have to create this variable in the EAS build too.

extra: {
    eas: {
      projectId: "PROJECT_GUID_GOES_HERE",
    },
    WEMOS_HOST: process.env.WEMOS_HOST,
}

There are several ways that you can define a secret in EAS, I'll do this through the UI console. It's as simple as navigating to the Secrets tab, clicking on Create and then defining the name and the value of the secret:

eas-secrets-tab

When the build runs, this secret will be automatically provided and you should be able to pick it up with process.env.SECRET_NAME. In order to actually use the secret in the code (in my case in LightService.ts) you can do this:

import Constants from 'expo-constants'

const WEMOS_URL = Constants?.expoConfig?.extra?.WEMOS_HOST

Keep in mind that although you're not checking in the secret in source control this way, anything that is included in your client side code should be considered public and readable to any individual that can run your application.

Installing the apk

After the build has completed succesfully, there are two ways to install the APK on a real device. One is through the UI. Navigate to the builds section and open your build.

eas-secrets-tab

eas-install-tab

Then, click on the install button and you'd see a modal with a QR code. Scan the code with your phone and this would download the APK. You'd have to allow untrusted apps to be installed on your phone in order to do this

The other way is to just check your terminal from where you have initiated the build, and the same QR code should be in there. The process after this is the same.

Result

After installing the APK on my device, I now have the standalone app and I can test it:

installed-app

🎉 After opening and testing the app everything works as expected! Awesome - my desk is lit now and I have a quick access on my phone to control it!

I'll keep enhancing this application in the future with various features. You can find all the source code and the current progress on GitHub.