Visual Studio Home Visual Studio
SIGN UP Help shape the TACO tools and get access to early releases.

Package your Cordova app so that you can publish it to a store

Updated: 3/17/2016

Create a package for each platform that you want to target. Then you can publish each package to a store.

Package the Android version of your app

In this section:

  • Modify the settings of your app.

  • Generate a private key.

  • Refer to that key in a configuration file.

  • Create the package.

Step 1: Modify the settings of your app

The general settings of your app appear in the Common page of the configuration designer.

configuration-settings-android

  • The Display Name is the name that appears in the app store.

  • The Package Name is a string that uniquely identifies your app.

    Choose a naming scheme that reduces the chance of a name conflict.

  • The Domain Access collection lists the domains that your app needs to access.

    For example, the WeatherApp that appears in the previous image, obtains weather data from a service endpoint that has the domain https://query.yahooapis.com.

The purpose of most other settings clear from the title, but you can find more information about them here: The config.xml File.

Android-specific settings appear in the Android tab of the configuration designer.

configuration-settings-android-specific

You can read about each option in the preference section of the config.xml reference topic.

Step 2: Generate a private key

To sign your app, create a keystore. A keystore is a binary file that contains a set of private keys. Here's how you create one.

  1. Open a Command Prompt in administrator mode.

  2. In the Command Prompt, change directories to the %JAVA_HOME%\bin folder.

    (For example: C:\Program Files (x86)\Java\jdk1.7.0_55\bin).

  3. In the Command Prompt, run the following command.

    keytool -genkey -v -keystore c:\my-release-key.keystore -alias johnS
    -keyalg RSA -keysize 2048 -validity 10000
    

    Replace my-release-key.keystore and johnS with names that make sense to you.

  4. You'll be asked to provide a password and the Distinguished Name fields for your key.

    This series of responses gives you an idea of the kinds of information you'll provide for each prompt. Like in the previous command, respond to each prompt with information that makes sense for your app.

    Enter keystore password: pwd123
    Re-enter new password: pwd123
    What is your first and last name?
    [Unknown]= John Smith
    What is the name of your organizational unit?
    [Unknown]= ABC
    What is the name of your organization?
    [Unknown]= XYZ
    What is the name of your of your City or Locality?
    [Unknown]= Redmond
    What is the name of your State or Province?
    [Unknown]= WA
    What is the two-letter country code for this unit?
    [Unknown]= US
    Is CN=John Smith, OU=ABC, O=XYZ, L=Redmond, ST=WA, C=US correct??
    [no]=  y
    
    

    After you provide this information, output like this appears in the Command Prompt.

    Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA)
    with a validity of 10,000 days for: CN= John Smith, OU= ABC, O= XYZ,
    L=Redmond, ST=WA, C=US
    
    Enter key password for <johnS>
        (RETURN if same as keystore password):
    

    The Android SDK generates the keystore as a file named my-release-key.keystore and places that file in the C:\ drive. The keystore contains a single key, valid for 10000 days.

    If you want more detail about this process, see the Android developer documentation here: Signing your applications.

Step 3: Refer to the private key in a configuration file

First, identify which version of the Cordova CLI that your project uses. That determines which configuration file you use to refer to your key.

Find the CLI version of your project

The CLI version number appears in the Platforms page of the configuration designer.

CLI version

You can also find it in the taco.json file at the root of your project.

If your Cordova CLI version is lower than 5.0, use these steps

  1. In Solution Explorer, expand the project folder. Then expand res->native->android and choose the ant.properties file.

    Android: Build assets

    The ant.properties file opens in the code editor.

  2. In the ant.properties file, add the information that describes your key.

    key.store=c:\\my-release-key.keystore
    key.alias=johnS
    key.store.password= pwd123
    key.alias.password= pwd123
    

    Important: Don't surround these values with quotation marks (For example: "pwd123"). This can cause build errors.

If your Cordova CLI version is greater than 5.0, use these steps

  1. In Solution Explorer, expand the project folder, and then choose the build.json file. If that file is missing from your project, your project was created with an earlier version of Cordova and you should create that file manually (and populate it with content in step 2).

    Android: Build assets

    The build.json file appears in the code editor.

  2. In the build.json file, add the information that describes your key.

    {
     "android": {
         "release": {
             "keystore":"c:\\my-release-key.keystore",
             "storePassword":"pwd123",
             "alias":"johnS",
             "password":"pwd123",
             "keystoreType":""
           }
       }
    }
    

