bsky-app/docs/build.md

Build instructions

App Build

• Set up your environment using the react native instructions.
• Setup your environment for e2e testing using detox:
  • yarn global add detox-cli
  • brew tap wix/brew
  • brew install applesimutils
• After initial setup:
  • Copy google-services.json.example to google-services.json or provide your own google-services.json. (A real firebase project is NOT required)
  • npx expo prebuild -> you will also need to run this anytime app.json or native package.json deps change
  • yarn intl:build -> you will also need to run this anytime ./src/locale/{locale}/messages.po change
• Start the dev servers
  • git clone git@github.com:bluesky-social/atproto.git
  • cd atproto
  • pnpm i
  • pnpm build
  • cd packages/dev-env && pnpm start
• Run the dev app
  • iOS: yarn ios
  • Android: yarn android
  • Web: yarn web
• If you are cloning or forking this repo as an open-source developer, please check the tips below as well
• Run e2e tests
  • Start in various console tabs:
    • yarn e2e:mock-server
    • yarn e2e:metro
  • Run once: yarn e2e:build
  • Each test run: yarn e2e:run
• Tips
  • Copy the .env.example to .env and fill in any necessary tokens. (The Sentry token is NOT required; see instructions below if you want to enable Sentry.)
  • To run on the device, add --device to the command (e.g. yarn android --device). To build in production mode (slower build, faster app), also add --variant release.
  • If you want to use Expo EAS on your own builds without ejecting from Expo, make sure to change the owner and extra.eas.projectId properties. If you do not have an Expo account, you may remove these properties.
  • npx react-native info Checks what has been installed.
  • If the Android simulator frequently hangs or is very sluggish, bump its memory limit
  • The Android simulator won't be able to access localhost services unless you run adb reverse tcp:{PORT} tcp:{PORT}
    • For instance, the locally-hosted dev-wallet will need adb reverse tcp:3001 tcp:3001
  • For some reason, the typescript compiler chokes on platform-specific files (e.g. foo.native.ts) but only when compiling for Web thus far. Therefore we always have one version of the file that doesn't use a platform specifier, and that should be the Web version. (More info.)

Adding Sentry

Adding Sentry is NOT required. You can keep SENTRY_AUTH_TOKEN= in .env which will build the app without Sentry.

However, if you're a part of the Bluesky team and want to enable Sentry, fill in SENTRY_AUTH_TOKEN in your .env. It can be created on the Sentry dashboard using these instructions.

If you change SENTRY_AUTH_TOKEN, you need to do yarn prebuild before running yarn ios or yarn android again.

Go-Server Build

Prerequisites

• Go
• Yarn

Steps

To run the build with Go, use staging credentials, your own, or any other account you create.

cd social-app
yarn && yarn build-web
cp ./web-build/static/js/*.* bskyweb/static/js/
cd bskyweb/
go mod tidy
go build -v -tags timetzdata -o bskyweb ./cmd/bskyweb
./bskyweb serve --pds-host=https://staging.bsky.dev --handle=<HANDLE> --password=<PASSWORD>

On build success, access the application at http://localhost:8100/. Subsequent changes require re-running the above steps in order to be reflected.

Various notes

Debugging

• Note that since 0.70, debugging using the old debugger (which shows up using CMD+D) doesn't work anymore. Follow the instructions below to debug the code: https://reactnative.dev/docs/next/hermes#debugging-js-on-hermes-using-google-chromes-devtools

Developer Menu

To open the Developer Menu on an expo-dev-client app you can do the following:

• Android Device: Shake the device vertically, or if your device is connected via USB, run adb shell input keyevent 82 in your terminal
• Android Emulator: Either press Cmd ⌘ + m or Ctrl + m or run adb shell input keyevent 82 in your terminal
• iOS Device: Shake the device, or touch 3 fingers to the screen
• iOS Simulator: Press Ctrl + Cmd ⌘ + z on a Mac in the emulator to simulate the shake gesture or press Cmd ⌘ + d

Running E2E Tests

• Make sure you've set your environment following the above
• Make sure Metro and the dev server are running
• Run yarn e2e
• Find the artifacts in the artifact folder

Polyfills

./platform/polyfills.*.ts adds polyfills to the environment. Currently, this includes:

• TextEncoder / TextDecoder

Sentry sourcemaps

Sourcemaps should automatically be updated when a signed build is created using eas build and published using eas submit due to the postPublish hook setup in app.json. However, if an update is created and published OTA using eas update, we need to take the following steps to upload sourcemaps to Sentry:

• Run eas update. This will generate a dist folder in your project root, which contains your JavaScript bundles and source maps. This command will also output the 'Android update ID' and 'iOS update ID' that we'll need in the next step.
• Copy or rename the bundle names in the dist/bundles folder to match index.android.bundle (Android) or main.jsbundle (iOS).
• Next, you can use the Sentry CLI to upload your bundles and source maps:
  • release name should be set to ${bundleIdentifier}@${version}+${buildNumber} (iOS) or ${androidPackage}@${version}+${versionCode} (Android), so for example com.domain.myapp@1.0.0+1.
  • dist should be set to the Update ID that eas update generated.
• Command for Android: node_modules/@sentry/cli/bin/sentry-cli releases \ files <release name> \ upload-sourcemaps \ --dist <Android Update ID> \ --rewrite \ dist/bundles/index.android.bundle dist/bundles/android-<hash>.map
• Command for iOS: node_modules/@sentry/cli/bin/sentry-cli releases \ files <release name> \ upload-sourcemaps \ --dist <iOS Update ID> \ --rewrite \ dist/bundles/main.jsbundle dist/bundles/ios-<hash>.map

OTA updates

To create OTA updates, run eas update along with the --branch flag to indicate which branch you want to push the update to, and the --message flag to indicate a message for yourself and your team that shows up on https://expo.dev. All the channels (which make up the options for the --branch flag) are given in eas.json. See more here

The clients which can receive an OTA update are governed by the runtimeVersion property in app.json. Right now, it is set so that only apps with the same appVersion (same as version property in app.json) can receive the update and install it. However, we can manually set "runtimeVersion": "1.34.0" or anything along those lines as well. This is useful if very little native code changes from update to update. If we are manually setting runtimeVersion, we should increment the version each time the native code is changed. See more here