• Stars
    star
    194
  • Rank 193,191 (Top 4 %)
  • Language
    TypeScript
  • Created about 3 years ago
  • Updated 28 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Custom Expo Updates Server & Client

This repo contains a server and client that implement the Expo Updates protocol specification.

Why

Expo provides a set of service named EAS (Expo Application Services), one of which is EAS Update which can host and serve updates for an Expo app using the expo-updates library.

In some cases more control of how updates are sent to an app may be needed, and one option is to implement a custom updates server that adheres to the specification in order to serve update manifests and assets. This repo contains an example server implementation of the specification and a client app configured to use the example server.

Getting started

Updates overview

To understand this repo, it's important to understand some terminology around updates:

  • Runtime version: Type: String. Runtime version specifies the version of the underlying native code your app is running. You'll want to update the runtime version of an update when it relies on new or changed native code, like when you update the Expo SDK, or add in any native modules into your apps. Failing to update an update's runtime version will cause your end-user's app to crash if the update relies on native code the end-user is not running.
  • Platform: Type: "ios" or "android". Specifies which platform to to provide an update.
  • Manifest: Described in the protocol. The manifest is an object that describes assets and other details that an Expo app needs to know to load an update.

How the expo-update-server works

The flow for creating an update is as follows:

  1. Configure and build a "release" version of an app, then run it on a simulator or deploy to an app store.
  2. Run the project locally, make changes, then export the app as an update.
  3. In the server repo, we'll copy the update made in #2 to the expo-update-server/updates directory, under a corresponding runtime version sub-directory.
  4. In the "release" app, force close and reopen the app to make a request for an update from the custom update server. The server will return a manifest that matches the requests platform and runtime version.
  5. Once the "release" app receives the manifest, it will then make requests for each asset, which will also be served from this server.
  6. Once the app has all the required assets it needs from the server, it will load the update.

The setup

Note: The app is configured to load updates from the server running at http://localhost:3000. If you prefer to load them from a different base URL (for example, in an Android emulator):

  1. Update .env.local in the server.
  2. Update updates.url in app.json and then run npx expo prebuild to sync the changes with the generated native code.

Create a "release" app

The example Expo project configured for the server is located in /expo-updates-client.

iOS

Run yarn and npx pod-install to install packages, and run it locally with yarn ios. In /expo-updates-client/ios/expoupdatesclient/Supporting/Expo.plist, you'll find a modified Plist that specifies the updates URL to point toward http://localhost:3000/api/manifest.

This app is configured to query this custom server for updates on launch, but only in the "release" version. To create this version, open Xcode, then open /expo-updates-client/ios. Click on the project's name in the top bar, then click "Edit scheme". In the modal, select "Release" for "Build configuration" (by default it's set to "Debug").

Then, build the app. You should see it open in an iOS simulator.

Android

Run yarn and then run yarn android --variant release. The AndroidManifest.xml specifies the updates URL to point toward http://localhost:3000/api/manifest.

Make a change

Let's make a change to the project in /expo-updates-client that we'll want to push as an over-the-air update from our custom server to the "release" app. cd in to /expo-updates-client, then make a change in App.js.

Once you've made a change you're happy with, inside of /expo-updates-server, run yarn expo-publish. Under the hood, this script runs npx expo export in the client, copies the exported app to the server, and then copies the Expo config to the server as well.

Send an update

Now we're ready to run the update server. Run yarn dev in the server folder of this repo to start the server.

In the simulator running the "release" version of the app, force close the app and re-open it. It should make a request to /api/manifest, then requests to /api/assets. After the app loads, it should show any changes you made locally.

About this server

This server was created with NextJS. You can find the API endpoints in pages/api/manifest.js and pages/api/assets.js.

The code signing keys and certificates were generated using https://github.com/expo/code-signing-certificates.

We chose to make this example with NextJS so that you can run one command to get the API running, and also so that you could deploy this to Vercel to load updates from a real server. If you choose to deploy this to Vercel, you'll need to find the URL the endpoints exist at, then update the Expo.plist for iOS with the URL under the EXUpdatesURL key, then rebuild a "release" app to include the new URL.

More Repositories

1

expo

An open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.
TypeScript
28,995
star
2

create-react-native-app

Create React Native apps that run on iOS, Android, and web
TypeScript
13,151
star
3

expo-cli

Tools for creating, running, and deploying universal Expo and React Native apps
TypeScript
2,590
star
4

examples

Example projects that demonstrate how to use Expo APIs and integrate Expo with other popular tools
JavaScript
1,567
star
5

router

