Develop, Deploy, and Test Apps with Expo Development Client
What’s Expo?
Expo is a set of tools, libraries, and services which let you build native iOS and Android apps by writing JavaScript.
Expo apps are React Native apps which contain the Expo SDK. The SDK is a native-and-JS library which provides access to the device's system functionality (things like the camera, contacts, local storage, and other hardware). That means you don't need to use Xcode or Android Studio, or write any native code, and it also makes your pure-JS project very portable because it can run in any native environment containing the Expo SDK.
Installation
There are two tools that you need to develop apps with Expo: a local development tool and a mobile client to open your app.
Local Development Tool: Expo CLI
npm install -g expo-cli
If you haven't created an Expo account before, you'll be asked to create one when running the build command.
Mobile Client: Expo for iOS and Android
Develop
Creating the project
expo init to create a project. You'll be asked to name your project. The project will be created in a new directory with that name in the current working directory. I'll call mine AwesomeProject, and press Enter.
tabs option since that will give us a good starting point.
react, react-native and expo.
Configure app.json
{ "expo": { "name": "Your App Name", "icon": "./path/to/your/app-icon.png", "version": "1.0.0", "slug": "your-app-slug", "sdkVersion": "XX.0.0", "ios": { "bundleIdentifier": "com.yourcompany.yourappname" }, "android": { "package": "com.yourcompany.yourappname" } } }
-
- The iOS
bundleIdentifier and Android
package fields use reverse DNS notation, but don't have to be related to a domain. Replace
"com.yourcompany.yourappname" with whatever makes sense for your app.
- The iOS
-
- You're probably not surprised that
name,
icon and
version are required.
- You're probably not surprised that
-
slug is the url name that your app's JavaScript is published to. For example:
expo.io/@community/native-component-list, where
community is my username and
native-component-list is the slug.
-
- The
sdkVersion tells Expo what Expo runtime version to use, which corresponds to a React Native version. Although
"XX.0.0" is listed in the example, you already have an
sdkVersion in your app.json and should not change it except when you want to update to a new version of Expo.
- The
Start the development server
Navigate to your project folder and type npm start to start the local development server of Expo CLI.
cd AwesomeProject expo start
On Expo Dev Tools, we can run on Android device/ emulator or iOS simulator. Here is a brief breakdown of the new browser experience:
- It’s easy to view logs from multiple devices simultaneously.
- We made switching connections and connecting to your devices easier to navigate. There are three options: localhost, LAN, and Tunnel.
- We’ll let you know if you lose your network connection.
- More clarity around issues and warnings to help you through annoying situations.
- You can still scan a QR code or send a link to your project to your phone.
- The Publish step acts as a guide to help you keep your published project pages looking sharp
Deploy
Here's how to deploy an Expo React Native app.
Start the build
Run expo build:android or
expo build:ios. If you don't already have a packager running for this project,
exp will start one for you.
If you choose to build for Android
Note: If you choose the first option and later decide to upload your own keystore, we currently offer an option to clear your current Android keystore from our build servers by runningThis is irreversible, so only run this command if you know what you are doing!
expo build:android --clear-credentials.
in the Android documentation
You can download a backup copy of the keystore by running
expo fetch:android:keystore. If you do not have a local copy of your keystore , you will be unable to publish new versions of your app to the Play Store. Your only option would be to generate a new keystore and re-upload your application as a new application. You can learn more about how code signing and keystores work
.
If you choose to build for iOS
exp client create the necessary credentials for you, while still having a chance to provide your own overrides. Your Apple ID and password is used locally and never saved on Expo's servers. In this blog, I will skip the build part for iOS.
Testing
There are several ways to get the client app into a test environment.
- Install Expo Client App from a device's App Store
- This is the simplest and easiest way, and the one we recommend for all developers.
- Build Expo Client App on your computer and side-load it onto a device
- The client apps are open-source, and their readme contains instructions on how to compile them locally and install them onto devices attached to your computer by a USB cable.
- Run Expo Client App on your computer in a device Emulator/Simulator
- The client apps github repository also includes instruction on how to build and run the iOS Client App in the Xcode Device Simulator, and the Android Client App in the Android Studio Device Emulator.
- Download apk or ipa files and upload them into Kobiton Store for testing
Publish
expo publish. No setup is required, go ahead and create a new project and publish it without any changes and you will see that it works.
Deploying to the App Store and Play Store
Testing your React Native apps on real devices
In this part, I will guide you how to use Kobiton Cloud to test your apps. A Kobiton account is required to access Kobiton system. If you do not have a Kobiton account yet, go ahead to create a free trial account and sign in. It takes just a few moments.
- Uploading Mobile Apps to Kobiton Store for Testing
- Navigate to https://portal.kobiton.com/apps and upload your apps
- The file extension can be .apk, .ipa or .zip
- The file size exceeds 500mb
- Select menu to view Automation snippet code
- Launch a manual test with your expected device
- Navigate to https://portal.kobiton.com/devices and launch your device
- Select APPS tab and install your app into the real device
- We have several ways to install an app. Another way is from your local file or from public URL.
- Modify your desiredCaps to automate your app with the expected device
- You can set your test to reference the application at the Kobiton Storage URL with the app capability, as shown in this example for Java.
-
DesiredCapabilities capabilities = new DesiredCapabilities(); capabilities.setCapability("app", "kobiton-store:1024"); capabilities.setCapability("deviceGroup", "KOBITON"); capabilities.setCapability("deviceName", "Galaxy S8+"); capabilities.setCapability("platformVersion", "7.0"); capabilities.setCapability("platformName", "Android");