Outline App Maker

Getting Started

To verify that your system has the necessary dependencies to generate your web wrapper project, run the web wrapper doctor:

./doctor

Building the app project for Android

Note

If you want to build Android on Windows, please use Windows Subsystem for Linux (WSL)

• You will need:
  • the url you want to load initially in your app.
  • Node.js for the project setup and web server.
  • go to build the SDK library.
  • JDK 17 to build the app.
  • Android Studio.
    • Make sure to install the NDK.
    • Make sure to set the correct JDK.

Please refer to CapacitorJS's environment setup guide and run ./doctor to check to see if you have all the required dependencies.

npm run reset
npm run build -- --platform=android --entryUrl="https://www.example.com"

Wait for Gradle to load your project. Click the "play" button in Android Studio to start your Android app!

See below for the list of available configuration options.

Adding icon and splash screen assets to your generated Android project

Note

TODO: automate this process

You'll need to add the following images to the assets folder in your generated project:

• A 1024x1024 png titled icon.png containing your app icon.
• A 2732x2732 png titled splash.png containing your splash screen.
• Another 2732x2732 png titled splash-dark.png containing your splash screen in dark mode.

Then, run the following command to generate and place the assets in the appropriate places in your Android project:

npx capacitor-assets generate --android

Publishing your app in the Google Play Store

Follow these instructions to learn how to publish your app to the Google Play Store

Building the app project for iOS

Note

You can only build iOS apps on MacOS. Currently only works with build targets of iOS 17.2 (and below?)

• You will need:
  • The url you want to load initially in your app.
  • go to build the SDK library.
  • Node.js for the project setup and web server.
  • XCode.
  • cocoapods.

Please refer to CapacitorJS's environment setup guide and run ./doctor to check to see if you have all the required dependencies.

npm run reset
npm run build -- --platform=ios --entryUrl="https://www.example.com"

Click the "play" button in XCode to start your iOS app!

See below for the list of available configuration options.

Adding icon and splash screen assets to your generated iOS project

Note

TODO: automate this process

You'll need to add the following images to the assets folder in your generated project:

• A 1024x1024 png titled icon.png containing your app icon.
• A 2732x2732 png titled splash.png containing your splash screen.
• Another 2732x2732 png titled splash-dark.png containing your splash screen in dark mode.

Then, run the following command to generate and place the assets in the appropriate places in your iOS project:

npx capacitor-assets generate --ios

Publishing your app in the App Store

Follow these instructions on how to publish your app for beta testing and the App Store.

Available Configuration Options for npm run build

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.	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, from which you can get your --navigatorToken

npm run start:navigator -- --entryUrl="https://www.example.com" \
  --navigatorToken="<YOUR_NGROK_AUTH_TOKEN>" --navigatorPath="/nav"

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 for npm run start:navigator

Option	Description	Possible Values
--entryUrl	(Required) The primary url of your website.	Any valid url
--smartDialerConfig	A JSON string containing the configuration for the smart dialer feature.	Valid JSON string
--navigatorToken	Your ngrok authentication token for using the navigation proxy.	Your ngrok auth token
--navigatorPath	The path to use for the navigation iframe when using the navigation proxy.	Any valid path

Troubleshooting

When encountering an issue, the first thing you'll want to do is run the doctor script to see if your system has all the required dependencies:

./doctor

Additionally, you should run npm run reset to ensure your output and node_modules folders have not been tampered with!