• Stars
    star
    295
  • Rank 140,902 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated 4 months ago

Reviews

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

Repository Details

A simplified demonstration of expo-updates protocol use.

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
33,454
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,608
star
4

examples

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

react-native-action-sheet

A cross-platform ActionSheet for React Native
TypeScript
1,384
star
6

router

[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps
TypeScript
1,367
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

eas-cli

Fastest way to build, submit, and update iOS and Android apps
TypeScript
800
star
10

react-conf-app

TypeScript
791
star
11

google-fonts

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

expo-github-action

Expo GitHub Action makes it easy to automate EAS builds or updates
TypeScript
782
star
13

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.
759
star
14

expo-server-sdk-node

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

vector-icons

JavaScript
646
star
16

expo-three

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

react-native-read-more-text

JavaScript
572
star
18

ex-navigator

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

react-native-infinite-scroll-view

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

awesome-expo

Useful resources for creating apps with Exponent
468
star
21

exp

JavaScript
465
star
22

react-native-invertible-scroll-view

An invertible ScrollView for React Native
JavaScript
460
star
23

config-plugins

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

orbit

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

vscode-expo

Expo Tools keep you productive with debugging, IntelliSense, and prebuild previews
TypeScript
425
star
26

turtle

Standalone app builder service
TypeScript
384
star
27

snack

Expo Snack lets you run Expo in the browser.
TypeScript
366
star
28

react-native-appearance

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

expo-pixi

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

use-unmount-signal

A React Hook to cancel promises when a component is unmounted
TypeScript
292
star
31

web-examples

Examples of using Expo in the browser.
JavaScript
272
star
32

image-upload-example

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

snack-web

TypeScript
215
star
34

expo-phaser

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

sentry-expo

TypeScript
201
star
36

fluxpybird

some ideas involving games and Redux
JavaScript
179
star
37

stripe-expo

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

react-native-responsive-image

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

react-native-loading-container

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

camerja

JavaScript
156
star
41

dev-plugins

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

playlist-example

JavaScript
151
star
43

entity

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

match-media

Universal polyfill for match media API using Expo APIs on mobile
TypeScript
136
star
45

react-native-fade-in-image

JavaScript
118
star
46

atlas

Visualize React Native bundles to understand and optimize your app.
TypeScript
114
star
47

eslint-config-universe

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

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
110
star
49

audio-recording-example

Audio Recording Example
TypeScript
109
star
50

redux-effex

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

auth0-example

This example has moved
JavaScript
108
star
52

results

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

firebase-storage-upload-example

This example has moved
JavaScript
98
star
54

sqlite-example

This example has moved
JavaScript
97
star
55

react-native-scrollable-mixin

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

expo-processing

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

videoplayer

Customizable controls for Expo video
JavaScript
83
star
58

snack-sdk

Snack SDK
JavaScript
83
star
59

react-apple-easing

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

turtle-cli-example

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

eas-build

TypeScript
77
star
62

dire-dire-ducks

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

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
75
star
64

status-bar-height

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

expo-three-ar

Utilities for using Expo AR with THREE.js
TypeScript
72
star
66

react-native-image-gallery

JavaScript
71
star
67

pomodoroexp

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

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
69

spawn-async

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

react-native-for-curious-people

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

UpdatesAPIDemo

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

browser-polyfill

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

xdl

The Expo Development Library
TypeScript
47
star
74

harvard-cs50-app

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

styleguide

Foundational styles for Expo interfaces.
TypeScript
45
star
76

hello-graphql

JavaScript
44
star
77

expo-graphics

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

detox-expo-helpers

JavaScript
43
star
79

expo-asset-utils

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

hackathon-examples

40
star
81

with-detox-tests

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

react-native-scrollable-decorator

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

react-native-url-handler

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

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
85

expo-twitter-login-example

This example has moved
JavaScript
34
star
86

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
87

eas-tests-example

Demo of running E2E tests on EAS Build
Java
33
star
88

react-loading-indicator

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

socket-io-example

This example has moved
29
star
90

expo-electron-adapter

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

koa-graphiql

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

video-background-example

This example has moved
JavaScript
27
star
93

gl-test

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

three-ar-test

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

BrightSky

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

expo-postpublish-slack-notify

JavaScript
24
star
97

breakout

why not?
JavaScript
24
star
98

hyperinstall

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

electron-cookies

Provides document.cookie support for Electron
JavaScript
22
star
100

pound-random

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