Expo Prebuild, Demystified

My talk for React Advanced London 2024 (https://reactadvanced.com).

Aired 17:40 GMT on October 28th.

Transcript

1. Expo Prebuild, Demystified Jamie Birch
2. Contents • What is expo prebuild? • Templates • Building your own custom template • Continuous Native Generation
3. What is expo prebuild?
4. A “development build”
 based on expo-template-bare-minimum An Expo Go app
 based on expo-template-default npx create-expo-app npx expo prebuild But what if we want to go
 beyond an Expo Go app?
5. Templates
6. icograms.com App templates vs. prebuild templates These provide the starting boilerplate for an app (normally Expo Go). • default • blank • blank-typescript • tabs App templates No android or ios folders.
7. App templates vs. prebuild templates icograms.com bare-minimum can also be used as an app template: npx create-expo-app ‑‑template bare-minimum Prebuild templates These provide the native folders (android and ios). They may also specify some native dependencies in package.json. • bare-minimum
8. icograms.com App templates vs. prebuild templates The prebuilding process ˎ • Copies android & ios folders if missing.
 (use ‑‑clean to overwrite) • Merges and hoists the template’s {ios,android}/.gitignore. • Ensures you have an app.json. • Renames “HelloWorld” ➡ “MyApp”. • Upgrades the npm run ios/android scripts. • Merges the template’s dependencies into the app’s package.json. • Installs node_modules and CocoaPods. •Runs any config plugins and mods.
9. Building your own custom template
10. Let’s build a custom template 1/2: Forking an existing template 1. Take a copy of an existing template, e.g.:
 https://github.com/expo/expo/tree/main/ templates/expo-template-bare-minimum 2. Make any changes you’d like.
11. Let’s build a custom template 2/2: Sharing our custom template Consume templates via either of these commands:
 npx create-expo-app ‑‑template <template>
 npx expo prebuild ‑‑template <template> The value for <template> can be: 1. a file path to a local tarball (made with npm pack):
 --template path/to/template-1.0.0.tgz 2. a URL to a GitHub repository (must be public):
 --template https://github.com/:owner/:repo/tree/:ref
12. A real example: npx create-expo --template https://github.com/shirakaba/ jamie-expo-templates/tree/nativescript/templates/nativescript (username) (repository) (branch) (filepath)
13. Rerunning prebuild with custom templates Expo doesn’t “remember” the last template you prebuilt with. So if you’ve prebuilt your app from a custom template, remember to specify that same template in future when rerunning a prebuild! npx expo prebuild --template ./my-template-1.0.0.tgz ❌ npx expo prebuild --clean ✅ npx expo prebuild --clean --template ./my-template-1.0.0.tgz
14. Continuous Native Generation (CNG)
15. What is Continuous Native Generation? • As time passes, your native projects may go out of date. • CNG is the idea of keeping your native projects up to date by regenerating them (e.g. via prebuild). $ android $ ios % android % ios
16. Realising CNG with prebuild • bare-minimum updates along with the Expo SDK. • expo prebuild uses the version of bare-minimum corresponding to the expo package you have installed. • Keeping up to date is simple:
 npm install expo@latest npx expo prebuild ‑‑clean • To avoid losing manual modifications, declare them via Expo config plugins.
17. Conclusion • expo prebuild is the process of syncing native projects into an app template from a prebuild template. • You can build and share your own custom templates. • Continuous Native Generation is about keeping your native projects up to date by running a clean prebuild with each Expo SDK update.
18. Profile Tokyo Engineer at NativeScript TSC Chair @birch_js @shirakaba Thanks for watching! Jamie Birch