{"id":7510,"date":"2025-10-26T22:46:20","date_gmt":"2025-10-26T22:46:20","guid":{"rendered":"https:\/\/robertjwallace.com\/?p=7510"},"modified":"2025-11-30T14:54:04","modified_gmt":"2025-11-30T14:54:04","slug":"cordova-android-app-development-complete-setup-guide","status":"publish","type":"post","link":"https:\/\/robertjwallace.com\/es\/cordova-android-app-development-complete-setup-guide\/","title":{"rendered":"Cordova Android App Development: Complete Setup Guide"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p class=\"\"><strong>What is Cordova?<\/strong> Cordova wraps your HTML\/CSS\/JavaScript web app in a native Android container, allowing it to run as a standalone app on Android devices. <a href=\"https:\/\/robertjwallace.com\/how-i-turned-a-simple-html-file-into-an-android-app-a-love-letter-to-complexity\/\" data-type=\"post\" data-id=\"7501\"> Having suffered through getting this all setup<\/a> via Claude.ai I thought I would ask Claude.ai to write this guide.<\/p>\n\n\n\n<p class=\"\"><strong>What you&#8217;ll need:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">A computer running Linux (Ubuntu\/similar)<\/li>\n\n\n\n<li class=\"\">An HTML\/CSS\/JavaScript web page<\/li>\n\n\n\n<li class=\"\">About 1-2 hours for initial setup<\/li>\n\n\n\n<li class=\"\">2-3 GB of disk space for all the tools<\/li>\n<\/ul>\n\n\n\n<!--more-->\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 1: Understanding the Components<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.1 Core Components You Need<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Component<\/th><th>Purpose<\/th><th>Version to Use<\/th><\/tr><\/thead><tbody><tr><td><strong>Node.js<\/strong><\/td><td>JavaScript runtime needed to run Cordova<\/td><td>Latest LTS (v22+)<\/td><\/tr><tr><td><strong>npm<\/strong><\/td><td>Package manager (comes with Node.js)<\/td><td>Comes with Node<\/td><\/tr><tr><td><strong>Java JDK<\/strong><\/td><td>Required by Android build tools<\/td><td>OpenJDK 17<\/td><\/tr><tr><td><strong>Android SDK<\/strong><\/td><td>Tools to build Android apps<\/td><td>Latest (34+)<\/td><\/tr><tr><td><strong>Gradle<\/strong><\/td><td>Build automation tool for Android<\/td><td>8.7+<\/td><\/tr><tr><td><strong>Cordova<\/strong><\/td><td>The framework that wraps your web app<\/td><td>Latest (12+)<\/td><\/tr><tr><td><strong>Cordova Android<\/strong><\/td><td>Android platform for Cordova<\/td><td>13.0.0 (stable)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">1.2 Why These Specific Versions?<\/h3>\n\n\n\n<p class=\"\"><strong>Node.js LTS:<\/strong> &#8220;Long Term Support&#8221; = stable and well-tested <strong>OpenJDK 17:<\/strong> Required by modern Android build tools <strong>Cordova Android 13.0.0:<\/strong> Version 14+ has bugs; 13 is stable and works <strong>Android SDK 34:<\/strong> Current stable version (as of late 2024\/early 2025)<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 2: Installation (One-Time Setup)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.1 Install Node.js and npm<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Install nvm (Node Version Manager) - makes version management easy\ncurl -o- https:\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.40.1\/install.sh | bash\n\n# Reload your shell\nsource ~\/.bashrc\n\n# Install the latest LTS version of Node.js\nnvm install --lts\nnvm use --lts\n\n# Verify installation\nnode --version  # Should show v22.x.x or similar\nnpm --version   # Should show 10.x.x or similar\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2.2 Install Java JDK<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Update package list\nsudo apt-get update\n\n# Install OpenJDK 17\nsudo apt-get install -y openjdk-17-jdk\n\n# Set JAVA_HOME environment variable\necho 'export JAVA_HOME=\/usr\/lib\/jvm\/java-17-openjdk-amd64' &gt;&gt; ~\/.bashrc\nsource ~\/.bashrc\n\n# Verify installation\njava -version  # Should show \"openjdk version 17.x.x\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2.3 Install Android SDK<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Create Android SDK directory\nmkdir -p ~\/Android\/Sdk\/cmdline-tools\n\n# Download Android command line tools\ncd \/tmp\nwget https:\/\/dl.google.com\/android\/repository\/commandlinetools-linux-11076708_latest.zip\n\n# Extract to the correct location\nunzip commandlinetools-linux-*.zip -d ~\/Android\/Sdk\/cmdline-tools\/\nmv ~\/Android\/Sdk\/cmdline-tools\/cmdline-tools ~\/Android\/Sdk\/cmdline-tools\/latest\n\n# Set environment variables\necho 'export ANDROID_HOME=\"$HOME\/Android\/Sdk\"' &gt;&gt; ~\/.bashrc\necho 'export PATH=\"$PATH:$ANDROID_HOME\/cmdline-tools\/latest\/bin:$ANDROID_HOME\/platform-tools\"' &gt;&gt; ~\/.bashrc\nsource ~\/.bashrc\n\n# Accept licenses and install required packages\nyes | sdkmanager --licenses\nsdkmanager \"platform-tools\" \"platforms;android-34\" \"build-tools;34.0.0\"\n\n# Verify installation\nsdkmanager --list_installed\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2.4 Install Gradle<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Download Gradle\ncd \/tmp\nwget https:\/\/services.gradle.org\/distributions\/gradle-8.10.2-bin.zip\n\n# Extract to \/opt\nsudo unzip -d \/opt gradle-8.10.2-bin.zip\nsudo ln -s \/opt\/gradle-8.10.2 \/opt\/gradle\n\n# Add to PATH\necho 'export PATH=\"$PATH:\/opt\/gradle\/bin\"' &gt;&gt; ~\/.bashrc\nsource ~\/.bashrc\n\n# Verify installation\ngradle --version\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2.5 Install Cordova<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Install Cordova globally via npm\nnpm install -g cordova\n\n# Verify installation\ncordova --version  # Should show 12.x.x or similar\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 3: Creating Your First App<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.1 Create a Cordova Project<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Syntax: cordova create &lt;directory&gt; &lt;package-id&gt; &lt;app-name&gt;\n# Example:\ncordova create myapp com.yourname.myapp \"My App\"\n\n# Navigate into the project\ncd myapp\n<\/code><\/pre>\n\n\n\n<p class=\"\"><strong>Package ID Rules:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Use reverse domain notation: <code>com.yourname.appname<\/code><\/li>\n\n\n\n<li class=\"\">Must be unique (like: <code>com.johnsmith.cardtrick<\/code>)<\/li>\n\n\n\n<li class=\"\">Only lowercase letters, numbers, and dots<\/li>\n\n\n\n<li class=\"\">No spaces or special characters<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3.2 Add Your Web Files<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Remove default Cordova files\nrm -rf www\/*\n\n# Copy your HTML\/CSS\/JS files to www\/\ncp \/path\/to\/your\/index.html www\/\ncp \/path\/to\/your\/style.css www\/\ncp \/path\/to\/your\/script.js www\/\ncp -r \/path\/to\/your\/images www\/\n\n# IMPORTANT: Your main HTML file MUST be named index.html\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3.3 Add Android Platform<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Add Android platform version 13.0.0 (stable)\ncordova platform add android@13.0.0\n\n# Verify it was added\ncordova platform ls\n# Should show: \"Installed platforms: android 13.0.0\"\n<\/code><\/pre>\n\n\n\n<p class=\"\"><strong>Why version 13.0.0?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Version 14+ has known bugs with missing gradle wrapper files<\/li>\n\n\n\n<li class=\"\">Version 13 is stable and works reliably<\/li>\n\n\n\n<li class=\"\">Explicitly specifying the version prevents issues<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3.4 Create Network Security Config (Required)<\/h3>\n\n\n\n<p class=\"\">This file is often missing and causes build failures. Create it manually:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Create the directory\nmkdir -p platforms\/android\/app\/src\/main\/res\/xml\n\n# Create the config file\ncat &gt; platforms\/android\/app\/src\/main\/res\/xml\/network_security_config.xml &lt;&lt; 'EOF'\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;network-security-config&gt;\n    &lt;base-config cleartextTrafficPermitted=\"true\"&gt;\n        &lt;trust-anchors&gt;\n            &lt;certificates src=\"system\" \/&gt;\n        &lt;\/trust-anchors&gt;\n    &lt;\/base-config&gt;\n&lt;\/network-security-config&gt;\nEOF\n<\/code><\/pre>\n\n\n\n<p class=\"\"><strong>What this file does:<\/strong> Allows your app to make network requests. Required by Android for security purposes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3.5 Build Your App<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Build the APK\ncordova build android\n\n# If successful, you'll see: \"BUILD SUCCESSFUL\"\n# Your APK is located at:\n# platforms\/android\/app\/build\/outputs\/apk\/debug\/app-debug.apk\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 4: Installing on Your Phone<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.1 Enable USB Debugging on Your Phone<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">Go to <strong>Settings > About Phone<\/strong><\/li>\n\n\n\n<li class=\"\">Tap <strong>&#8220;Build Number&#8221;<\/strong> 7 times (enables Developer Options)<\/li>\n\n\n\n<li class=\"\">Go back to <strong>Settings > System > Developer Options<\/strong><\/li>\n\n\n\n<li class=\"\">Enable <strong>&#8220;USB Debugging&#8221;<\/strong><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">4.2 Connect and Install<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Connect your phone via USB cable\n\n# Check if phone is detected\nadb devices\n# Should show your device with \"device\" status\n\n# Install the app\ncordova run android --device\n\n# The app will install and launch automatically!\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4.3 Manual Installation (Alternative)<\/h3>\n\n\n\n<p class=\"\">If USB isn&#8217;t working:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">Copy <code>app-debug.apk<\/code> to your phone (email, cloud storage, etc.)<\/li>\n\n\n\n<li class=\"\">On your phone: <strong>Settings > Security > Install Unknown Apps<\/strong><\/li>\n\n\n\n<li class=\"\">Enable for your file manager<\/li>\n\n\n\n<li class=\"\">Open the APK file on your phone<\/li>\n\n\n\n<li class=\"\">Tap <strong>&#8220;Install&#8221;<\/strong><\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 5: Common Issues and Solutions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Issue 1: &#8220;BUILD FAILED &#8211; network_security_config not found&#8221;<\/h3>\n\n\n\n<p class=\"\"><strong>Solution:<\/strong> Create the network security config file (see section 3.4)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Issue 2: &#8220;gradlew not found&#8221; or &#8220;gradle wrapper missing&#8221;<\/h3>\n\n\n\n<p class=\"\"><strong>Solution:<\/strong> Use Cordova Android version 13.0.0, not 14.x<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cordova platform remove android\ncordova platform add android@13.0.0\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Issue 3: &#8220;Build tools version 35.0.0 not found&#8221;<\/h3>\n\n\n\n<p class=\"\"><strong>Solution:<\/strong> Install the required build tools:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sdkmanager \"build-tools;35.0.0\"\n<\/code><\/pre>\n\n\n\n<p class=\"\">Or downgrade to use what you have:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cat &gt; platforms\/android\/cdv-gradle-config.json &lt;&lt; 'EOF'\n{\n  \"BUILD_TOOLS_VERSION\": \"34.0.0\"\n}\nEOF\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Issue 4: &#8220;JAVA_HOME not set&#8221;<\/h3>\n\n\n\n<p class=\"\"><strong>Solution:<\/strong> Set the environment variable:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export JAVA_HOME=\/usr\/lib\/jvm\/java-17-openjdk-amd64\necho 'export JAVA_HOME=\/usr\/lib\/jvm\/java-17-openjdk-amd64' &gt;&gt; ~\/.bashrc\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Issue 5: &#8220;cordova: command not found&#8221;<\/h3>\n\n\n\n<p class=\"\"><strong>Solution:<\/strong> Reload your environment:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>source ~\/.bashrc\n# Or close and reopen your terminal\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Issue 6: Phone not detected by adb<\/h3>\n\n\n\n<p class=\"\"><strong>Solution:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">Try a different USB cable (data cable, not just charging cable)<\/li>\n\n\n\n<li class=\"\">Change USB mode on phone to &#8220;File Transfer&#8221; or &#8220;MTP&#8221;<\/li>\n\n\n\n<li class=\"\">Revoke USB debugging authorizations and reconnect<\/li>\n\n\n\n<li class=\"\">Check if phone shows authorization popup &#8211; tap &#8220;Allow&#8221;<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 6: Making Changes and Rebuilding<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">6.1 Update Your App<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>cd ~\/myapp\n\n# Edit your files in www\/\nnano www\/index.html  # or use your preferred editor\n\n# Rebuild\ncordova build android\n\n# Reinstall on phone\ncordova run android --device\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">6.2 Clean Build (When Things Break)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Clean old build files\ncordova clean\n\n# Remove and re-add Android platform\ncordova platform remove android\ncordova platform add android@13.0.0\n\n# Recreate network security config\nmkdir -p platforms\/android\/app\/src\/main\/res\/xml\ncat &gt; platforms\/android\/app\/src\/main\/res\/xml\/network_security_config.xml &lt;&lt; 'EOF'\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;network-security-config&gt;\n    &lt;base-config cleartextTrafficPermitted=\"true\"&gt;\n        &lt;trust-anchors&gt;\n            &lt;certificates src=\"system\" \/&gt;\n        &lt;\/trust-anchors&gt;\n    &lt;\/base-config&gt;\n&lt;\/network-security-config&gt;\nEOF\n\n# Build again\ncordova build android\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 7: Version Compatibility Chart<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Known Good Combinations<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Node.js<\/th><th>Cordova<\/th><th>Cordova Android<\/th><th>Android SDK<\/th><th>Result<\/th><\/tr><\/thead><tbody><tr><td>22.x LTS<\/td><td>12.x<\/td><td>13.0.0<\/td><td>34<\/td><td>\u2705 Works<\/td><\/tr><tr><td>22.x LTS<\/td><td>12.x<\/td><td>14.0.1<\/td><td>35<\/td><td>\u274c gradle wrapper issues<\/td><\/tr><tr><td>20.x LTS<\/td><td>12.x<\/td><td>13.0.0<\/td><td>34<\/td><td>\u2705 Works<\/td><\/tr><tr><td>18.x<\/td><td>12.x<\/td><td>12.0.1<\/td><td>33<\/td><td>\u2705 Works<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Version Check Commands<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Check all versions\nnode --version\nnpm --version\njava -version\ncordova --version\ngradle --version\nsdkmanager --list_installed\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 8: Directory Structure Explained<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>myapp\/                          # Your project root\n\u251c\u2500\u2500 config.xml                  # App configuration (name, ID, permissions)\n\u251c\u2500\u2500 package.json                # npm dependencies\n\u251c\u2500\u2500 www\/                        # YOUR WEB FILES GO HERE\n\u2502   \u251c\u2500\u2500 index.html             # Main HTML file (required name)\n\u2502   \u251c\u2500\u2500 css\/                   # Your stylesheets\n\u2502   \u251c\u2500\u2500 js\/                    # Your JavaScript\n\u2502   \u2514\u2500\u2500 img\/                   # Your images\n\u251c\u2500\u2500 platforms\/                  # Generated platform code\n\u2502   \u2514\u2500\u2500 android\/               # Android-specific files (auto-generated)\n\u2502       \u2514\u2500\u2500 app\/build\/outputs\/apk\/debug\/\n\u2502           \u2514\u2500\u2500 app-debug.apk  # YOUR COMPILED APP\n\u2514\u2500\u2500 plugins\/                    # Cordova plugins (if you add any)\n<\/code><\/pre>\n\n\n\n<p class=\"\"><strong>Important:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Only edit files in <code>www\/<\/code> &#8211; everything in <code>platforms\/<\/code> is auto-generated<\/li>\n\n\n\n<li class=\"\">Don&#8217;t manually edit files in <code>platforms\/android\/<\/code> &#8211; they get overwritten<\/li>\n\n\n\n<li class=\"\">Exception: <code>network_security_config.xml<\/code> needs manual creation<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 9: Quick Reference Commands<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Project Setup<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>cordova create &lt;dir&gt; &lt;id&gt; &lt;name&gt;    # Create new project\ncd &lt;dir&gt;                             # Enter project\ncordova platform add android@13.0.0  # Add Android platform\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Build and Run<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>cordova build android                # Build APK\ncordova run android --device         # Install on connected phone\ncordova clean                        # Clean build files\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Platform Management<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>cordova platform ls                  # List installed platforms\ncordova platform remove android      # Remove Android platform\ncordova platform add android@13.0.0  # Add specific version\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Debugging<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>adb devices                          # List connected devices\nadb logcat                           # View Android logs\ncordova requirements                 # Check if all tools installed\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 10: Tips for Success<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u2705 DO:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Use Cordova Android version 13.0.0 (stable)<\/li>\n\n\n\n<li class=\"\">Create the network security config file manually<\/li>\n\n\n\n<li class=\"\">Keep your main file named <code>index.html<\/code><\/li>\n\n\n\n<li class=\"\">Test in a browser first before building for Android<\/li>\n\n\n\n<li class=\"\">Use <code>source ~\/.bashrc<\/code> after installing new tools<\/li>\n\n\n\n<li class=\"\">Run <code>cordova clean<\/code> if builds start failing<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c DON&#8217;T:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Use Cordova Android 14.x (has bugs)<\/li>\n\n\n\n<li class=\"\">Run <code>gradle<\/code> directly &#8211; use <code>cordova build<\/code> instead<\/li>\n\n\n\n<li class=\"\">Edit files in <code>platforms\/android\/<\/code> manually<\/li>\n\n\n\n<li class=\"\">Forget to enable USB debugging on your phone<\/li>\n\n\n\n<li class=\"\">Skip setting environment variables (JAVA_HOME, ANDROID_HOME)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udca1 Pro Tips:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\"><strong>Save this version combo:<\/strong> Cordova 12.x + Android 13.0.0 + SDK 34<\/li>\n\n\n\n<li class=\"\"><strong>When in doubt, clean rebuild:<\/strong> Remove platform, re-add, rebuild<\/li>\n\n\n\n<li class=\"\"><strong>Browser first:<\/strong> Test your HTML in browser before building APK<\/li>\n\n\n\n<li class=\"\"><strong>Version lock:<\/strong> Always specify <code>@13.0.0<\/code> when adding Android platform<\/li>\n\n\n\n<li class=\"\"><strong>Environment check:<\/strong> Run <code>source ~\/.bashrc<\/code> if commands aren&#8217;t found<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Part 11: Alternative: PWA (Progressive Web App)<\/h2>\n\n\n\n<p class=\"\"><strong>If you don&#8217;t need native features<\/strong>, consider making a PWA instead:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pros:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">\u2705 No complex build process<\/li>\n\n\n\n<li class=\"\">\u2705 No version conflicts<\/li>\n\n\n\n<li class=\"\">\u2705 Instant updates (no reinstall needed)<\/li>\n\n\n\n<li class=\"\">\u2705 Works offline with service worker<\/li>\n\n\n\n<li class=\"\">\u2705 Installs like an app on Android<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Cons:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">\u274c Limited access to native features (camera, GPS, etc.)<\/li>\n\n\n\n<li class=\"\">\u274c Requires web hosting (but free options exist)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Quick PWA Setup:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">Add <code>manifest.json<\/code> (app metadata)<\/li>\n\n\n\n<li class=\"\">Add <code>service-worker.js<\/code> (offline support)<\/li>\n\n\n\n<li class=\"\">Upload to web host (GitHub Pages, Netlify, etc.)<\/li>\n\n\n\n<li class=\"\">Users visit in Chrome \u2192 &#8220;Add to Home Screen&#8221;<\/li>\n<\/ol>\n\n\n\n<p class=\"\"><strong>For simple apps without native features, PWA is the KISS solution!<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Summary: The Minimum Viable Setup<\/h2>\n\n\n\n<p class=\"\">If you just want to get started quickly:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># 1. Install Node.js\ncurl -o- https:\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.40.1\/install.sh | bash\nsource ~\/.bashrc\nnvm install --lts\n\n# 2. Install Java\nsudo apt-get install openjdk-17-jdk\n\n# 3. Install Android SDK (simplified)\n# Download from: https:\/\/developer.android.com\/studio#command-tools\n# Extract and set ANDROID_HOME\n\n# 4. Install Cordova\nnpm install -g cordova\n\n# 5. Create and build\ncordova create myapp com.me.myapp MyApp\ncd myapp\n# Copy your HTML to www\/\ncordova platform add android@13.0.0\n# Create network_security_config.xml (see section 3.4)\ncordova build android\n<\/code><\/pre>\n\n\n\n<p class=\"\"><strong>Total time:<\/strong> 1-2 hours for first-time setup<br><strong>Subsequent apps:<\/strong> 10-15 minutes<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting Checklist<\/h2>\n\n\n\n<p class=\"\">When something goes wrong, check these in order:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">[ ] Are you in a Cordova project directory? (<code>ls config.xml<\/code> should work)<\/li>\n\n\n\n<li class=\"\">[ ] Did you run <code>source ~\/.bashrc<\/code> after installing tools?<\/li>\n\n\n\n<li class=\"\">[ ] Is JAVA_HOME set? (<code>echo $JAVA_HOME<\/code> should show path)<\/li>\n\n\n\n<li class=\"\">[ ] Is ANDROID_HOME set? (<code>echo $ANDROID_HOME<\/code> should show path)<\/li>\n\n\n\n<li class=\"\">[ ] Are you using Cordova Android 13.0.0? (<code>cordova platform ls<\/code>)<\/li>\n\n\n\n<li class=\"\">[ ] Does network_security_config.xml exist? (see section 3.4)<\/li>\n\n\n\n<li class=\"\">[ ] Did you rebuild after making changes? (<code>cordova build android<\/code>)<\/li>\n\n\n\n<li class=\"\">[ ] Is your phone in USB debugging mode and authorized?<\/li>\n<\/ul>\n\n\n\n<p class=\"\">If all else fails:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cordova clean\ncordova platform remove android\ncordova platform add android@13.0.0\n# Recreate network_security_config.xml\ncordova build android\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Final Words<\/h2>\n\n\n\n<p class=\"\">Cordova is powerful but complex. The key to success:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\"><strong>Use proven versions<\/strong> (Cordova Android 13.0.0)<\/li>\n\n\n\n<li class=\"\"><strong>Follow the steps exactly<\/strong> (especially network_security_config)<\/li>\n\n\n\n<li class=\"\"><strong>Don&#8217;t skip environment variables<\/strong> (JAVA_HOME, ANDROID_HOME)<\/li>\n\n\n\n<li class=\"\"><strong>Use Cordova commands<\/strong> (not gradle directly)<\/li>\n\n\n\n<li class=\"\"><strong>Clean rebuild when stuck<\/strong> (it fixes 90% of issues)<\/li>\n<\/ol>\n\n\n\n<p class=\"\">Once you have it working once, subsequent apps are much easier!<\/p>\n\n\n\n<p class=\"\"><strong>Good luck! \ud83c\udfb4\ud83d\udcf1<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview What is Cordova? Cordova wraps your HTML\/CSS\/JavaScript web app in a native Android container, allowing it to run as a standalone app on Android devices. Having suffered through getting this all setup via Claude.ai I thought I would ask Claude.ai to write this guide. What you&#8217;ll need:<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_eb_attr":"","footnotes":""},"categories":[171,192,143],"tags":[],"class_list":["post-7510","post","type-post","status-publish","format-standard","hentry","category-ai","category-android-app","category-computer-stuff"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"Bob","author_link":"https:\/\/robertjwallace.com\/es\/author\/admin\/"},"_links":{"self":[{"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/posts\/7510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/comments?post=7510"}],"version-history":[{"count":1,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/posts\/7510\/revisions"}],"predecessor-version":[{"id":7511,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/posts\/7510\/revisions\/7511"}],"wp:attachment":[{"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/media?parent=7510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/categories?post=7510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/tags?post=7510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}