<commit_before>
<properties pageTitle="Getting started with Ionic apps in Visual Studio"
  description="This is an article on ionic tutorial"
  services=""
  documentationCenter=""
  authors="mikejo5000" />
  <tags
     ms.service="na"
     ms.devlang="javascript"
     ms.topic="article"
     ms.tgt_pltfrm="mobile-multiple"
     ms.workload="na"
     ms.date="12/01/2015"
     ms.author="mikejo"/>

# Get started with Ionic apps in Visual Studio
[Ionic](http://www.ionicframework.com) is a popular front-end JavaScript framework for developing cross-platform mobile apps using Cordova. You can use Visual Studio 2015 to easily create and debug cross-platform Ionic apps.

## Get the Ionic templates! <a name="getTemplates"></a>

You can install the Ionic starter templates in Visual Studio and use them to start building an app.

1. If you haven't already, [install Visual Studio 2015](http://go.microsoft.com/fwlink/?LinkID=533794).

    When you install Visual Studio, make sure you include the optional components, **HTML/JavaScript (Apache Cordova)** under Cross-Platform Mobile Development.

2. To run a quick test of your setup, verify that you can run the default Blank App template.

    * In Visual Studio, choose **File**, **New**, **Project**, **JavaScript**, **Apache Cordova Apps**, **Blank App** and name the new project "blank".

    * Choose **Windows-x86**, **Local Machine** and press F5 to run the app (make sure the app loads correctly). If any issues occur, see [Other issues?](#other).  

3. In Visual Studio, select **File**, **New**, then **Project**.

4. In the New Project dialog box, select **Online**.

5. In the search box, type **Ionic**.

    ![Getting the templates](media/tutorial-ionic/ionic-online-templates.png)

6. Search results will show **Ionic Project Templates for Visual Studio**.

    >**Note**: If you have a new installation of Visual Studio and the Ionic project templates are already installed, you can skip the next two steps.

7. Type any name and choose **OK** to install them.

    When you are asked for permission to install the templates, give your permission.

8. After Visual Studio creates the project, close and re-open Visual Studio.

9. Choose **File**, **New**, then **Project**.

10. Now, when you choose **Installed**, then **Templates**, the new starter templates will show up under **JavaScript**, **Apache Cordova Apps**

    ![Choosing a template](media/tutorial-ionic/ionic-installed-templates.png)

11. Choose one of the following starter templates for your new project:

    * Ionic Blank App
    * Ionic SideMenu Template
    * Ionic Tabs Template

12. Choose **OK**.

    Visual Studio creates the Ionic project.

13. Add [IntelliSense for Ionic](https://visualstudiogallery.msdn.microsoft.com/d6279fba-bcff-4857-906d-29faa8a99448/) to your project.

## Get your app running on Android <a name="configAndroid"></a>

1. Add the Android platform by **Android** as a debug target (Solution Platforms list), and then choosing **Build**, then **Build Solution**.

2. Choose **Android** as a debug target (Solution Platforms list), and to get the app running choose a target such as the **VS Emulator 5" KitKat (4.4)** (Hyper-V required) or the Google Android Emulator (slow to load initially).

    ![Run the app](media/tutorial-ionic/ionic-f5.png)

    You can configure a Google Android emulator in [AVD Manager](../develop-apps/run-app-apache.md).

    You can also run on Ripple simulator instead, but you will need to use the workaround described [later in this article](#keyboard).

3. Press F5, and the app should load correctly.

    ![App running in the emulator](media/tutorial-ionic/ionic-sidemenu.png)

### Troubleshooting: Let's fix it

[Keyboard or StatusBar plugin not found?](#keyboard)

[Visual Studio Emulator for Android won't run?](#vsAndroidEmu)

[Error saying that a Content Security Policy is missing?](#csp)
<commit_msg>adding direct link to Ionic VSIX <commit_after>
<properties pageTitle="Getting started with Ionic apps in Visual Studio"
  description="This is an article on ionic tutorial"
  services=""
  documentationCenter=""
  authors="mikejo5000" />
  <tags
     ms.service="na"
     ms.devlang="javascript"
     ms.topic="article"
     ms.tgt_pltfrm="mobile-multiple"
     ms.workload="na"
     ms.date="12/01/2015"
     ms.author="mikejo"/>

# Get started with Ionic apps in Visual Studio
[Ionic](http://www.ionicframework.com) is a popular front-end JavaScript framework for developing cross-platform mobile apps using Cordova. You can use Visual Studio 2015 to easily create and debug cross-platform Ionic apps.

## Get the Ionic templates! <a name="getTemplates"></a>

You can install the Ionic starter templates in Visual Studio and use them to start building an app.

1. If you haven't already, [install Visual Studio 2015](http://go.microsoft.com/fwlink/?LinkID=533794).

    When you install Visual Studio, make sure you include the optional components, **HTML/JavaScript (Apache Cordova)** under Cross-Platform Mobile Development.

    > **Note:** Run a quick test of your setup, verify that you can run the default Blank App template.  
    * In Visual Studio, choose **File**, **New**, **Project**, **JavaScript**, **Apache Cordova Apps**, **Blank App** and name the new project "blank".  
    * Choose **Windows-x86**, **Local Machine** and press F5 to run the app (make sure the app loads correctly). If any issues occur, see [Other issues?](#other).  

2. Install the Ionic templates straight to your machine by downloading and clicking on the [VS Extension for Ionic](https://visualstudiogallery.msdn.microsoft.com/4e44ba8b-a4c8-4106-b70e-00d63241a54a). 

Or, do it in Visual Studio, by selecting **File**, **New**, then **Project**. In the New Project dialog box, select **Online**.

In the search box, type **Ionic**.

    ![Getting the templates](media/tutorial-ionic/ionic-online-templates.png)

Type any name and choose **OK** to install them.

    When you are asked for permission to install the templates, give your permission.

3. Close and re-open Visual Studio. Again, choose **File**, **New**, then **Project**. Now, when you choose **Installed**, then **Templates**, the new starter templates will show up under **JavaScript**, **Apache Cordova Apps**

    ![Choosing a template](media/tutorial-ionic/ionic-installed-templates.png)
    
Choose one of the following starter templates for your new project:

    * Ionic Blank App
    * Ionic SideMenu Template
    * Ionic Tabs Template

4. Choose **OK**.

    Visual Studio creates the Ionic project.

5. Add [IntelliSense for Ionic](https://visualstudiogallery.msdn.microsoft.com/d6279fba-bcff-4857-906d-29faa8a99448/) to your project.

## Get your app running on Android <a name="configAndroid"></a>

1. Add the Android platform by **Android** as a debug target (Solution Platforms list), and then choosing **Build**, then **Build Solution**.

2. Choose **Android** as a debug target (Solution Platforms list), and to get the app running choose a target such as the **VS Emulator 5" KitKat (4.4)** (Hyper-V required) or the Google Android Emulator (slow to load initially).

    ![Run the app](media/tutorial-ionic/ionic-f5.png)

    You can configure a Google Android emulator in [AVD Manager](../develop-apps/run-app-apache.md).

    You can also run on Ripple simulator instead, but you will need to use the workaround described [later in this article](#keyboard).

3. Press F5, and the app should load correctly.

    ![App running in the emulator](media/tutorial-ionic/ionic-sidemenu.png)

### Troubleshooting: Let's fix it

[Keyboard or StatusBar plugin not found?](#keyboard)

[Visual Studio Emulator for Android won't run?](#vsAndroidEmu)

[Error saying that a Content Security Policy is missing?](#csp)

{'fraction_non_alphanumeric': 0.1111111111111111, 'fraction_numerical': 0.019887092635360534, 'mean_word_length': 4.2105614973262036, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 17, 'https://': 3, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6333529', 'n_tokens_mistral': 2358, 'n_tokens_neox': 2144, 'n_words': 950}