web works, now test ios

Jigsaw-Code · Mar 4, 2025 · fa7aa4a · fa7aa4a
1 parent b249af1
commit fa7aa4a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 47 deletions.
diff --git a/x/examples/web-wrapper/README.md b/x/examples/web-wrapper/README.md
@@ -7,85 +7,66 @@ This example demonstrates how to use the Outline SDK to create a censorship-resi
 > - [iOS](docs/ios.md)
 > - [Android](docs/android.md)
 
-## Running the example on the **iOS Simulator** via MacOS
 
-### Install dependencies
+## Starting the Web Wrapper demo site.
 
-* [Node.js](https://nodejs.org/en/), for the Capacitor build system.
-* [XCode](https://developer.apple.com/xcode/) and [cocoapods](https://cocoapods.org/). [Please follow CapacitorJS's environment setup guide](https://capacitorjs.com/docs/getting-started/environment-setup#ios-requirements)
+* You will need [Node.js](https://nodejs.org/en/) for the web server.
+* You will need [mkcert](https://github.com/FiloSottile/mkcert), which can be installed via `brew install mkcert`. The wrapper will not load the site without TLS.
 
 ```sh
-# the demo website requires SSL for the app to load properly
-brew install mkcert
-
-npm run reset
-```
+# Install the mkcert root CA:
+sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain "$(mkcert -CAROOT)/rootCA.pem"
 
-### Start the demo site
+# Add local.dev to the MacOS hosts file:
+sudo -- sh -c 'echo "127.0.0.1 local.dev" >> /etc/hosts'
 
-```sh
-# this creates the local certificate
+# Start the web server. This also creates the local certificate via `npm run cert:create`.
+npm ci
 npm run start:www
 ```
 
-### Apply the local SSL certificate authority to the simulator and start the app
-
-```sh
-# add local.dev to the MacOS hosts file
-echo "127.0.0.1 local.dev" >> /etc/hosts
-
-# open the iOS project
-npm run open:ios
-
-# open the finder window containing the root CA
-open "$(mkcert -CAROOT)"
-```
+Open `https://local.dev:3000` in your browser to make sure it's working. You should not see any errors.
 
-Start the app, drag the root CA that mkcert generated into the simulator, then restart the app.
 
+## Running the example on the **iOS Simulator** via MacOS
 
-## Running the example on the **Android emulator** via MacOS
-
-### Install dependencies
-
-* [Node.js](https://nodejs.org/en/), for the Capacitor build system.
-* [OpenJDK 17](https://stackoverflow.com/a/70649641) and [Android Studio](https://developer.android.com/studio/) [Please follow CapacitorJS's environment setup guide](https://capacitorjs.com/docs/getting-started/environment-setup#android-requirements)
+* Make sure the demo site is successfully running at `https://local.dev:3000` ([See above](#starting-the-web-wrapper-demo-site)).
+* You will need [XCode](https://developer.apple.com/xcode/) and [cocoapods](https://cocoapods.org/). [Please follow CapacitorJS's environment setup guide](https://capacitorjs.com/docs/getting-started/environment-setup#ios-requirements)
 
 ```sh
-# the demo website requires SSL for the app to load properly
-brew install mkcert
+# In a new terminal, open the iOS project:
+npm run open:ios
 
-npm run reset
+# Open the finder window containing the root CA:
+open "$(mkcert -CAROOT)"
 ```
 
-### Start the demo site
+Start the app in XCode, drag the root CA that mkcert generated into the simulator, the n restart the app.
 
-```sh
-# this creates the local certificate
-npm run start:www
-```
+## Running the example on the **Android emulator** via MacOS
 
-### Apply the local SSL certificate authority to the emulator and start the app
+* Make sure the demo site is successfully running at `https://local.dev:3000` ([See above](#starting-the-web-wrapper-demo-site)).
+* You will need [OpenJDK 17](https://stackoverflow.com/a/70649641) and [Android Studio](https://developer.android.com/studio/) [Please follow CapacitorJS's environment setup guide](https://capacitorjs.com/docs/getting-started/environment-setup#android-requirements)
 
 ```sh
-# get list of avd ids and pick one
+# Get the list of android virtual device (AVD) IDs and pick one:
 avdmanager list
 
-# once your chosen emulator is running
+# Start your chosen emulator:
 emulator -avd '<emulator id>' -writable-system
 
-# root and mount the emulator
+# Re-mount the emulator in a readable/writable state:
 adb root
 adb disable-verify
 adb reboot
 adb root
 adb remount
 
-# you should see 'remounted /** as RW'
-# now you can modify the emulator hosts file
+# You should see 'remounted /** as RW'.
+# Now you can modify the emulator hosts file:
 adb shell "echo '10.0.2.2 local.dev' >> /etc/hosts"
 
-# open the finder window containing the root CA
+# Open the finder window containing the root CA:
 open "$(mkcert -CAROOT)"
 ```
 

diff --git a/x/examples/web-wrapper/package.json b/x/examples/web-wrapper/package.json
@@ -25,7 +25,7 @@
   "scripts": {
     "clean": "npx rimraf node_modules/ output/ ios/capacitor-cordova-ios-plugins/ ios/DerivedData/ android/.gradle/ android/.idea/ android/capacitor-cordova-android-plugins/ android/local.properties android/app/build/",
     "reset": "npm run clean && npm ci && npx cap sync",
-    "cert:create": "mkdir -p output/cert && JAVA_HOME=$(/usr/libexec/java_home) mkcert -install && JAVA_HOME=$(/usr/libexec/java_home) mkcert -key-file output/cert/dev-key.pem -cert-file output/cert/dev.pem *.dev",
+    "cert:create": "mkdir -p output/cert && JAVA_HOME=$(/usr/libexec/java_home) mkcert -install && JAVA_HOME=$(/usr/libexec/java_home) mkcert -key-file output/cert/dev-key.pem -cert-file output/cert/dev.pem local.dev",
     "start:www": "npm run cert:create && npx serve --ssl-cert output/cert/dev.pem --ssl-key output/cert/dev-key.pem www",
     "open:ios": "npx cap open ios",
     "start:android": "npx cap run android"