| --- |
| layout: cordova |
| permalink: / |
| priority: 1.0 |
| change_frequency: monthly |
| --- |
| |
| <!-- Main jumbotron for a primary marketing message or call to action --> |
| <div id="hero"> |
| <div class="container vertical-center-parent"> |
| <div id="hero_section" class="row vertical-center-child"> |
| <div class="col-xs-12 col-sm-5 cordova-bot"> |
| <img src="{{ site.baseurl }}/static/img/cordova_bot.png" /> |
| </div> |
| <div class="col-xs-12 col-sm-7 hero_content"> |
| <img class="hero_logo hidden-xs" src="{{ site.baseurl }}/static/img/cordova-logo-newbrand-textonly.svg" /> |
| <!-- <img class="hero_logo visible-xs" src="{{ site.baseurl }}/static/img/logo_full_2.svg" /> --> |
| <p>Mobile apps with <em>HTML</em>, <em>CSS</em> & <em>JS</em></p> |
| <p>Target multiple platforms with <em>one code base</em></p> |
| <p>Free and <em>open source</em></p> |
| <div class="hero_supported_platforms"> |
| <img src="{{ site.baseurl }}/static/img/platform-logos.svg" width="140px" /> |
| </div> |
| <div class="hero_buttons"> |
| <a href="#getstarted" class="col-xs-12 col-sm-5 btn btn-lg btn-primary"> |
| Get Started |
| </a> |
| <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/" class="col-xs-12 col-sm-6 btn btn-lg btn-primary"> |
| Documentation |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div id="hero_bottom_strip"> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-xs-4"> |
| <div class="row"> |
| <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_shared_code"></div></div> |
| <div class="col-sm-8 col-md-9"><div class="value_prop"><p>Reusable code across platforms</p></div></div> |
| </div> |
| </div> |
| <div class="col-xs-4"> |
| <div class="row"> |
| <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_offline"></div></div> |
| <div class="col-sm-8 col-md-9"><div class="value_prop"><p>Support for offline scenarios</p></div></div> |
| </div> |
| </div> |
| <div class="col-xs-4"> |
| <div class="row"> |
| <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_apis"></div></div> |
| <div class="col-sm-8 col-md-9"><div class="value_prop"><p>Access native device APIs</p></div></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="blue-divider"></div> |
| <div class="container get-started-section"> |
| <!-- Example row of columns --> |
| <div class="row"> |
| <div class="col-md-12 text-center"> |
| <a id="getstarted" name="getstarted" class="fragment-anchor"></a> |
| <h1>Get Started Fast</h1> |
| </div> |
| </div> |
| <!-- GETTING STARTED --> |
| <div class="row"> |
| <div class="col-md-1 col-xs-2"> |
| <div class="number_circle">1</div> |
| </div> |
| <div class="col-md-7 col-xs-10"> |
| <h2>Installing Cordova</h2> |
| <p>Cordova command-line runs on <a target="_blank" href="http://nodejs.org/">Node.js</a> and is available on |
| <a target="_blank" href="https://npmjs.org/package/cordova">NPM</a>. |
| Follow <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/index.html#develop-for-platforms">platform specific guides</a> |
| to install additional platform dependencies. Open a command prompt or Terminal, and type <code>npm install -g cordova</code>.</p> |
| </div> |
| <div class="col-md-4 col-xs-12"> |
| <div class="well_code"> |
| <div> |
| <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-npm-install-text">Copy</button> |
| </div> |
| $ npm install -g cordova |
| <div id="copy-npm-install-text" class="copy-text">npm install -g cordova</div> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-1 col-xs-2"> |
| <div class="number_circle">2</div> |
| </div> |
| <div class="col-md-7 col-xs-10"> |
| <h2>Create a project</h2> |
| <p>Create a blank Cordova project using the command-line tool. Navigate to the directory where you wish to create your project and type <code>cordova create <path></code>.</p> |
| <p>For a complete set of options, type <code>cordova help create</code>.</p> |
| </div> |
| <div class="col-md-4 col-xs-12"> |
| <div class="well_code"> |
| <div> |
| <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-create-text">Copy</button> |
| </div> |
| $ cordova create MyApp |
| <div id="copy-cordova-create-text" class="copy-text">cordova create MyApp</div> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-1 col-xs-2"> |
| <div class="number_circle">3</div> |
| </div> |
| <div class="col-md-7 col-xs-10"> |
| <h2>Add a platform</h2> |
| <p>After creating a Cordova project, navigate to the project directory. From the project directory, you need to add a platform for which you want to build your app.</p> |
| <p>To add a platform, type <code>cordova platform add <platform name></code>.</p> |
| <p>For a complete list of platforms you can add, run <code>cordova platform</code>.</p> |
| </div> |
| <div class="col-md-4 col-xs-12"> |
| <div class="well_code"> |
| <div> |
| <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-platform-add-text">Copy</button> |
| </div> |
| <p>$ cd MyApp</p> |
| <p>$ cordova platform add browser</p> |
| <div id="copy-cordova-platform-add-text" class="copy-text">cd MyApp cordova platform add browser</div> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-1 col-xs-2"> |
| <div class="number_circle">4</div> |
| </div> |
| <div class="col-md-7 col-xs-10"> |
| <h2>Run your app</h2> |
| <p>From the command line, run <code>cordova run <platform name></code>.</p> |
| </div> |
| <div class="col-md-4 col-xs-12"> |
| <div class="well_code"> |
| <div> |
| <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-run-text">Copy</button> |
| </div> |
| $ cordova run browser |
| <div id="copy-cordova-run-text" class="copy-text">cordova run browser</div> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-1 col-xs-2"> |
| <div class="number_circle">5</div> |
| </div> |
| <div class="col-md-7 col-xs-10"> |
| <h2>Common next steps</h2> |
| <ul class="nav"> |
| <li> |
| <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/guide/overview/">Read the docs</a> |
| </li> |
| <li> |
| <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/guide/cli/#add-plugins">Add a Plugin</a> |
| </li> |
| <li> |
| <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/config_ref/images.html">Customize app icons</a> |
| </li> |
| <li> |
| <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/config_ref/">Configure Your App</a> |
| </li> |
| </ul> |
| </div> |
| <div class="col-md-4 col-xs-12"> |
| </div> |
| </div> |
| </div> |
| <!-- /container --> |
| |
| <div class="blue-divider"></div> |
| <div class="container-fluid dark vertical-aligned-columns"> |
| <div class="container"> |
| <div class="row showcase_section_intro" id="supported_platforms_section"> |
| <div class="col-md-12 text-center"> |
| <h1>Supported Platforms</h1> |
| <h2>See a list of |
| <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/guide/support/index.html">features supported</a> in each platform</h2> |
| <p> |
| Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms. |
| These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every |
| phone or tablet on the market today and publish to their app stores. |
| </p> |
| </div> |
| </div> |
| </div><!-- /container --> |
| |
| <div class="container-fluid supported_platforms vertical-aligned-columns"> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-md-12"> |
| <ul class="platform_logos"> |
| <li><img src="{{ site.baseurl }}/static/img/3rdparty_logo_sprite.svg"/></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| {% include tools_and_showcase.html %} |
| |
| </div><!-- /container-fluid --> |