[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps
TypeScript
1,358
star
6

react-native-action-sheet

A cross-platform ActionSheet for React Native
TypeScript
1,301
star
7

xde

The Expo Development Environment
JavaScript
1,168
star
8

ex-navigation

Route-centric navigation for React Native
JavaScript
1,003
star
9

google-fonts

Use any of the 1000+ fonts (and their variants) from fonts.google.com in your Expo app.
JavaScript
739
star
10

expo-github-action

Expo GitHub Action makes it easy to automate EAS builds or updates
TypeScript
714
star
11

expo-server-sdk-node

Server-side library for working with Expo using Node.js
TypeScript
674
star
12

fyi

Little bits of information that you may find useful when interacting with Expo tools and service. Append the markdown filename to https://expo.fyi/ to get a quick link to it.
667
star
13

eas-cli

Fastest way to build, submit, and update iOS and Android apps
TypeScript
648
star
14

vector-icons

JavaScript
638
star
15

expo-three

Utilities for using THREE.js on Expo
TypeScript
619
star
16

react-native-read-more-text

JavaScript
572
star
17

ex-navigator

Route-centric navigation built on top of React Native's Navigator
JavaScript
522
star
18

react-native-infinite-scroll-view

An infinitely scrolling view that notifies you as the scroll offset approaches the bottom
JavaScript
520
star
19

awesome-expo

Useful resources for creating apps with Exponent
468
star
20

exp

JavaScript
465
star
21

react-native-invertible-scroll-view

An invertible ScrollView for React Native
JavaScript
460
star
22

config-plugins

Out-of-tree Expo config plugins for packages that haven't adopted the config plugin system yet.
TypeScript
401
star
23

turtle

Standalone app builder service
TypeScript
386
star
24

vscode-expo

Expo Tools keep you productive with debugging, IntelliSense, and prebuild previews
TypeScript
377
star
25

orbit

Accelerate your development workflow with one-click build launches and simulator management from your macOS menu bar
TypeScript
346
star
26

snack

Expo Snack lets you run Expo in the browser.
TypeScript
340
star
27

react-native-appearance

Access operating system appearance information (currently only light/dark mode) on iOS, Android, and web
Java
337
star
28

expo-pixi

Tools for using pixi.js in Expo
JavaScript
300
star
29

use-unmount-signal

A React Hook to cancel promises when a component is unmounted
TypeScript
289
star
30

web-examples

Examples of using Expo in the browser.
JavaScript
273
star
31

image-upload-example

Demonstration of how to upload images from the ImagePicker, using a node backend to upload to S3
JavaScript
228
star
32

snack-web

TypeScript
214
star
33

expo-phaser

Use Phaser.js on mobile with Expo GL
JavaScript
212
star
34

sentry-expo

TypeScript
197
star
35

fluxpybird

some ideas involving games and Redux
JavaScript
179
star
36

stripe-expo

Use the Stripe HTTP API in Expo without the DOM, node, or native deps
JavaScript
160
star
37

react-native-responsive-image

A responsive Image component that chooses the best-resolution image for the current screen
JavaScript
160
star
38

react-native-loading-container

A container component that takes care of loading/catching timeouts/retrying
JavaScript
156
star
39

camerja

JavaScript
156
star
40

playlist-example

JavaScript
151
star
41

match-media

Universal polyfill for match media API using Expo APIs on mobile
TypeScript
131
star
42

dev-plugins

Out-of-tree Expo devtools plugins for packages that haven't adopted the Expo devtools plugin system yet.
TypeScript
119
star
43

react-native-fade-in-image

JavaScript
118
star
44

entity

Entity is a privacy-aware data layer for defining, caching, and authorizing access to application data models.
TypeScript
116
star
45

eslint-config-universe

Moved to https://github.com/expo/expo/tree/master/packages/eslint-config-universe
JavaScript
110
star
46

audio-recording-example

Audio Recording Example
TypeScript
109
star
47

redux-effex

Spin off async functions to perform side effects
JavaScript
108
star
48

auth0-example

This example has moved
JavaScript
108
star
49

expo-2d-context

A pure-js implementation of the W3C's Canvas-2D Context API that can be run on either Expo Graphics or WebGL
HTML
103
star
50

results

An efficient, standards-compliant library for representing results of successful or failed operations
TypeScript
102
star
51

firebase-storage-upload-example

This example has moved
JavaScript
98
star
52

sqlite-example

This example has moved
JavaScript
97
star
53

react-native-scrollable-mixin

A standard interface for your scrollable React Native components, making it easier to compose components.
JavaScript
94
star
54

expo-processing

Utilities for using Processing.js on Expo
JavaScript
93
star
55

videoplayer

Customizable controls for Expo video
JavaScript
83
star
56

snack-sdk

Snack SDK
JavaScript
83
star
57

react-apple-easing

Apple's default Core Animation easing functions for React
JavaScript
83
star
58

turtle-cli-example

Turtle CLI usage example (CircleCI & Travis CI)
Shell
81
star
59

dire-dire-ducks

Flood your room with water and rubber duckies!
JavaScript
77
star
60

status-bar-height

Listen to status bar changes during incoming calls and other multi-tasking events
JavaScript
73
star
61

expo-preview-action

With this preview action, you can test changes made in pull requests via Expo Go or custom development client (created with expo-dev-client) just by scanning QR code.
JavaScript
72
star
62

react-native-image-gallery

JavaScript
71
star
63

pomodoroexp

https://expo.io/@community/pomodoro
JavaScript
70
star
64

expo-three-ar

Utilities for using Expo AR with THREE.js
TypeScript
70
star
65

eas-build

TypeScript
61
star
66

react-native-refreshable-scroll-view

A ScrollView that supports pull-to-refresh. You can customize it with the RefreshIndicator and type of ScrollView (ex: ListView) of your choice.
JavaScript
61
star
67

spawn-async

A Promise-based interface into processes created by child_process.spawn
TypeScript
59
star
68

react-native-for-curious-people

Available through the Exponent iPhone or Android app:
JavaScript
59
star
69

browser-polyfill

Browser polyfill for making React Native compatible with web libs like pixi.js, three.js, phaser.js
JavaScript
52
star
70

xdl

The Expo Development Library
TypeScript
47
star
71

UpdatesAPIDemo

Demo app showing the useUpdates() API
TypeScript
46
star
72

harvard-cs50-app

Harvard's mobile application for CS50.
JavaScript
46
star
73

hello-graphql

JavaScript
44
star
74

expo-graphics

Tools to help simplify working with three, pixi, phaser, ect...
JavaScript
44
star
75

detox-expo-helpers

JavaScript
43
star
76

expo-asset-utils

Utilities for parsing files references, and Expo Assets.
TypeScript
42
star
77

styleguide

Foundational styles for Expo interfaces.
TypeScript
42
star
78

hackathon-examples

40
star
79

with-detox-tests

This template is no longer maintained! See https://github.com/yaron1m/expo-detox-typescript-example instead
JavaScript
39
star
80

react-native-scrollable-decorator

A standard interface for your scrollable React Native components, making it easier to compose components.
JavaScript
38
star
81

react-native-url-handler

Navigate to external URLs, handle in-app URLs, and access system URLs
Objective-C
36
star
82

rnplay

THIS REPOSITORY IS QUITE OLD AND NOT MAINTAINED! React Native Playground has been replaced by https://snack.expo.io. Look at this repository like you might look at tools in a museum, and don't touch it or actually use it
JavaScript
36
star
83

expo-twitter-login-example

This example has moved
JavaScript
34
star
84

react-native-image-picker-android

A camera and gallery image picker native module for Android, giving a subset of the API of https://github.com/marcshilling/react-native-image-picker
Java
34
star
85

react-loading-indicator

A loading indicator written purely in React that uses SVG and no images.
JavaScript
32
star
86

socket-io-example

This example has moved
29
star
87

koa-graphiql

Koa middleware to display GraphiQL, the interactive GraphQL UI
JavaScript
27
star
88

video-background-example

This example has moved
JavaScript
27
star
89

expo-electron-adapter

This package wraps `electron-webpack` and adds support for Expo web and other universal React packages.
TypeScript
27
star
90

eas-tests-example

Demo of running E2E tests on EAS Build
Java
26
star
91

gl-test

Examples and tests for OpenGL rendering in Expo.
JavaScript
26
star
92

three-ar-test

Using Expo's AR functionality with THREE.js
JavaScript
25
star
93

BrightSky

Learn how to use Expo with this simple weather app!
TypeScript
24
star
94

expo-postpublish-slack-notify

JavaScript
24
star
95

breakout

why not?
JavaScript
24
star
96

hyperinstall

Runs "yarn" and "npm install" in several directories with extreme speed when possible
JavaScript
23
star
97

pound-random

Expo Blue - a discussion app for small groups
JavaScript
22
star
98

electron-cookies

Provides document.cookie support for Electron
JavaScript
22
star
99

instapromise

Promisify node style async functions by putting a `.promise` after them (or after the object for methods)
JavaScript
21
star
100

floatyplane

JavaScript
21
star