diff --git a/.circleci/config.yml b/.circleci/config.yml index f700c3531..656861428 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -3,7 +3,7 @@ version: 2 jobs: test: docker: - - image: cimg/python:3.12.1-node + - image: cimg/python:3.12.11-node steps: - checkout - run: @@ -45,7 +45,7 @@ jobs: command: yarn test:validate-xml deploy: docker: - - image: cimg/python:3.12.1-node + - image: cimg/python:3.12.11-node steps: - add_ssh_keys: fingerprints: diff --git a/.cursor/rules/demo-run.mdc b/.cursor/rules/demo-run.mdc index 1738cc9b1..bbb7224c1 100644 --- a/.cursor/rules/demo-run.mdc +++ b/.cursor/rules/demo-run.mdc @@ -35,7 +35,7 @@ terminalWindows: This configuration sets up the necessary terminal windows: 1. "Hyperview Sync" - Keeps demo app in sync with source changes 2. "Demo Server" - Builds XML and hosts local demo server -3. "Demo iOS" - Runs Expo demo app for iOS (preferred platform) +3. "Demo iOS" - Compiles and runs the Hyperview demo development build (preferred platform) 4. "Demo Android" - Alternative to iOS for Android testing 5. For Android: Set up port forwarding (adb reverse tcp:8085 tcp:8085) @@ -44,5 +44,6 @@ This configuration sets up the necessary terminal windows: - The sync and server processes must be running for the demo to work - iOS is the preferred platform for testing - Use Android configuration only when specifically needed. Android requires setting port forwarding (adb reverse tcp:8085 tcp:8085) +- The demo is an Expo development build, not Expo Go. First `yarn ios` / `yarn android` compiles native code (several minutes). Uninstall Expo Go if Metro opens it instead. Physical devices: see the root README. - Each window will open in a new terminal window - Wait for the sync and server processes to fully start before the mobile app will work diff --git a/README.md b/README.md index 2d93d4a1e..c65dfd6de 100644 --- a/README.md +++ b/README.md @@ -85,7 +85,7 @@ From the `demo/` directory: yarn ios ``` -This will open the iOS simulator and install the demo app in the simulator. It will then start the Expo development server to load the demo app. +This will compile and install the demo app in the iOS simulator (first run takes a few minutes). It will then start the Expo development server to load the demo app. #### Running on the Android emulator @@ -96,31 +96,31 @@ adb reverse tcp:8085 tcp:8085 yarn android ``` -This will open an Android Virtual Device (AVD) and install the demo app in the emulator. It will then start the Expo development server to load the demo app. +This will compile and install the demo app in the emulator (first run takes a few minutes). It will then start the Expo development server to load the demo app. #### Running on a physical device -On your physical mobile device, install the Expo client +The demo uses a local Expo development build, not Expo Go. Plug in the device (Developer Mode on iOS, USB debugging on Android). Make sure your mobile device and development machine are connected to the same Wi-Fi network. -- [iOS App Store](https://itunes.apple.com/us/app/expo-client/id982107779?mt=8) -- [Google Play Store](https://play.google.com/store/apps/details?id=host.exp.exponent) +From the `demo/` directory: -Make sure your mobile device and development machine are connected to the same Wi-Fi network. +```sh +BASE_URL="http://X.X.X.X:8085" yarn ios --device +``` -From the `demo/` directory: +or ```sh -cd demo -BASE_URL="http://X.X.X.X:8085" yarn start +BASE_URL="http://X.X.X.X:8085" yarn android --device ``` > [!NOTE] > Replace `X.X.X.X` with the IP of your machine. This is needed in order for your physical device to be able to request the example XML files from your development machine. -This command will start an Expo development server and will display a QR code. +This compiles Hyperview onto the device (first run takes a few minutes) and starts Metro. Metro displays a QR code in the terminal. -- On your iOS device, open the Camera app and point it at the QR code on your screen. The Camera app should show an "Open in Expo" notification. Tap this notification. -- On your Android device, use the Expo app to scan the QR code on your screen. +- On your iOS device, open the Camera app and point it at the QR code in the terminal. The Camera app should show an "Open in Hyperview" notification. Tap this notification. +- On your Android device, open Hyperview and type `http://X.X.X.X:8081` in the development launcher. Google Camera will not open the QR code. ## Developing Hyperview Core Features @@ -146,6 +146,6 @@ yarn sync ../projects/my-cool-app ## Troubleshooting -> This version of the Expo app is out of date. Uninstall the app and run again to upgrade. +If Metro opens Expo Go instead of the Hyperview demo, uninstall Expo Go from the simulator or device and run `yarn ios` or `yarn android` again. -If you see this warning message on the Expo development server webpage, you need to uninstall the Expo app from the simulator or physical device and install the latest version. On a physical device, this means getting the latest version from an app store. In the simulator or AVD, this means uninstalling and re-running `yarn ios` or `yarn android`. +Physical iOS device builds require Automatic Signing with a Personal Team in Xcode. A paid Apple Developer account is not required. diff --git a/demo/.gitignore b/demo/.gitignore index 5e92d5698..84a505d78 100644 --- a/demo/.gitignore +++ b/demo/.gitignore @@ -9,6 +9,8 @@ dist/ hyperview/ # Native +/ios +/android *.orig.* *.jks *.p8 diff --git a/demo/app.config.ts b/demo/app.config.ts index caa4bd984..a41fe442e 100644 --- a/demo/app.config.ts +++ b/demo/app.config.ts @@ -1,19 +1,28 @@ export default { android: { adaptiveIcon: { - backgroundColor: '#ffffff', - foregroundImage: './assets/adaptive-icon.png', + backgroundColor: '#000000', + foregroundImage: './assets/icon.png', }, + package: 'org.hyperview.demo', + usesCleartextTraffic: true, }, assetBundlePatterns: ['**/*'], extra: { - baseUrl: process.env.BASE_URL || 'http://0.0.0.0:8085', + baseUrl: process.env.BASE_URL || 'http://127.0.0.1:8085', }, icon: './assets/icon.png', ios: { + bundleIdentifier: 'org.hyperview.demo', + infoPlist: { + CFBundleDisplayName: 'Hyperview', + NSAppTransportSecurity: { + NSAllowsLocalNetworking: true, + }, + }, supportsTablet: true, }, - name: 'demo', + name: 'Hyperview', newArchEnabled: true, orientation: 'portrait', scheme: 'hyperview', diff --git a/demo/assets/adaptive-icon.png b/demo/assets/adaptive-icon.png deleted file mode 100644 index 03d6f6b6c..000000000 Binary files a/demo/assets/adaptive-icon.png and /dev/null differ diff --git a/demo/backend/_includes/macros/about/styles.xml.njk b/demo/backend/_includes/macros/about/styles.xml.njk index 5ede0b6ac..a2e790d4e 100644 --- a/demo/backend/_includes/macros/about/styles.xml.njk +++ b/demo/backend/_includes/macros/about/styles.xml.njk @@ -13,4 +13,4 @@ borderRadius="18" margin="24" /> -