fix: separate "build" and "start" commands (#428)

* fix: separate "build" and "start" commands

* Update README.md

* separate start and build commands

* clarify starting script

Author: daniellacosse

x/examples/website-wrapper-app/.scripts/start.mjs

@@ -55,17 +55,6 @@ Then, run the following command to generate and place the assets in the appropri
 npx capacitor-assets generate --ios
 ```
 
-### Viewing your site in the example navigation iframe
-
-Many sites don't handle their own navigation - if this applies to you, you can run a proxy to demonstrate what your site would look like in an example same-origin navigation iframe.
-
-* You will need an [ngrok account](https://ngrok.com/), from which you can get your [`--navigatorToken`](https://dashboard.ngrok.com/get-started/your-authtoken)
-
-```sh
-npm run start -- --platform=ios --entryUrl="https://www.example.com" \
-  --navigatorToken="<YOUR_NGROK_AUTH_TOKEN>" --navigatorPath="/nav"
-```
-
 ### Publishing your app in the App Store
 
 [Follow these instructions on how to publish your app for beta testing and the App Store.](https://developer.apple.com/documentation/xcode/distributing-your-app-for-beta-testing-and-releases)
@@ -112,31 +101,40 @@ Then, run the following command to generate and place the assets in the appropri
 npx capacitor-assets generate --android
 ```
 
-### Viewing your site in the example navigation iframe
+### Publishing your app in the Google Play Store
+
+[Follow these instructions to learn how to publish your app to the Google Play Store](https://developer.android.com/studio/publish)
+
+## Available Configuration Options
+
+| Option              | Description                                                                     | Possible Values          |
+| ------------------- | ------------------------------------------------------------------------------- | ------------------------ |
+| `--platform`        | **(Required)** Specifies the target platform for the build.                                    | `"ios"` or `"android"`   |
+| `--entryUrl`     | **(Required)** The primary url of your website.                                             | Any valid url    |
+| `--appId`           | The unique identifier for the app (e.g., iOS Bundle ID, Android Application ID). | A reverse domain name string (e.g., `com.company.appname`) |
+| `--appName`         | The user-visible name of the application.                                       | Any valid application name string (e.g., "My Awesome App") |
+| `--output`          | The directory where the generated app project files will be saved.              | A valid, absolute file path (e.g., `/users/me/my-generated-app`) |
+| `--additionalDomains` | A list of other domains that should be accessible within the app.               | Comma-separated domains |
+| `--smartDialerConfig` | A JSON string containing the configuration for the [smart dialer feature](../../smart#yaml-config-for-the-smart-dialer).       | Valid JSON string       |
+
+## Viewing your site in the example navigation iframe
 
 Many sites don't handle their own navigation - if this applies to you, you can run a proxy to demonstrate what your site would look like in an example same-origin navigation iframe.
 
 * You will need an [ngrok account](https://ngrok.com/), from which you can get your [`--navigatorToken`](https://dashboard.ngrok.com/get-started/your-authtoken)
 
 ```sh
-npm run start -- --platform=android  --entryUrl="https://www.example.com" \
+npm run start:navigator -- --entryUrl="https://www.example.com" \
   --navigatorToken="<YOUR_NGROK_AUTH_TOKEN>" --navigatorPath="/nav"
 ```
 
-### Publishing your app in the Google Play Store
-
-[Follow these instructions to learn how to publish your app to the Google Play Store](https://developer.android.com/studio/publish)
+Once the server has started, you can then run the build commands above in a separate terminal to view the demo in your app.
 
 ## Available Configuration Options
 
 | Option              | Description                                                                     | Possible Values          |
 | ------------------- | ------------------------------------------------------------------------------- | ------------------------ |
-| `--platform`        | **(Required)** Specifies the target platform for the build.                                    | `"ios"` or `"android"`   |
 | `--entryUrl`     | **(Required)** The primary url of your website.                                             | Any valid url    |
-| `--appId`           | The unique identifier for the app (e.g., iOS Bundle ID, Android Application ID). | A reverse domain name string (e.g., `com.company.appname`) |
-| `--appName`         | The user-visible name of the application.                                       | Any valid application name string (e.g., "My Awesome App") |
-| `--output`          | The directory where the generated app project files will be saved.              | A valid, absolute file path (e.g., `/users/me/my-generated-app`) |
-| `--additionalDomains` | A list of other domains that should be accessible within the app.               | Comma-separated domains |
 | `--smartDialerConfig` | A JSON string containing the configuration for the [smart dialer feature](../../smart#yaml-config-for-the-smart-dialer).       | Valid JSON string       |
 | `--navigatorToken`  | Your ngrok authentication token for using the navigation proxy.                 | Your [ngrok auth token](https://dashboard.ngrok.com/get-started/your-authtoken)    |
 | `--navigatorPath`   | The path to use for the navigation iframe when using the navigation proxy. | Any valid path           |
@@ -152,4 +150,5 @@ When encountering an issue, the first thing you'll want to do is run the doctor
 ### Commonly occuring issues
 
 > [!NOTE]
-> TODO: compile a list of commonly occuring issues.
+> TODO: compile a list of commonly occuring issues.
+

x/examples/website-wrapper-app/README.md

@@ -21,9 +21,9 @@ import { createServer } from "vite";
 import minimist from "minimist";
 
 export default function main({
-  entryDomain = "www.example.com",
+  entryUrl = "https://www.example.com",
   navigatorToken,
-  navigatorPath = "/",
+  navigatorPath = "/nav",
 }) {
   return new Promise(async (resolve) => {
     const navigationServer = await createServer({
@@ -44,7 +44,7 @@ export default function main({
       }
 
       return proxyMiddleware.web(request, response, {
-        target: `https://${entryDomain}`,
+        target: entryUrl,
         changeOrigin: true,
       });
     });
@@ -87,9 +87,5 @@ if (import.meta.url.endsWith(process.argv[1])) {
     throw new Error("`--navigatorToken` must be set!");
   }
 
-  if (!args.navigatorPath) {
-    throw new Error("`--navigatorPath` must be set!");
-  }
-
   main(args).catch(console.error);
 }

x/examples/website-wrapper-app/basic_navigator_example/.scripts/start.mjs

@@ -21,8 +21,7 @@
     "open:android": "cd output/wrapper_app_project && npm run open:android",
     "open:ios": "cd output/wrapper_app_project && npm run open:ios",
     "reset": "npm run clean && npm ci",
-    "start:navigator": "node ./basic_navigator_example/.scripts/start.mjs",
-    "start": "node ./.scripts/start.mjs"
+    "start:navigator": "node ./basic_navigator_example/.scripts/start.mjs"
   },
   "private": true
 }