Please detailed doc

Hello everyone,
I installed Framework7 on xampp local server it run good for building app web (responsive website)

My issue I can’t understand how to to transform the app web under folder dist to a native app for Android and iOS for publishing into PlayStore

Thank you in adavance

Hi cstech

You can use Phonegap, for compiling app, in this case it would be an hybrid application, not native.


Hi DanielRiera
Thank you for your reply

Please can you help to understand how I do to use Phonegap for compiling Framework7 app


This is official page

Read doc about install and configuration


I followed many tutos unfortunatelly can’t understand! even I’am good with HTML5 CSS and Javascript

I can’t undertand the utility of Phonegap with Framework7 and how to use the both software to achieve one object (Hybrid App)

Hi again

Step to step.

First install Node.js

Later, install Phonegap from terminal npm -g install phonegap.

When phonegap is installed, run this command from terminal. (you may have to restart the terminal)

phonegap create miFolder com.myapp.phonegap MiApp

Now look you folder, you will see a folder with name “miFolder” contain phonegap proyect.

When you have this proyect, move to js and css folder and paste the files from dist (js/css) folder.

Add sources to index.html for all files. <link …> and <script …>

Use F7 doc for build initial html

When you added all, execute from terminal phonegap serve

In terminal you should see a IP, open browser and type this IP.

If you need help, i´m here.


Hi DanielRiera,

You mean copy JS and CSS from localhost/f7/dist to …/miFolder/www/css and js

Hi @cstech



Hi @DanielRiera Thank you very much for your appreciated help.

Please ca you detail for me those two steps below


What version F7 use you?


F7 v 2.0.2


Hi @cstech

Use it in your index.html
Change urls from framework7.js and framework7.ios.min.css (or use md version).

<!DOCTYPE html>

    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <link rel="stylesheet" type="text/css" href="css/framework7.ios.min.css" /> <!--ADD F7 IOS CSS-->
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
    <div id="app">
        <div class="statusbar"></div>
        <div class="panel panel-left panel-cover">
            <div class="page">
                <div class="page-content">
        <div class="view view-main view-init ios-edges" data-url="/">
            <div class="page page-index">
                <div class="navbar">
                    <div class="navbar-inner sliding">
                        <div class="left panel-open" data-panel="left">Menu</div>
                        <div class="title">My App</div>
                <div class="page-content">
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/framework7.js"></script> <!--ADD F7 LIBRARY-->
    <script type="text/javascript" src="js/router.js"></script>  <!--ADD F7 ROUTER-->
    <script type="text/javascript" src="js/index.js"></script>  <!--ADD CUSTOM JS (my-app.js)-->
    <script type="text/javascript">



1 Like

Hi @DanielRiera

I updated the index.html file located in …/miFolder/www

I close and reopen Terminal (Git for windows) and typed phonegap serve I get [error] project directory could not be found


Hi @cstech

You need move to phonegap proyect directory. Where have your phonegap proyect?, the proyect when created with phonegap create ... ... ...

I followed this to creat a new project and the project is created in …/users/username


You move to phonegap proyect directory, so cd …/users/username/miFolder and type phonegap serve

Yes now it display
[phonegap] starting app server…
[phonegap] listening on
[phonegap] listening on
[phonegap] ctrl-c to stop the server

Now put this IP on browser or Download phonegap developer app (Android and iOS)


I typed the IP’s in browser, the page say want to store content or some things like in your device I answered OK! I get a blank page with some shadow color.

Do I need to download phonegrap developer app (Android and iOS) or the browser can do the same work


Hi @DanielRiera, hope you’re well. Thanks for your appreciated help.

Please last question
At the end which folder and files I shoud to upload to Play Store and App Store?

Thank you in advance