Access a native Cordova project

  • Article

When you create an app by using Visual Studio Tools for Apache Cordova, Visual Studio calls the Apache Cordova Command Line Interface (CLI) to build your app for the specified device or emulator. The resulting packages can be accessed from the bin folder in the Visual Studio project directory.

If you need to access a native platform-specific project, you can find it in the platforms\<platform> folder (for example, platforms\android) for your Visual Studio project. (iOS native projects aren’t stored in this location; see Access a native Xcode project.)

When you target Windows Phone 8, the native project generated by Cordova for Windows Phone is a Silverlight app that runs inside a WebView control. When you target Windows Phone (Universal), the generated project is a native Windows Store app (an APPX package) for Windows Phone 8.1.

Warning

Any changes you make to a native project will not be reflected in the project in Visual Studio. The contents of the platforms folder will be removed by a clean operation performed from Visual Studio, such as Clean Solution. In some scenarios, native debugging tools may be needed. For more information on using a platform-centered workflow and native projects, see this Apache Cordova article.

Build and debug an app by using a native project

If you want to build an app by using the native project or use native debugging tools, you must first install the Cordova CLI. If you are building for iOS, see Build an iOS app using a native project.

To build an app using a native project

  1. Make sure that you have installed the tools for Apache Cordova.

  2. Install the Cordova CLI by typing the following command at a command prompt:

    npm install -g cordova@4.3.0

  3. To run CLI commands from a command prompt, navigate to the platforms folder and enter any CLI command.

    Now you can run any Cordova CLI command against the native project. For more information about CLI commands, see The Command-Line Interface in the Cordova documentation.

  4. If you want to build projects by using the Cordova CLI, first add the platform:

    cordova platform add <platform>

    For example, to include Android in the set of projects to build, type cordova platform add android<.

    Then use the following command to build all platform-specific projects:

    cordova build

    You will now find a fully generated native project under the platforms \ platform folder in your project.

Access a native Xcode project (iOS)

In some cases you may need to get access to the generated Xcode project to troubleshoot a native iOS problem. Fortunately you can quickly gain access to the project used to build your app.

To access a native Xcode project created by remotebuild

  1. Build your app using an iOS Simulator or Device target.

  2. After the build has completed, go to the Output window and select Show output from: Build.

    The final entries of the build output should look similar to this:

    1>  ** BUILD SUCCEEDED **
1>
1>  Command finished with error code
    0:/Users/<username>/remote-builds/builds
    /8382/cordovaApp
    /platforms/ios/cordova/build --debug

  3. On your Mac, navigate to the ios folder in the path specified in the build output. In the example above, this is /Users/<username>/remote-builds/builds/8382/cordovaApp/platforms/ios.

    Important

    When the remotebuild agent is stopped, the build (including the generated Xcode project) will be deleted unless you started remotebuild with the following command: --deleteBuildsOnShutdown false.

  4. Double click on the .xcodeproj file in this folder and the project will open in Xcode.

Build an iOS app using a native Xcode project

Because you cannot build an iOS app on Windows, building for iOS by using the native project requires a few additional steps.

To build an iOS app

  1. On your Mac, install node.js.

  2. On your Mac, install the Cordova CLI by using this command:

    sudo npm install -g cordova@4.3.0

  3. Copy the contents of the Visual Studio project from your PC to your Mac or check it out from source control.

  4. Using the Terminal app, go to the folder where you copied the contents, and type the following command:

    cordova platform add ios

    Now you can run any other Cordova CLI command; for example:

    cordova build ios

    or:

    cordova emulate ios

    For more information about CLI commands, see The Command-Line Interface in the Cordova documentation.

If you double-click the .xcodeproj file under platforms\ios, the project will open in Xcode.

Using the Cordova serve command

The Cordova serve command lets you test the layout and underlying CSS of your app on a local web server. This is often helpful before you do device testing.

Note

This release doesn’t support the Adobe PhoneGap Developer app from Visual Studio; however, Cordova CLI supports the same serve command that is used by the PhoneGap Developer app.

To run your app in a local web server using a native project

  1. Type the following command from the platforms folder in your Visual Studio project before using serve:

    cordova prepare <platform>

    For example, for an Android app, you can type cordova prepare android.

  2. Next, run this command to start the web server host:

    cordova serve <platform>

    The output from this command includes the URL you can use to access your app.

  3. Open a browser and navigate to the URL provided.

Caution

You need to rebuild the app to update its content.