Step 4: Create the package

  1. On the Standard toolbar, choose the Android platform.

    Platform selector

  2. Choose the Release build configuration.

    Release Build Configuration

  3. Choose one of the Android emulators.

    Target selector .

    Important: Don't choose any of the Ripple simulators. Choose only an Android emulator or the Device.

  4. On the Build menu, choose Build Solution.

    This builds a file with an .apk file extension. That is the file that you'll upload to the store.

    You can find that file in the bin/Android/Release/ folder of your project.

    It's the file that does not contain the word unaligned in the file name.

    apk file location

Submit your app to the store

You can publish your app to Google Play.

To prepare for the big day, review Essentials for a Successful App.

Then, see Upload an app to make your app avaialable to the world.

Package the iOS version of your app

In this section:

  • Request a distribution certificate.

  • Create a distribution provisioning profile.

  • Download the distribution provisioning profile in Xcode.

  • Modify the settings of your app.

  • Create the package.

Step 1: Request a distribution certificate

A distribution certificate identifies your team or organization.

If your team already has one and you want to reuse it, see How to share an iOS distribution certificate. Then, skip straight to the Modify the settings of your app section.

If you don't have a distribution certificate yet, continue on with this section and we'll help you set one up.

  1. Start Xcode.

    If you haven't installed Xcode, see the First, install a few things onto your Mac section of the iOS setup guide.

  2. In Xcode, add your Apple ID (If you haven't done so already).

    See Adding an Apple ID to Your Accounts.

  3. In the menu bar, choose Xcode->Preferences.

  4. In the Accounts page, choose the View Details button.

  5. In the account details page, choose the Create button next to the iOS Distribution signing identity.

    Create button

    Looking for more information about signing identities? See Creating Signing Identities (Optional reading).

  6. Choose the Done button to close the account details page.

Step 2: Create a distribution provisioning profile

A distribution provisioning profile lets you submit your app to the store.

  1. On the Member Center page, choose the Certificates, Identifiers & Profiles link.

  2. In the Certificates, Identifiers & Profiles page, choose the Provisioning Profiles link.

  3. In the Provisioning Profiles page, choose the + button.

    Add button

  4. In the What type of provisioning profile do you need? page, choose the App Store option, and then choose the Continue button.

    App Store Provisioning Profile

  5. In the Select App ID page, choose the App ID of your app, and then choose the Continue button.

    App ID popup menu

  6. In the Select certificates page, select the distribution certificate that you created earlier in Xcode, and then choose the Continue button.

    Certificates

  7. In the Name this profile and generate page, name your profile, and then choose the Generate button.

  8. In the Your provisioning profile is ready page, choose the Download button.

Need more detail? See Creating provisioning profiles using Member Center

Step 3: Download the distribution provisioning profile

  1. Open Xcode.

  2. In the menu bar, choose Xcode->Preferences.

  3. In the Accounts page, choose the View Details button.

  4. In the account details page, choose the Download button next to your provisioning profile's signing identity.

    Download button

  5. Choose the Done button to close the account details page.

Step 4: Modify the settings of your app

The general settings of your app appear in the Common page of the configuration designer.

configuration-settings-android

  • The Display Name is the name that appears in the app store.

  • The Package Name is a string that uniquely identifies your app.

    This identifier has to match the identifier of your distribution provisioning profile.

    Package Name in Visual Studio

    You can find the indentier of your profile by choosing your distribution profile in the Provisioning Profiles page of the Apple developer Member Center.

    Identifier of distribution profile .

  • The Domain Access collection lists the domains that your app needs to access.

    For example, the WeatherApp that appears in the previous image, obtains weather data from a service endpoint that has the domain https://query.yahooapis.com.

The purpose of most other settings clear from the title, but you can find more information about them here: The config.xml File.

iOS-specific settings appear in the iOS tab of the configuration designer.

configuration-settings-ios-specific

You can read about each option in the preference section of the config.xml reference topic.

Step 5: Create the package

Build your app to generate the package that you will submit to the store.

  1. On your Mac, make sure that the remote agent is running.

    See Start the remote agent on your mac.

  2. In Visual Studio, open the project for your app.

  3. On the Standard toolbar, choose the iOS platform.

    Platform selector

  4. Choose Remote Device.

    Target selector .

  5. Choose the Release build configuration.

    Release Build Configuration

  6. On the Build menu, choose Build Solution.

    This starts a build on the remotebuild agent and uses the distribution certificate and the matching provisioning profile to build a release signed iOS Application Archive (.ipa) file.

    You can find that file in the bin/iOS/Release folder of your project.

Submit your app to the store

  1. Copy the .ipa file into a folder on your Mac.

  2. Create an iTunes Connect Record for your app.

  3. Use the Application Loader to upload your .ipa file to iTunes.

Apple reviews your app. If they don't accept it, you'll receive an email that explains the reason and what you can do to fix it. These articles describe common reasons why apps get rejected.

Package the Windows version of your app

First, decide which platforms and device families you want to make your app available to. You can make your app available to Windows Phones, desktop PCs, and tablets.

It doesn't matter which version of Windows the app targets. The Windows store accepts all of them. That said, the operating system of a device or PC only runs apps that target the same version of that operating system or an earlier version.

To learn more about Windows package and Windows device compatibility, see OS versions and package distribution.

In this section:

  • Modify the settings of your app.

  • Make your app available to Windows Phones.

  • Make your app available to Windows desktop PCs or tablets.

  • Install your app on a device or publish it to the store.

Modify the setting of your app

The general settings of your app appear in the Common page of the configuration designer.

Configuration Settings Windows Platform

  • The Display Name is the name that appears in the app store.

  • The Package Name is a string that uniquely identifies your app.

    Choose a naming scheme that reduces the chance of a name conflict.

  • The Domain Access collection lists the domains that your app needs to access.

    For example, the WeatherApp that appears in the previous image, obtains weather data from a service endpoint that has the domain https://query.yahooapis.com.

The purpose of most other settings clear from the title, but you can find more information about them here: The config.xml File.

Windows-specific settings appear in the Windows tab of the configuration designer.

configuration-settings-ios-specific

You might have noticed that the this page shares three of the same field names as the Common page (Display Name, Package Name, and Version).

In the Create App Package Wizard (which you'll use later) you might have to choose a different display name or package name because of Windows-specific naming requirements, the name has already been reserved by someone else, or if you want to associate your app with a name that you've previously reserved.

In any of these cases, Visual Studio updates the Display Name and Package Name on the Windows page once you've completed the wizard. That way your other platform targets are not forced to use those names.

The reason why this page has a Version field is because Windows uses a 4 digit version number instead of a 3 digit one. You can either modify this field directly or let Visual Studio set this field based on the version number that you choose in the Create App Package Wizard.

We'll look at the Windows Target Version field in the next section.

Make your app available to Windows Phones

Which version of Windows does your app target? Choose a section:

Your app targets Windows 10

  1. In the Standard Toolbar, choose Windows-ARM.

    Windows ARM

  2. In the Windows page of the configuration designer, choose Windows 10 from the Windows Target Version dropdown list.

    Configuration Settings Windows Platform .

  3. Choose Project->Store->Create App Packages to start the packaging wizard.

    Windows: Create Appx Packages

  4. Complete the wizard.

    For step-by-step guidance, see Create an app package

  5. Find your packaging files in the AppPackages folder in the root of your project.

  6. Install your Windows app onto a device or publish it to the store.

Your app targets Windows 8.1

  1. In the Standard Toolbar, choose Windows Phone (Universal).

    Windows ARM

  2. In the Windows page of the configuration designer, choose Windows 10 from the Windows Target Version dropdown list.

    Configuration Settings Windows Platform .

  3. Choose Project->Store->Create App Packages to start the packaging wizard.

    Windows: Create Appx Packages

  4. Complete the wizard.

    For step-by-step guidance, see Create an app package

  5. Find your packaging files in the AppPackages folder in the root of your project.

  6. Install your Windows app onto a device or publish it to the store.

Your app targets Windows Phone 8

  1. In the Standard Toolbar, choose the Release configuration.

    Windows Release configuration

  2. Choose Windows Phone 8.

    Windows ARM

  3. Choose Build->Build Solution to build your package.

  4. Find your packaging files in the bin\WindowsPhone8\Release folder in the root of your project.

  5. Install your Windows app onto a device or publish it to the store.

Make your app available to Windows desktop PCs or tablets

  1. In the Standard Toolbar, choose Windows-AnyCPU.

    Windows AnyCPU

  2. In the Windows page of the configuration designer, choose Windows 10 or Windows 8.1 from the Windows Target Version dropdown list.

    Configuration Settings Windows Platform .

  3. Choose Project->Store->Create App Packages to start the packaging wizard.

    Windows: Create Appx Packages

  4. Complete the wizard and in the wizard choose which platforms you want to make your app available to.

    For step-by-step guidance, see Create an app package

  5. Find your packaging files in the AppPackages folder in the root of your project.

Install your Windows app onto a device or publish it to the store

To publish your app to the store, see Publish Windows apps.

To install your app directly onto a device Sideload your app package.

Did you find this article helpful?

Thanks!

We're sorry to hear that! Feel free to email our team with your question.


Want FASTER answers? Our team monitors a special StackOverflow tag here.