blob: 10758d8eadf44ea87d3a7a56c1d3f26cf6e9cddb [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta name="description" content=" ">
<title>
The Command-Line Interface - Apache Cordova
</title>
<link rel="SHORTCUT ICON" href="/favicon.ico"/>
<link rel="canonical" href="https://cordova.apache.org/docs/en/5.0.0/guide/cli/">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<link rel="stylesheet" type="text/css" href="/static/css/lib/syntax.css">
<!-- Fonts -->
<!-- For attribution information, see www/attributions.html -->
<link href='https://fonts.googleapis.com/css?family=Raleway:700,400,300,700italic,400italic,300italic' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var disqus_developer = 1; // this would set it to developer mode
</script>
<!-- JS -->
<script defer type="text/javascript" src="/static/js/lib/jquery-2.1.1.min.js"></script>
<script defer type="text/javascript" src="/static/js/lib/bootstrap.min.js"></script>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.apache.org/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '16']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</head>
<body>
<header>
<a class="scroll-point pt-top" name="top"></a>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img id="logo_top" src="/static/img/cordova-logo-newbrand.svg"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="nav_bar_center">
<ul class="nav navbar-nav">
<li class="active">
<a href="/docs/en/latest/">Documentation</a>
</li>
<li >
<a href="/plugins">Plugins</a>
</li>
<li >
<a href="/blog" id="blog_button">Blog<span class="badge" id="new_blog_count"></span></a>
</li>
<li >
<a href="/contribute">Contribute</a>
</li>
<li >
<a href="/contribute/team.html">Team</a>
</li>
<li>
<a href="/#getstarted">Get Started</a>
</li>
<li>
<form class="navbar-form navbar-right" id="header-search-form" role="search">
<div class="input-group">
</div>
</form>
</li>
</ul>
</div>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div id="_fixed_navbar_spacer" style="padding-top:50px"></div>
</header>
<div class="docs">
<!-- Table of Contents -->
<div class="hidden-xs hidden-sm site-toc-container">
<ul class="site-toc">
<li>
<a class="" href="/docs/en/5.0.0/">
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/overview/index.html">
Overview
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/support/index.html">
Platform Support
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/cli/index.html">
The Command-Line Interface
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/platforms/index.html">
Platform Guides
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/plugin_ref/plugman.html">
Using Plugman to Manage Plugins
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/config_ref/index.html">
The config.xml File
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/config_ref/images.html">
Icons and Splash Screens
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/hybrid/webviews/index.html">
Embedding WebViews
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/hybrid/plugins/index.html">
Plugin Development Guide
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/appdev/privacy/index.html">
Privacy Guide
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/appdev/security/index.html">
Security Guide
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/appdev/whitelist/index.html">
Whitelist Guide
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/cordova/storage/storage.html">
Storage
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/next/index.html">
Next Steps
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/cordova/events/events.html">
Events
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/cordova/plugins/pluginapis.html">
Plugin APIs
</a>
</li>
</ul>
</div>
<!-- Page content -->
<div class="page-content-container">
<div class="page-content">
<div class="content-header">
<!-- ToC Dropdown (for XS and SM sizes only) -->
<div class="toc-dropdown dropdown visible-xs-block visible-sm-block">
<button class="btn btn-default dropdown-toggle" type="button" id="tocDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Table of Contents
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="" href="/docs/en/5.0.0/">
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/overview/index.html">
Overview
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/support/index.html">
Platform Support
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/cli/index.html">
The Command-Line Interface
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/platforms/index.html">
Platform Guides
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/plugin_ref/plugman.html">
Using Plugman to Manage Plugins
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/config_ref/index.html">
The config.xml File
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/config_ref/images.html">
Icons and Splash Screens
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/hybrid/webviews/index.html">
Embedding WebViews
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/hybrid/plugins/index.html">
Plugin Development Guide
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/appdev/privacy/index.html">
Privacy Guide
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/appdev/security/index.html">
Security Guide
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/appdev/whitelist/index.html">
Whitelist Guide
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/cordova/storage/storage.html">
Storage
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/guide/next/index.html">
Next Steps
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/cordova/events/events.html">
Events
</a>
</li>
<li>
<a class="" href="/docs/en/5.0.0/cordova/plugins/pluginapis.html">
Plugin APIs
</a>
</li>
</ul>
</div>
<a class="edit" href="https://github.com/apache/cordova-docs/tree/master/www/docs/en/5.0.0/guide/cli/index.md"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </a>
<!-- Version dropdown -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="versionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
5.0.0
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="versionDropdown">
<!-- List versions available in this language -->
<li>
<a href="/docs/en/dev/" class="missing-page">
dev
</a>
</li>
<li>
<a href="/docs/en/latest/" class="missing-page">
12.x
(Latest)
</a>
</li>
<li>
<a href="/docs/en/11.x/" class="missing-page">
11.x
</a>
</li>
<li>
<a href="/docs/en/10.x/" class="missing-page">
10.x
</a>
</li>
<li>
<a href="/docs/en/9.x/" class="missing-page">
9.x
</a>
</li>
<li>
<a href="/docs/en/8.x/" class="missing-page">
8.x
</a>
</li>
<li>
<a href="/docs/en/7.x/" class="missing-page">
7.x
</a>
</li>
<li>
<a href="/docs/en/6.x/" class="missing-page">
6.x
</a>
</li>
<li>
<a href="/docs/en/5.4.0/" class="missing-page">
5.4.0
</a>
</li>
<li>
<a href="/docs/en/5.1.1/" class="missing-page">
5.1.1
</a>
</li>
<li>
<a href="/docs/en/5.0.0/" class="missing-page">
<span class="selected">
5.0.0
</span>
</a>
</li>
<li>
<a href="/docs/en/4.0.0/" class="missing-page">
4.0.0
</a>
</li>
<li>
<a href="/docs/en/3.6.0/" class="missing-page">
3.6.0
</a>
</li>
<li>
<a href="/docs/en/3.5.0/" class="missing-page">
3.5.0
</a>
</li>
<li>
<a href="/docs/en/3.4.0/" class="missing-page">
3.4.0
</a>
</li>
<li>
<a href="/docs/en/3.3.0/" class="missing-page">
3.3.0
</a>
</li>
<li>
<a href="/docs/en/3.2.0/" class="missing-page">
3.2.0
</a>
</li>
<li>
<a href="/docs/en/3.1.0/" class="missing-page">
3.1.0
</a>
</li>
<li>
<a href="/docs/en/3.0.0/" class="missing-page">
3.0.0
</a>
</li>
<li>
<a href="/docs/en/2.9.0/" class="missing-page">
2.9.0
</a>
</li>
<li>
<a href="/docs/en/2.8.0/" class="missing-page">
2.8.0
</a>
</li>
<li>
<a href="/docs/en/2.7.0/" class="missing-page">
2.7.0
</a>
</li>
<li>
<a href="/docs/en/2.6.0/" class="missing-page">
2.6.0
</a>
</li>
<li>
<a href="/docs/en/2.5.0/" class="missing-page">
2.5.0
</a>
</li>
<li>
<a href="/docs/en/2.4.0/" class="missing-page">
2.4.0
</a>
</li>
<li>
<a href="/docs/en/2.3.0/" class="missing-page">
2.3.0
</a>
</li>
<li>
<a href="/docs/en/2.2.0/" class="missing-page">
2.2.0
</a>
</li>
<li>
<a href="/docs/en/2.1.0/" class="missing-page">
2.1.0
</a>
</li>
<li>
<a href="/docs/en/2.0.0/" class="missing-page">
2.0.0
</a>
</li>
<li>
<a href="/docs/en/1.9.0/" class="missing-page">
1.9.0
</a>
</li>
<li>
<a href="/docs/en/1.8.1/" class="missing-page">
1.8.1
</a>
</li>
<li>
<a href="/docs/en/1.8.0/" class="missing-page">
1.8.0
</a>
</li>
<li>
<a href="/docs/en/1.7.0/" class="missing-page">
1.7.0
</a>
</li>
<li>
<a href="/docs/en/1.6.1/" class="missing-page">
1.6.1
</a>
</li>
<li>
<a href="/docs/en/1.6.0/" class="missing-page">
1.6.0
</a>
</li>
<li>
<a href="/docs/en/1.5.0/" class="missing-page">
1.5.0
</a>
</li>
</ul>
</div>
</div>
<!-- Show warnings for special versions -->
<!-- dev warning -->
<!-- outdated warning -->
<div class="alert docs-alert alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
This version of the documentation is outdated!
<a href="/docs/en/latest/">
Click here for the latest released version.
</a>
</div>
<!-- plugin version warning -->
<div id="page-toc-source">
<h1>The Command-Line Interface</h1>
<p>This guide shows you how to create applications and deploy them to
various native mobile platforms using the <code>cordova</code> command-line
interface (CLI). This tool allows you to create new projects, build
them on different platforms, and run on real devices or within
emulators. The CLI is the main tool to use for the cross-platform
workflow described in the <a href="../overview/index.html">Overview</a>. Otherwise you can also use the
CLI to initialize project code, then switch to various platforms&#39; SDKs
and shell tools for continued development.</p>
<h2>Prerequisites</h2>
<p>Before running any command-line tools, you need to install SDKs for
each platform you wish to target.
(See the <a href="../platforms/index.html">Platform Guides</a> for more details.)</p>
<p>To add support or rebuild a project for any platform, you need to run
the command-line interface from the same machine that supports the
platform&#39;s SDK. The CLI supports the following combinations:</p>
<ul>
<li>iOS (Mac)</li>
<li>Amazon Fire OS (Mac, Linux, Windows)</li>
<li>Android (Mac, Linux, Windows)</li>
<li>BlackBerry 10 (Mac, Linux, Windows)</li>
<li>Windows Phone 8 (Windows)</li>
<li>Windows (Windows)</li>
<li>Firefox OS (Mac, Linux, Windows)</li>
</ul>
<p>On the Mac, the command-line is available via the <em>Terminal</em>
application. On the PC, it&#39;s available as <em>Command Prompt</em> under
<em>Accessories</em>.</p>
<p><strong>NOTE</strong>: For Windows-only platforms, you can still do your
development on Mac hardware by running Windows in a virtual machine
environment or in dual-boot mode. For available options, see the
<a href="../platforms/wp8/index.html">Windows Phone 8 Platform Guide</a> or the <a href="../platforms/win8/index.html">Windows Platform Guide</a>.</p>
<p>The more likely it is that you run the CLI from different machines,
the more it makes sense to maintain a remote source code repository,
whose assets you pull down to local working directories.</p>
<h2>Installing the Cordova CLI</h2>
<p>The Cordova command-line tool is distributed as an npm package in a
ready-to-use format. It is not necessary to compile it from source.</p>
<p>To install the <code>cordova</code> command-line tool, follow these steps:</p>
<ol>
<li>
<p>Download and install <a href="http://nodejs.org/">Node.js</a>. Following
installation, you should be able to invoke <code>node</code> and <code>npm</code> on your
command line. If desired, you may optionally use a tool such as <code>nvm</code>
or <code>nave</code> to manage your Node.js installation.</p>
</li>
<li>
<p>Download and install a <a href="http://git-scm.com/">git client</a>, if you don&#39;t
already have one. Following installation, you should be able to invoke <code>git</code>
on your command line. Even though you won&#39;t be using <code>git</code> manually,
the CLI does use it behind-the-scenes to download some assets when
creating a new project.</p>
</li>
<li>
<p>Install the <code>cordova</code> module using <code>npm</code> utility of Node.js. The <code>cordova</code>
module will automatically be downloaded by the <code>npm</code> utility.</p>
<ul>
<li>
<p>on OS X and Linux:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ sudo npm install -g cordova
</code></pre></div> </div>
<p>On OS X and Linux, prefixing the <code>npm</code> command with
<code>sudo</code> may be necessary to install this development utility in
otherwise restricted directories such as
<code>/usr/local/share</code>. If you are using the optional
nvm/nave tool or have write access to the install directory,
you may be able to omit the <code>sudo</code> prefix. There are
<a href="http://justjs.com/posts/npm-link-developing-your-own-npm-modules-without-tears">more tips</a>
available on using <code>npm</code> without <code>sudo</code>, if you desire to do that.</p>
</li>
<li>
<p>on Windows:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> C:\&gt;npm install -g cordova
</code></pre></div> </div>
</li>
</ul>
<p>The <code>-g</code> flag above tells <code>npm</code> to install <code>cordova</code> globally. Otherwise
it will be installed in the <code>node_modules</code> subdirectory of the current
working directory.</p>
<p>You may need to add the <code>npm</code> directory to your <code>PATH</code> in order to invoke
globally installed <code>npm</code> modules. On Windows, <code>npm</code> can usually be found at
<code>C:\Users\username\AppData\Roaming\npm</code>. On OS X and Linux it can usually
be found at <code>/usr/local/share/npm</code>.</p>
<p>The installation log may produce errors for any uninstalled
platform SDKs.</p>
<p>Following installation, you should be able to run
<code>cordova</code> on the command line with no arguments and it should
print help text.</p>
</li>
</ol>
<h2>Create the App</h2>
<p>Go to the directory where you maintain your source code, and run a
command such as the following:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova create hello com.example.hello HelloWorld
</code></pre></div></div>
<p>It may take some time for the command to complete, so be patient. Running
the command with the ` -d` option displays information about its progress.</p>
<p>The first argument <em>hello</em> specifies a directory to be generated
for your project. This directory should not already exist, Cordova will
create it for you. Its <code>www</code> subdirectory houses your application&#39;s
home page, along with various resources under <code>css</code>, <code>js</code>, and <code>img</code>,
which follow common web development file-naming conventions. These assets
will be stored on the device&#39;s local filesystem, not served remotely. The
<code>config.xml</code> file contains important metadata needed to generate and
distribute the application.</p>
<p>The second argument <code>com.example.hello</code>
provides your project with a reverse domain-style identifier. This argument
is optional, but only if you also omit the third argument, since the arguments
are positional. You can edit
this value later in the <code>config.xml</code> file, but do be aware that there may
be code generated outside of <code>config.xml</code> using this value, such as Java
package names. The default value is <code>io.cordova.hellocordova</code>, but it is
recommended that you select an appropriate value.</p>
<p>The third argument <code>HelloWorld</code> provides the application&#39;s display title.
This argument is optional. You can edit this value later in the <code>config.xml</code>
file, but do be aware that there may be code generated outside of <code>config.xml</code>
using this value, such as Java class names. The default value is <code>HelloCordova</code>,
but it is recommended that you select an appropriate value.</p>
<h2>Add Platforms</h2>
<p>All subsequent commands need to be run within the project&#39;s directory,
or any subdirectories within its scope:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cd hello
</code></pre></div></div>
<p>Before you can build the project, you need to specify a set of target
platforms. Your ability to run these commands depends on whether your
machine supports each SDK, and whether you have already installed each
SDK. Run any of these from a Mac:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova platform add ios
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos
</code></pre></div></div>
<p>Run any of these from a Windows machine, where <em>wp</em> refers to
different versions of the Windows Phone operating system:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova platform add wp8
$ cordova platform add windows
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos
</code></pre></div></div>
<p>Run this to check your current set of platforms:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova platforms ls
</code></pre></div></div>
<p>(Note the <code>platform</code> and <code>platforms</code> commands are synonymous.)</p>
<p>Run either of the following synonymous commands to remove a platform:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova platform remove blackberry10
$ cordova platform rm amazon-fireos
$ cordova platform rm android
</code></pre></div></div>
<p>Running commands to add or remove platforms affects the contents of
the project&#39;s <em>platforms</em> directory, where each specified platform
appears as a subdirectory. The <em>www</em> source directory is reproduced
within each platform&#39;s subdirectory, appearing for example in
<code>platforms/ios/www</code> or <code>platforms/android/assets/www</code>. Because the CLI
constantly copies over files from the source <em>www</em> folder, you should only
edit these files and not the ones located under the <em>platforms</em> subdirectories.
If you use version control software, you should add this source <em>www</em> folder,
along with the <em>merges</em> folder, to your version control system. (More information
about the <em>merges</em> folder can be found in the Customize Each Platform section below.)</p>
<p><strong>WARNING</strong>: When using the CLI to build your application, you should
<em>not</em> edit any files in the <code>/platforms/</code> directory unless you know
what you are doing, or if documentation specifies otherwise. The files
in this directory are routinely overwritten when preparing
applications for building, or when plugins are reinstalled.</p>
<p>If you wish at this point, you can use an SDK such as Eclipse or Xcode
to open the project you created. You will need to open the derivative set of assets
from the <code>/platforms/</code> directory to develop with an SDK. This is because
the SDK specific metadata files are stored within the appropriate <code>/platform/</code> subdirectory.
(See the <a href="../platforms/index.html">Platform Guides</a> for information on how to develop applications within each IDE.)
Use this approach if you simply want to initialize a project using the CLI and
then switch to an SDK for native work.</p>
<p>Read on if you wish to use the cross-platform workflow approach (the CLI) for the entire
development cycle.</p>
<h2>Build the App</h2>
<p>By default, the <code>cordova create</code> script generates a skeletal web-based
application whose home page is the project&#39;s <code>www/index.html</code> file.
Edit this application however you want, but any initialization should
be specified as part of the <code>[deviceready](../../cordova/events/events.deviceready.html)</code> event handler, referenced by
default from <code>www/js/index.js</code>.</p>
<p>Run the following command to iteratively build the project:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova build
</code></pre></div></div>
<p>This generates platform-specific code within the project&#39;s <code>platforms</code>
subdirectory. You can optionally limit the scope of each build to
specific platforms:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova build ios
</code></pre></div></div>
<p>The <code>cordova build</code> command is a shorthand for the following, which in
this example is also targeted to a single platform:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova prepare ios
$ cordova compile ios
</code></pre></div></div>
<p>In this case, once you run <code>prepare</code>, you can use Apple&#39;s Xcode SDK as
an alternative to modify and compile the platform-specific code that
Cordova generates within <code>platforms/ios</code>. You can use the same
approach with other platforms&#39; SDKs.</p>
<h2>Test the App on an Emulator or Device</h2>
<p>SDKs for mobile platforms often come bundled with emulators that
execute a device image, so that you can launch the app from the home
screen and see how it interacts with many platform features. Run a
command such as the following to rebuild the app and view it within a
specific platform&#39;s emulator:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova emulate android
</code></pre></div></div>
<p>Some mobile platforms emulate a particular device by default, such as
the iPhone for iOS projects. For other platforms, you may need to
first associate a device with an emulator.</p>
<p><strong>NOTE</strong>: Emulator support is currently not available for Amazon Fire OS.</p>
<p>(See the <a href="../platforms/index.html">Platform Guides</a> for details.)
For example, you may first run the <code>android</code> command to launch the
Android SDK, then run a particular device image, which launches it
according to its default behavior:</p>
<p><img src="/static/img/guide/cli/android_emulate_init.png" alt="" /></p>
<p>Following up with the <code>cordova emulate</code> command refreshes the emulator
image to display the latest application, which is now available for
launch from the home screen:</p>
<p><img src="/static/img/guide/cli/android_emulate_install.png" alt="" /></p>
<p>Alternately, you can plug the handset into your computer and test the
app directly:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova run android
</code></pre></div></div>
<p>Before running this command, you need to set up the device for
testing, following procedures that vary for each platform. In
Android and Amazon Fire OS devices, you would have to enable a <strong>USB debugging</strong> option on
the device, and perhaps add a USB driver depending on your development
environmnent.
See <a href="../platforms/index.html">Platform Guides</a> for details on each platform&#39;s requirements.</p>
<h2>Add Plugin Features</h2>
<p>When you build and view a new project, the default application that
appears doesn&#39;t do very much. You can modify the app in many ways to
take advantage of standard web technologies, but for the app to
communicate closely with various device-level features, you need to
add plugins that provide access to core Cordova APIs.</p>
<p>A <em>plugin</em> is a bit of add-on code that provides an interface to
native components. You can design your own plugin interface, for
example when designing a hybrid app that mixes a Cordova WebView with
native components. (See <a href="../hybrid/webviews/index.html">Embedding WebViews</a> and <a href="guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide">Plugin Development
Guide</a> for details.) More commonly, you would add a plugin to enable
one of Cordova&#39;s basic device-level features
detailed in the API Reference.</p>
<p>As of version 3.0, when you create a Cordova project it does not have any
plugins present. This is the new default behavior. Any plugins you desire,
even the core plugins, must be explicitly added.</p>
<p>A list of these plugins, including
additional third-party plugins provided by the community, can be found
in the registry at
<a href="http://plugins.cordova.io/">plugins.cordova.io</a>. You can use
the CLI to search for plugins from this registry. For example,
searching for <code>bar</code> and <code>code</code> produces a single result that matches
both terms as case-insensitive substrings:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin search bar code
com.phonegap.plugins.barcodescanner - Scans Barcodes
</code></pre></div></div>
<p>Searching for only the <code>bar</code> term yields and additional result:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> cordova-plugin-statusbar - Cordova StatusBar Plugin
</code></pre></div></div>
<p>The <code>cordova plugin add</code> command requires you to specify the
repository for the plugin code. Here are examples of how you might
use the CLI to add features to the app:</p>
<ul>
<li>
<p>Basic device information (Device API):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-device
</code></pre></div> </div>
</li>
<li>
<p>Network Connection and Battery <a href="../../cordova/events/events.html">Events</a>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-network-information
$ cordova plugin add cordova-plugin-battery-status
</code></pre></div> </div>
</li>
<li>
<p>Accelerometer, Compass, and Geolocation:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-device-motion
$ cordova plugin add cordova-plugin-device-orientation
$ cordova plugin add cordova-plugin-geolocation
</code></pre></div> </div>
</li>
<li>
<p>Camera, Media playback and Capture:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-camera
$ cordova plugin add cordova-plugin-media-capture
$ cordova plugin add cordova-plugin-media
</code></pre></div> </div>
</li>
<li>
<p>Access files on device or network (File API):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-file
$ cordova plugin add cordova-plugin-file-transfer
</code></pre></div> </div>
</li>
<li>
<p>Notification via dialog box or vibration:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-dialogs
$ cordova plugin add cordova-plugin-vibration
</code></pre></div> </div>
</li>
<li>
<p>Contacts:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-contacts
</code></pre></div> </div>
</li>
<li>
<p>Globalization:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-globalization
</code></pre></div> </div>
</li>
<li>
<p>Splashscreen:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-splashscreen
</code></pre></div> </div>
</li>
<li>
<p>Open new browser windows (InAppBrowser):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-inappbrowser
</code></pre></div> </div>
</li>
<li>
<p>Debug console:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-console
</code></pre></div> </div>
</li>
</ul>
<p><strong>NOTE</strong>: The CLI adds plugin code as appropriate for each platform.
If you want to develop with lower-level shell tools or platform SDKs
as discussed in the <a href="../overview/index.html">Overview</a>, you need to run the Plugman utility to
add plugins separately for each platform. (For more information, see
<a href="../../plugin_ref/plugman.html">Using Plugman to Manage Plugins</a>.)</p>
<p>Use <code>plugin ls</code> (or <code>plugin list</code>, or <code>plugin</code> by itself) to view
currently installed plugins. Each displays by its identifier:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin ls # or 'plugin list'
[ 'cordova-plugin-console' ]
</code></pre></div></div>
<p>To remove a plugin, refer to it by the same identifier that appears in
the listing. For example, here is how you would remove support for a
debug console from a release version:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin rm cordova-plugin-console
$ cordova plugin remove cordova-plugin-console # same
</code></pre></div></div>
<p>You can batch-remove or add plugins by specifying more than one
argument for each command:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-console cordova-plugin-device
</code></pre></div></div>
<h2>Advanced Plugin Options</h2>
<p>When adding a plugin, several options allow you to specify from where
to fetch the plugin. The examples above use a well-known
<code>registry.cordova.io</code> registry, and the plugin is specified by the
<code>id</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-console
</code></pre></div></div>
<p>The <code>id</code> may also include the plugin&#39;s version number, appended after
an <code>@</code> character. The <code>latest</code> version is an alias for the most recent
version. For example:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add cordova-plugin-console@latest
$ cordova plugin add cordova-plugin-console@0.2.1
</code></pre></div></div>
<p>If the plugin is not registered at <code>registry.cordova.io</code> but is located in
another git repository, you can specify an alternate URL:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add https://github.com/apache/cordova-plugin-console.git
</code></pre></div></div>
<p>The git example above fetches the plugin from the end of the master
branch, but an alternate git-ref such as a tag or branch can be
appended after a <code>#</code> character:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add https://github.com/apache/cordova-plugin-console.git#r0.2.0
</code></pre></div></div>
<p>If the plugin (and its <code>plugin.xml</code> file) is in a subdirectory within
the git repo, you can specify it with a <code>:</code> character. Note that the
<code>#</code> character is still needed:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add https://github.com/someone/aplugin.git#:/my/sub/dir
</code></pre></div></div>
<p>You can also combine both the git-ref and the subdirectory:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add https://github.com/someone/aplugin.git#r0.0.1:/my/sub/dir
</code></pre></div></div>
<p>Alternately, specify a local path to the plugin directory that
contains the <code>plugin.xml</code> file:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova plugin add ../my_plugin_dir
</code></pre></div></div>
<h2>Using <em>merges</em> to Customize Each Platform</h2>
<p>While Cordova allows you to easily deploy an app for many different
platforms, sometimes you need to add customizations. In that case,
you don&#39;t want to modify the source files in various <code>www</code> directories
within the top-level <code>platforms</code> directory, because they&#39;re regularly
replaced with the top-level <code>www</code> directory&#39;s cross-platform source.</p>
<p>Instead, the top-level <code>merges</code> directory offers a place to specify
assets to deploy on specific platforms. Each platform-specific
subdirectory within <code>merges</code> mirrors the directory structure of the
<code>www</code> source tree, allowing you to override or add files as needed.
For example, here is how you might uses <code>merges</code> to boost the default
font size for Android and Amazon Fire OS devices:</p>
<ul>
<li>
<p>Edit the <code>www/index.html</code> file, adding a link to an additional CSS
file, <code>overrides.css</code> in this case:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> &lt;link rel="stylesheet" type="text/css" href="css/overrides.css" /&gt;
</code></pre></div> </div>
</li>
<li>
<p>Optionally create an empty <code>www/css/overrides.css</code> file, which would
apply for all non-Android builds, preventing a missing-file error.</p>
</li>
<li>
<p>Create a <code>css</code> subdirectory within <code>merges/android</code>, then add a
corresponding <code>overrides.css</code> file. Specify CSS that overrides the
12-point default font size specified within <code>www/css/index.css</code>, for
example:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> body { font-size:14px; }
</code></pre></div> </div>
</li>
</ul>
<p>When you rebuild the project, the Android version features the custom
font size, while others remain unchanged.</p>
<p>You can also use <code>merges</code> to add files not present in the original
<code>www</code> directory. For example, an app can incorporate a <em>back button</em>
graphic into the iOS interface, stored in
<code>merges/ios/img/back_button.png</code>, while the Android version can
instead capture <code>[backbutton](../../cordova/events/events.backbutton.html)</code> events from the corresponding hardware
button.</p>
<h2>Help Commands</h2>
<p>Cordova features a couple of global commands, which may help you if
you get stuck or experience a problem. The <code>help</code> command displays
all available Cordova commands and their syntax:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cordova help
$ cordova # same
</code></pre></div></div>
<p>Additionally, you can get more detailed help on a specific command.
For example:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cordova run --help
</code></pre></div></div>
<p>The <code>info</code> command produces a listing of potentially useful details,
such as currently installed platforms and plugins, SDK versions for
each platform, and versions of the CLI and <code>node.js</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cordova info
</code></pre></div></div>
<p>It both presents the information to screen and captures the output in
a local <code>info.txt</code> file.</p>
<p><strong>NOTE</strong>: Currently, only details on iOS and Android platforms are
available.</p>
<h2>Updating Cordova and Your Project</h2>
<p>After installing the <code>cordova</code> utility, you can always update it to
the latest version by running the following command:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ sudo npm update -g cordova
</code></pre></div></div>
<p>Use this syntax to install a specific version:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ sudo npm install -g cordova@3.1.0-0.2.0
</code></pre></div></div>
<p>Run <code>cordova -v</code> to see which version is currently running. Run the <code>npm
info</code> command for a longer listing that includes the current version
along with other available version numbers:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ npm info cordova
</code></pre></div></div>
<p>Cordova 3.0 is the first version to support the command-line interface
described in this section. If you are updating from a version prior to
3.0, you need to create a new project as described above, then copy
the older application&#39;s assets into the top-level <code>www</code> directory.
Where applicable, further details about upgrading to 3.0 are available
in the <a href="../platforms/index.html">Platform Guides</a>. Once you upgrade to the <code>cordova</code>
command-line interface and use <code>npm update</code> to stay current, the more
time-consuming procedures described there are no longer relevant.</p>
<p>Cordova 3.0+ may still require various changes to
project-level directory structures and other dependencies. After you
run the <code>npm</code> command above to update Cordova itself, you may need to
ensure your project&#39;s resources conform to the latest version&#39;s
requirements. Run a command such as the following for each platform
you&#39;re building:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ cordova platform update android
$ cordova platform update ios
...etc.
</code></pre></div></div>
</div>
</div>
<div class="row">
<div class="blue-divider"></div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-sm-9">
<h1>More Resources</h1>
<div class="row">
<div class="col-sm-4">
<h2>General</h2>
<ul class="nav">
<li>
<a target="_blank" href="https://projects.apache.org/project.html?cordova">Apache Project Page</a>
</li>
<li>
<a href="https://www.apache.org/dyn/closer.cgi/cordova">Source Distribution</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/licenses">License</a>
</li>
<li>
<a href="/artwork">Artwork</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<h2>Development</h2>
<ul class="nav">
<li><a target="_blank" href="https://github.com/apache?utf8=%E2%9C%93&amp;q=cordova-">Source Code</a></li>
<li><a target="_blank" href="https://github.com/apache/cordova#filing-a-bug">Issue Tracker</a></li>
<li><a target="_blank" href="https://stackoverflow.com/questions/tagged/cordova">Stack Overflow</a></li>
<li><a href="/contact">Mailing List</a></li>
<li><a href="/contribute/nightly_builds.html">Nightly builds</a></li>
</ul>
</div>
<div class="col-sm-4">
<h2>Apache Software Foundation</h2>
<ul class="nav">
<li>
<a target="_blank" href="https://www.apache.org/">About ASF</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/events/current-event">Events</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/foundation/sponsorship.html">Become a Sponsor</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/foundation/thanks.html">Thanks</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/security/">Security</a>
</li>
<li>
<a target="_blank" href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy policy</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3">
<h1>Contribute</h1>
<p style="padding-top:20px"><strong>Help Cordova move forward!</strong></p>
<p>Report bugs, improve the docs, or contribute to the code.</p>
<a href="/contribute" class="btn btn-lg btn-primary">
Learn More
</a>
<p style="padding-top:20px"> <a href="https://twitter.com/apachecordova" class="twitter-follow-button" data-show-count="false">Follow @apachecordova</a></p>
</div>
</div>
<p class="copyright_text">
Copyright &copy; 2024 <a href="https://apache.org">The Apache Software Foundation</a>, Licensed under the <a target="_blank" href="https://www.apache.org/licenses/">Apache License, Version 2.0</a>.<br/>
Apache and the Apache feather logos are <a target="_blank" href="https://www.apache.org/foundation/marks/list/">trademarks</a> of The Apache Software Foundation.
<br/>
<p>See the <a href="/attributions/">attributions page</a> for other copyright & trademark notices.</p>
</p>
</div>
</footer>
</div>
</div>
</div>
<script defer type="text/javascript" src="/static/js/lib/toc.min.js"></script>
<script defer type="text/javascript" src="/static/js/docs.js"></script>
<script defer type="text/javascript" src="/static/js/index.js"></script>
<script defer type="text/javascript" src="/static/js/twitter.js"></script>
</body>
</html>