Deploy Framework7 apps to Android with PhoneGap/Cordova | Beginner Tutorial

This is an absolute beginner’s tutorial for those of you who have never before deployed a Framework7 app to a real Android device. In this video tutorial you will learn how to:

  • Create the app
  • Build
  • Deploy to Android Emulator
  • Run on real Android device

Android Framework7 Video tutorial

Steps

Here are all the steps one more time:

1. Make sure phonegap/cordova is installed
$ npm install -g phonegap cordova

2. Install template
$ cordova create MyAppName --template=phonegap-template-vue-f7-blank

3. Run in browser
$ npm run dev

4. Add Android platform
$ phonegap platform add android

5. Install Android Studio

6. Set Android PATH
Check for SDK path in studio, then do:

$ export ANDROID_HOME=~/Library/Android/sdk
$ export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

Make sure to add this to file ~/.bash_profile!!

7. Install Gradle
$ brew install gradle

8. Create android virtual device

  • Open Android Studio
  • Click in menu bar tools -> AVD Manager
  • Create new AVD
  • Select system image

9. Run on emulator
$ cordova run android

10. Enable USB debugging on device

  • Settings > About Phone > Build number > Tap it 7 times to become developer;
  • Settings > Developer Options > USB Debugging.

11. Run on device
cordova run android --device

2 thoughts on “Deploy Framework7 apps to Android with PhoneGap/Cordova | Beginner Tutorial

  1. Timo, thank you for you work: Video & this text Tutorial.
    I use Linux Mint 18.3.

    I do not understand at what stage it’s possible to put a frame template into a project created in Android Studio.

    There is a template created in the framework.
    There is a Android project Android Studio.

    Both places in different directories.

    How can they be combined together?

  2. Hey, I usually do not touch the project since it gets auto generated by PG/Cordova. Also, I don’t use Android Studio. My workflow is usually: Edit the source files with any editor, then build + run through terminal.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.