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

2018 Framework7 V2 templates for Vue + PhoneGap/Cordova

There is an older article on this blog about PhoneGap/Cordova templates for VueJS with Framework7 from January 2017, so I thought it’s time for an update since a lot has happened after one year. F7 had a major upgrade to V2 so all templates had to be brought up to date as well.

These are the latest template releases that come shipped with F7 v2, Vue and PhoneGap/Cordova:

Latest templates

I didn’t include installation/configuration instructions this time since everything is written on their GitHub/NPM websites. Hope you enjoy and let me know what your experience with these templates is!

Honorable mentions

The Framework7 team has an own list of recommended templates you might wanna check out.

Also, the Adobe PhoneGap team maintains some other nice templates, like: