Recently, I published my first android app on Play Store and let me tell you it’s not as hard as you think. There are plenty of open source tools out there which makes the task easy; and Google will have answers to almost all your hiccups that you’ll face during your journey.

To start off, let’s discuss the types of Mobile App. There are primarily 3 basic types of mobile applications:
1. Web App
2. Native App
3. Hybrid App

Web Apps are such applications which run on a Web Browser. For example, or are examples of web apps.

Native Apps are those which are built on proprietary software provided by the OS manufacturers like Android Studio for Android or Xcode for iOS etc. They use the native features of a mobile device in the most efficient way which results in good App performance, Graphics etc. But they have one drawback native apps are platform specific, Android app will work on Android phones/tablets or iOS apps will work only on iPhone/iPad etc.

Hybrid Apps are platform independent. Once created it can be run on any platforms like Android, iOS, Windows etc. They are built on HTML, CSS, and JS.

So in this post, I will talk about a Hybrid App Framework, Framework7, which I used to develop my app. The framework is totally open sourced and is continuously evolving.

I will not be sharing the exact process, but yes I will give you an outline which will be enough for you to get started and also at the end of the post there is a forum; you can post your questions/doubts there and we can work together to solve them. Let’s get started.

  • First of all, you need to install Node JS in your system. Go to & download the installer file for Windows and install it. People from all around the globe have built thousands of open-source libraries for Node.js – most of them hosted on the npm website. NPM (node package manager) is the default package manager for the JavaScript runtime environment Node.js. Using npm only we will install rest of the things that we require for our development; instead of going to respective websites and downloading them.

  • The next thing that we have to do is to install Cordova. Apache Cordova enables us to build applications for mobile devices using CSS, HTML, and JavaScript instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone. It enables wrapping up of CSS, HTML, and JavaScript code depending upon the platform of the device. It extends the features of HTML and JavaScript to work with the device. Long Story short, it takes the Html, CSS and Js files and wraps it as per the Mobile platform like Android, IOS, Windows phone etc. To install Cordova go to Run -> CMD, write the command and press Enter.
    npm install -g cordova 

  • Next, on the list is creating a Cordova project. This is where all the magic happens. Go to CMD and then go to the location where you want your project to be. For example, if you want your project in Desktop, change the directory to Desktop using the CD command and then run the command:
    cordova create
    So for example if my App  folder name is MyApp, the domain is and app name is MathsEasy; you should run the command as:
    cordova create MyApp MathsEasy
    Make sure that the app domain name is in the format of

default cordova project folder

  • Now, download the framework 7 starter template. Starter template helps you with the start you need to create the app. Go to the Framework7 v1 GitHub repository and download the project: Download Link. Make sure you download the zip file outside the project folder. Once downloaded, unzip it, go to dist folder; copy all the files and paste it into the www folder of the Cordova project.

framework7 v1 project

framework7 v1 dist

Copy dist to www

  • Now to host our project on a server we would be using http-serve. To install http-serve, go to cmd, write the command and press Enter.
    npm i -g http-serve

install http serve

  • To run our project on the server, go to www folder using the command cd MyApp first and then cd www on the command prompt. Now when you are inside www folder run the following command 

run http serve

  • Now open any browser and go to http://localhost:8080

localhost app

From here on you have to just get that artist out of you. The best part about using Framework7 is that you get ready made codes, you just have to paste it into your project and rest will be taken care of. Browse the Docs section, there are tons of functionalities and features to be explored. Go through the Docs content one by one, make changes in the starter template and you’re good to go. If you need a crash course on basic Html, js, and CSS, go to W3schools. If you’re stuck anywhere you can post your queries on Stackoverflow or you can post them at Framework7’s official forum. And remember, Google is your best friend so use it to your fullest.

There are chances you might not get answers to your queries because these are big forums and many a time your queries will get unheard, I have experienced that myself. So to tackle that I have created a forum to make sure that all your queries are addressed. So start building, Keep Failing and Keep Learning. I have mentioned Failing because if you don’t fail, you won’t learn.

-> Forum Link:

-> The next Part of this tutorial is covered here.

-> Note: At the time of creating this tutorial, there was only one version of framework7. But few days before Framework7 v2 was launched. So to avoid any confusion let me clarify that this tutorial is based on Framework7 v1.

-> Recently My App Cool Websites got Published in Framework7 Showcase. Please install it and let me know if you liked it or not.

Cool Websites Framework7 Showcase


-> Update Logs:

  • Update1[16 Jan 2018] – Updated all the links as per Framework7 v1.
  • Update2[31 Mar 2018] – Removed Ionic and updated the article with HTTP-Serve.
  • Update3[22 July 2018] – Added Framework7 Showcase Link.

Pin It on Pinterest