Access a Native Cordova Project

  • Article

In Visual Studio 2013, the Cordova tools are released as a preview (CTP) version. Cordova tools will be released as part of Visual Studio 2015 and we recommend that you now use Visual Studio 2015 RC to develop apps using Visual Studio Tools for Apache Cordova. You can download Visual Studio from the Microsoft Download Center.

When you create an app 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.

Build and debug an app 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. Install the Cordova CLI by typing the following command at a command prompt:

    npm install -g cordova@4.3.0

  2. To run CLI commands from a command prompt, go 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.

  3. 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 vs-mda-remote

  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 vs-mda-remote agent is stopped, the build (including the generated Xcode project) will be deleted unless you started vs-mda-remote 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 move on to 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.

Warning

In this release, you need to rebuild the app to update its content.

Download the toolsGet the Visual Studio Tools for Apache Cordova or learn more

See Also

Concepts

Getting Started with Visual Studio Tools for Apache Cordova

Other Resources

FAQ