Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Expo Prebuild, Demystified

Expo Prebuild, Demystified

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

Aired 17:40 GMT on October 28th.

Jamie Birch

October 28, 2024
Tweet

More Decks by Jamie Birch

Other Decks in Technology

Transcript

  1. Contents • What is expo prebuild? • Templates • Building

    your own custom template • Continuous Native Generation
  2. 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?
  3. 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.
  4. 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
  5. 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.
  6. 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.
  7. 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
  8. 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
  9. 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
  10. 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.
  11. 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.