Framework7 & PhoneGap – Getting Started
In this blog post, we will be building a Boilerplate for Framework7 & PhoneGap. We will also look at PhoneGap build for deploying our newly created Framework7 app.
- Step 1 : Clone Framework7
- Step 2 : Create and clone a Github repo
- Step 3 : Scaffold a PhoneGap project
- Step 4 : Integrate Framework7 with PhoneGap
- Step 5 : Update PhoneGap app properties
- Step 6 : Test the PhoneGap app
- Step 7 : Copy project to the repo folder & commit the repo
- Step 8 : PhoneGap build the app
- Yeoman Generator
- Next Steps
To build a Hybrid app using PhoneGap, you need to be aware of
1. Git & GitHub
Framework7 is a
Full Featured HTML Framework For Building iOS7 Apps
But the same can be used to build apps for Android and other Mobile OS. Out of box the theme looks very very close to the iOS7 components. If you are fine with it, you can use the same CSS else, you can modify accordingly.
The Framework7 project (hosted on GitHub) has CSS preprocessor – LESS support. And for markup templating – JADE.
If you are planning to consume the existing application as-is, you need not worry much. It will be mostly plucking components from the Kitchen-sink.
We will setup Framework7 & PhoneGap separately. Then we will integrate the required components.
Step 1 : Clone Framework7
First, make sure the prerequisite steps are completed. Then create a new folder and name it pgFW7 (sounds like a fighter jet right?, pun intended). The name is short for PhoneGap Framework7.
Next, we will clone the Framework7 repo from Github. Open terminal/prompt and CD into this folder and run
git clone email@example.com:nolimits4web/Framework7.git
This will get us the source code for Framework7 components. Then execute
cd Framework7 && npm install
to install all the dependencies. Then build and run the project using
grunt build && grunt server
gulp build && gulp server
By default you will be redirected to http://localhost:3000/kitchen-sink/. This is the kitchen sink, consists of all the components that comes along with Framework7.
Along with this, there is a simple 2 page application like a base template. Navigate to
to see the sample application. We are going to use this sample app as our base template. The code for this can be found at /Framework7/dist.
For production apps use app from dist» folder, it also contains latest and most stable version of Framework7 and also minified versions of scripts and css.
Step 2 : Create and clone a Github repo
If you are planning to use PhoneGap build to build a hybrid Mobile App, we need to dump all the code in a Github repo and submit the git URL.
Create a new Github project (pgFW7App). Next, CD back to pgFW7 folder. And then clone the repo by running
git clone https://github.com/<<username>>/pgFW7App.git
Step 3 : Scaffold a PhoneGap project
Next, We will scaffold a new PhoneGap project. Back to terminal/prompt & make sure you are at the root folder (pgFW7 folder) and run
phonegap create myAwesomeFW7app
This will scaffold us a simple PhoneGap project. The final folder structure of the project would be
Step 4 : Integrate Framework7 with PhoneGap
First lets clean up the pgFW7/myAwesomeFW7app/www folder. Navigate to pgFW7/myAwesomeFW7app/www. Then delete the following
- css folder
- img folder
- js folder
- index.html file
Do not delete the config.xml file.
Then copy the contents of pgFW7/Framework7/dist folder to pgFW7/myAwesomeFW7app/www. Next open the www/index.html file and add the below script tag
above the line
This is required for the PhoneGap build to run smoothly.
Step 5 : Update PhoneGap app properties
Open pgFW7/myAwesomeFW7app/www/config.xml. Update the name tag to myAwesomeFW7app and description tag to something you like and also the author tag as you want. The name tag will be the name of your app when this code is processed through PhoneGap build.
Step 6 : Test the PhoneGap app
Lets CD into the myAwesomeFW7app folder. Then run
cordova platforms add ios
cordova platforms add android
This will create an iOS/android project inside the platforms folder. Next, build the app by running
cordova build ios or cordova build android or cordova build
This will build the project. To run the project execute
cordova emulate ios or cordova emulate android
Note: For iOS you need to have latest xCode and ios-sim (sudo npm install -g ios-sim). And for Android, if you face issues, you can open the project using ADT. Refer prerequisites.
And your output should be
Step 7 : Copy project to the repo folder & commit the repo
Copy pgFW7/myAwesomeFW7app/www folder to pgFW7/pgFW7App. Yup, this is the only folder that is needed to build the app.
Now, using terminal/prompt, CD into pgFW7/pgFW7App folder. Run the following commands
git add -A
git commit -a -m "Initial Commit"
git push origin master
Step 8 : PhoneGap build the app
Navigate to https://build.phonegap.com/apps and click on + New App button. Then copy the git URL from the repo (https://github.com/<<username>>/pgFW7App.git) to the “paste .git repo” textbox. And the click on Ready to Build button.
This will trigger the build process & finally see a page like
I don’t have the iOS developer key, so no iOS installer. But I have a Samsung Galaxy Note, so Bam!! And the app looks very sleek and awesome!
A few days ago I quickly whipped out a Yeoman Generator to build Hybrid Apps using PhoneGap and Framework7. You can find the same here : generator-framework7-phonegap.
Using it is super simple. Create a folder where you want to scaffold the boilerplate. Open terminal/prompt and run
|npm i -g yo grunt bower generator-framework7-phonegap||sudo npm i -g yo grunt bower generator-framework7-phonegap|
Once the installation is completed, run
This will scaffold a Framework7-Phonegap boilerplate for you. The final folder structure would be like
│ ├── apps
│ │ ├── todo7
│ │ └── weather7
│ ├── build
│ ├── dist
│ ├── examples
│ │ ├── split-view
│ │ ├── split-view-panel
│ │ └── tab-bar
│ ├── kitchen-sink
│ └── src
You will find 2 Gruntfiles –
- Inside the framework7 folder – This is used to manage Framework7 dev
- At the root of the project – This is used to manage PhoneGap dev
- Step 1 : To start developing, cd into the framework7 folder and begin development. Refer Getting Started With Framework7.
- Step 2 : Once you are done, run
This is to build your Framework7 dev to a distributable format. make sure you are running grunt dist from inside the framework7 folder
- Step 3 – finally cd back to the root folder and run
to copy all the contents of the framework7/dist folder to www.
Note : All your development should happen inside the framework7 folder and then run grunt dist . Next cd back to the root folder and run grunt copy to copy the contents of framework7/dist to www folder
From the root folder, run
to spin off a server. You can see the contents of www folder in your browser at http://localhost:1881 .
Note : You will find cordova.js as a 404 resource during Framework7 dev as well as PhoneGap dev. This will be resolved during PhoneGap Build.
Now you can submit this www folder to PhoneGap Build. Simple right?
You can also build an integrated Boilerplate, where you can make live changes to the Framework7 LESS & JADE files & the www folder simultaneously instead of copy pasting every time.
Thanks for reading! Do comment.