|
1 | | -This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). |
| 1 | +# React Native macOS prebuilds |
2 | 2 |
|
3 | | -# Getting Started |
| 3 | +## About |
4 | 4 |
|
5 | | -> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding. |
| 5 | +This repository contains prebuilt React Native macOS clients. |
6 | 6 |
|
7 | | -## Step 1: Start Metro |
| 7 | +Just as [Electron Fiddle](https://github.com/electron/fiddle) launches ready-built Electron clients to run fiddles, [React Native Fiddle](https://github.com/shirakaba/react-native-fiddle) launches ready-build React Native macOS clients to run fiddles. This repo is the factory that produces those ready-built clients. |
8 | 8 |
|
9 | | -First, you will need to run **Metro**, the JavaScript build tool for React Native. |
| 9 | +### What's in the client? |
10 | 10 |
|
11 | | -To start the Metro dev server, run the following command from the root of your React Native project: |
| 11 | +The clients are (for the most part) simply Hello World templates created by following the instructions in the React Native macOS [docs](https://microsoft.github.io/react-native-macos/docs/getting-started). |
12 | 12 |
|
13 | 13 | ```sh |
14 | | -# Using npm |
15 | | -npm start |
| 14 | +# Create a new React Native app via the React Native Community CLI template: |
| 15 | +# https://github.com/react-native-community/template/tree/0.79-stable/template |
| 16 | +npx @react-native-community/cli init rnmprebuilds --version 0.79 |
16 | 17 |
|
17 | | -# OR using Yarn |
18 | | -yarn start |
| 18 | +# Add React Native macOS on top: |
| 19 | +# https://github.com/microsoft/react-native-macos/tree/0.79-stable/packages/helloworld |
| 20 | +npx react-native-macos-init@latest --version 0.79.0 |
19 | 21 | ``` |
20 | 22 |
|
21 | | -## Step 2: Build and run your app |
| 23 | +### Deviations from the templates |
22 | 24 |
|
23 | | -With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app: |
| 25 | +Minimal tweaks may be applied in case the templates or dependencies have any issues causing build failures (see the commit history for full details). |
24 | 26 |
|
25 | | -### Android |
| 27 | +On top of that, we make some self-serving changes for the sake of [React Native Fiddle](https://github.com/shirakaba/react-native-fiddle), a mod of [Electron Fiddle](https://github.com/electron/fiddle). |
26 | 28 |
|
27 | | -```sh |
28 | | -# Using npm |
29 | | -npm run android |
30 | | - |
31 | | -# OR using Yarn |
32 | | -yarn android |
33 | | -``` |
| 29 | +#### Rename to "Electron" |
34 | 30 |
|
35 | | -### iOS |
| 31 | +To minimise divergence from the upstream Electron Fiddle as much as possible, we've renamed this client to `Electron.app`, and have also renamed the binary inside it to `Electron`. This will cause some confusion in places, but please bear with it. |
36 | 32 |
|
37 | | -For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps). |
| 33 | +#### The dev reload trigger file |
38 | 34 |
|
39 | | -The first time you create a new project, run the Ruby bundler to install CocoaPods itself: |
| 35 | +The client listens for file changes at: |
40 | 36 |
|
41 | | -```sh |
42 | | -bundle install |
| 37 | +``` |
| 38 | +~/Library/Application Support/uk.co.birchlabs.rnfiddleclient/trigger-reload.txt |
43 | 39 | ``` |
44 | 40 |
|
45 | | -Then, and every time you update your native dependencies, run: |
| 41 | +This crude IPC channel allows React Native Fiddle to trigger a dev reload of the client without prompting for TCC permissions even when the client lacks focus. |
46 | 42 |
|
47 | | -```sh |
48 | | -bundle exec pod install |
49 | | -``` |
| 43 | +## Notes to self |
50 | 44 |
|
51 | | -For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). |
| 45 | +Here's how I use this repo: |
52 | 46 |
|
53 | 47 | ```sh |
54 | | -# Using npm |
55 | | -npm run ios |
56 | | - |
57 | | -# OR using Yarn |
58 | | -yarn ios |
| 48 | +# Install npm dependencies |
| 49 | +bun install |
| 50 | + |
| 51 | +# Install CocoaPods |
| 52 | +cd macos |
| 53 | +pod install |
| 54 | +cd .. |
| 55 | + |
| 56 | +# Now generate a fine-grained GitHub Personal Access Token here: |
| 57 | +# https://github.com/settings/personal-access-tokens |
| 58 | +# - It should have access to the rnmprebuilds repo. |
| 59 | +# - It should also have the following repository permissions: |
| 60 | +# - Read access to metadata. |
| 61 | +# - Read and Write access to code. |
| 62 | +# Write it into .env.local in the format: `BUILD_CACHE_PROVIDER_TOKEN=github_pat_***` |
| 63 | +touch .env.local |
| 64 | + |
| 65 | +# To replace an existing v0.79.0 release, first delete the release from the |
| 66 | +# GitHub Releases page: https://github.com/shirakaba/rnmprebuilds/releases |
| 67 | +# |
| 68 | +# Next, delete the v0.79.0 tag. |
| 69 | +# |
| 70 | +# Finally, run this command from the repo root: |
| 71 | +node ./build-cache-provider/scripts/demo.js --publish |
59 | 72 | ``` |
60 | 73 |
|
61 | | -If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device. |
62 | | - |
63 | | -This is one way to run your app — you can also build it directly from Android Studio or Xcode. |
64 | | - |
65 | | -## Step 3: Modify your app |
66 | | - |
67 | | -Now that you have successfully run the app, let's make changes! |
68 | | - |
69 | | -Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh). |
70 | | - |
71 | | -When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload: |
72 | | - |
73 | | -- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS). |
74 | | -- **iOS**: Press <kbd>R</kbd> in iOS Simulator. |
75 | | - |
76 | | -## Congratulations! :tada: |
77 | | - |
78 | | -You've successfully run and modified your React Native App. :partying_face: |
79 | | - |
80 | | -### Now what? |
81 | | - |
82 | | -- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). |
83 | | -- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started). |
84 | | - |
85 | | -# Troubleshooting |
86 | | - |
87 | | -If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. |
88 | | - |
89 | | -# Learn More |
90 | | - |
91 | | -To learn more about React Native, take a look at the following resources: |
| 74 | +You may ask what exactly this script does. In `build-cache-provider/scripts/demo.js`, I've re-implemented most of the `expo run ios` command to support React Native macOS, right down to [Expo Fingerprint](https://expo.dev/blog/fingerprint-your-native-runtime) and the [build cache provider](https://expo.dev/blog/build-cache-providers-in-expo). This is normally offered through EAS, but I adapted Expo's official [example](https://github.com/expo/examples/tree/master/with-github-remote-build-cache-provider) of how to set up a self-hosted build cache provider, again adapting it to support React Native macOS. |
92 | 75 |
|
93 | | -- [React Native Website](https://reactnative.dev) - learn more about React Native. |
94 | | -- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. |
95 | | -- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. |
96 | | -- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. |
97 | | -- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. |
| 76 | +Put it all together and I have a way to generate an ad hoc signed debug-configuration build of the client and push it straight to GitHub Releases under the appropriate version tag, e.g. `v0.79.0`. It also pushes a build tagged with the fingerprint (e.g. `fingerprint.78a05957a66a7b75e56f2f06981173bc448677a4`) while it's at it, mainly for the self-serving purpose that I can more easily pick up the CLI script as-is and use it in other projects as a sort of `expo run macos` command in future. |
0 commit comments