hunk.code_window: The EAS Update extension provides the ability to view and load published updates in your development client.
   It's now available for all development clients `v0.9.0` and above. In order to install it, you'll need the most recent publish of `expo-updates`:
   <Terminal cmd={['$ npx expo install expo-dev-client expo-updates']} />
   #### Configure EAS Update
  
hunk.labels: keep keep keep replace keep keep keep keep
hunk.after_edit: It's available for all development clients `v0.9.0` and above. To install it, you'll need the most recent publish of `expo-updates`:
  
hunk.file_path: docs/pages/develop/development-builds/development-workflows.mdx
hunk.type: replace
file: ---
  title: Tools, workflows and extensions
  sidebar_title: Tools, workflows and extensions
  description: Learn more about different tools, workflows and extensions available when working with development builds.
  ---
  
  import ImageSpotlight from '~/components/plugins/ImageSpotlight';
  import { Terminal } from '~/ui/components/Snippet';
  import { Tab, Tabs } from '~/ui/components/Tabs';
  
  Development builds allow you to iterate quickly. However, you can extend the capabilities of your development build to provide a better developer experience when working in teams or customize the build to suit your needs.
  
  ## Tools
  
  ### Tunnel URLs
  
  Sometimes, restrictive network conditions make it difficult to connect to the development server. The `npx expo start` command exposes your development server on a publicly available URL that is accessible through firewalls from around the globe. This option is helpful if you are not able to connect to your development server with the default LAN option or if you want to get feedback on your implementation while you are developing.
  
  To get a tunneled URL, pass the `--tunnel` flag to `npx expo start` from the command line. For more information, see [Tunneling](/workflow/expo-cli/#tunneling).
  
  ### Published updates
  
  EAS CLI's `eas update` command bundles the current state of your JavaScript and asset files into an optimized "update". This update is stored on a hosting service by Expo. A development build of your app can load published updates without needing to check out a particular commit or leave a development machine running.
  
  ### Manually entering an update's URL
  
  When a development build launches, it will expose UI to load a development server, or to "Enter URL manually". You can provide a URL manually that will launch a specific branch. The URL follows this pattern:
  
  ```
  https://u.expo.dev/[your-project-id]?channel-name=[channel-name]
  
  # Example
  https://u.expo.dev/F767ADF57-B487-4D8F-9522-85549C39F43F?channel-name=main
  ```
  
  To get your project's ID, use the URL in the [Expo config's `expo.updates.url`](/versions/latest/config/app/#url) field. To see a list of channels, run `eas channel:list`.
  
  {/* TODO: @aman move this section out of this page -- make it part of the main path or a standalone guide, this is important part that should be searchable for eg: Deep linking URLs for Development builds/EAS Builds (when using expo-dev-client) */}
  
  ### Deep linking URLs
  
  You can load your app on a device that has a compatible build of your custom client by opening a URL of the form `{scheme}://expo-development-client/?url={manifestUrl}`. You'll need to pass the following parameters:
  
  | parameter     | value                                                                                                                                      |
  | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
  | `scheme`      | URL scheme of your client (defaults to `exp+{slug}` where [`slug`](/versions/latest/config/app/#slug) is the value set in the Expo config) |
  | `manifestUrl` | URL-encoded URL of an update manifest to load. The URL will be `https://u.expo.dev/[your-project-id]?channel-name=[channel-name]`          |
  
  Example:
  
  ```
  exp+app-slug://expo-development-client/?url=https%3A%2F%2Fu.expo.dev%2F767ADF57-B487-4D8F-9522-85549C39F43F%2F%3Fchannel-name%3Dmain
  ```
  
  In the example above, the `scheme` is `exp+app-slug`, and the `manifestUrl` is a project with an ID of `F767ADF57-B487-4D8F-9522-85549C39F43F` and a channel of `main`.
  
  ### QR Codes
  
  You can use our endpoint to generate a QR code that can be easily loaded by a development build.
  
  Requests send to `https://qr.expo.dev/development-client` when supplied the query parameters such as `appScheme` and `url` will receive a response with an SVG image containing a QR code that can be easily scanned to load a version of your project in your development build.
  
  | parameter   | value                                                                                                                                                                     |
  | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | `appScheme` | URL-encoded deeplinking scheme of your development build (defaults to `exp+{slug}` where [`slug`](/versions/latest/config/app/#slug) is the value set in the Expo config) |
  | `url`       | URL-encoded URL of an update manifest to load. The URL will be `https://u.expo.dev/[your-project-id]?channel-name=[channel-name]`                                         |
  
  Example:
  
  ```
  https://qr.expo.dev/development-client?appScheme=exp%2Bapps-slug&url=https%3A%2F%2Fu.expo.dev%2FF767ADF57-B487-4D8F-9522-85549C39F43F0%3Fchannel-name%3Dmain
  ```
  
  In the example above, the `scheme` is `exp+app-slug`, and the `url` is a project with an ID of `F767ADF57-B487-4D8F-9522-85549C39F43F` and a channel of `main`.
  
  ## Example workflows
  
  These are a few examples of workflows to help your team get the most out of your development build. If you come up with others that would be useful for other teams, please [submit a PR](https://github.com/expo/expo/tree/main/CONTRIBUTING.md#-updating-documentation) to share your knowledge!
  
  ### PR previews
  
  You can set up your CI process to publish an EAS Update whenever a pull request is updated and add a QR code that is used to view the change in a compatible development build.
  
  See [instructions for publishing app previews on pull requests](/eas-update/github-actions/#publish-previews-on-pull-requests) to implement this workflow in your project using GitHub Actions or serve as a template in your CI of choice.
  
  ## Extensions
  
  Extensions allow you to extend your development client with additional capabilities.
  
  ### Extending the dev menu
  
  The dev menu can be extended to include extra buttons by using the `registerDevMenuItems` API:
  
  ```tsx
  import { registerDevMenuItems } from 'expo-dev-menu';
  
  const devMenuItems = [
    {
      name: 'My Custom Button',
      callback: () => console.log('Hello world!'),
    },
  ];
  
  registerDevMenuItems(devMenuItems);
  ```
  
  This will create a new section in the dev menu that includes the buttons you have registered:
  
  <ImageSpotlight
    alt="An example of a custom menu button in expo-dev-menu"
    src="/static/images/dev-client/custom-menu-button.png"
    style={{ maxWidth: 400 }}
  />
  
  > Subsequent calls of `registerDevMenuItems` will override all previous entries.
  
  ### EAS Update
  
  <ImageSpotlight
    alt="An example list of EAS Update that can be loaded in the expo-dev-client."
    src="/static/images/dev-client/eas-updates-screen.png"
    style={{ maxWidth: 400 }}
  />
  
  The EAS Update extension provides the ability to view and load published updates in your development client.
  
  It's now available for all development clients `v0.9.0` and above. In order to install it, you'll need the most recent publish of `expo-updates`:
  
  <Terminal cmd={['$ npx expo install expo-dev-client expo-updates']} />
  
  #### Configure EAS Update
  
  If you have not yet configured EAS Updates in your project, you can find [additional instructions on how to do so here.](/eas-update/getting-started/)
  
  You can now view and load EAS Updates in your development build via the `Extensions` panel.
  
  ## Set runtimeVersion in Expo config
  
  When you create a development build of your project, you'll get a stable environment to load any changes to your app that are defined in JavaScript or other asset-related changes. Other changes to your app, whether defined directly in **ios/** and **android/** directories or by packages or SDKs you choose to install, will require you to create a new build of your development build.
  
  To enforce an API contract between the JavaScript and native layers of your app, you should set the [`runtimeVersion`](/distribution/runtime-versions) value in the Expo config. Each build you make will have this value embedded and will only load bundles with the same `runtimeVersion`, in both development and production.
  
  ## Build locally with Android Studio and Xcode
  
  > **warning** We do not recommend this method or modifying these **android/** and **ios/** directories directly, especially when creating a development build with EAS Build. For more information, see [Prebuild](/workflow/prebuild/).
  
  If you need to debug native code or you prefer to manage your native projects, you can build and distribute your project using the `npx expo run` commands. You'll need to set up or have access to Android Studio, Xcode, and related dependencies on your local computer.
  
  The [`npx expo run` commands](/workflow/expo-cli/#compiling) will create a new build, install it on your emulator/simulator or device, and start running it.
  
  <Tabs tabs={["For Android", "For iOS (macOS Only)"]}>
  
  <Tab>
  
  To build and run on an emulator:
  
  <Terminal cmd={['$ npx expo run:android']} />
  
  To build and run on a connected device:
  
  <Terminal cmd={['$ npx expo run:android -d']} />
  
  </Tab>
  <Tab>
  
  To build and run on a simulator:
  
  <Terminal cmd={['$ npx expo run:ios']} />
  
  To build and run on a connected device:
  
  <Terminal cmd={['$ npx expo run:ios -d']} />
  
  </Tab>
  
  </Tabs>
  
  Running the above commands generates native source code in their corresponding **android** and **ios** directories.
  