Overview

Monaca for Visual Studio has been discontinued and will no longer be supported or maintained. We are developing a new extension that will be for Visual Studio Code. We will inform you of the release date on our site and mailing list.

Monaca for Visual Studio is an extension allowing you to develop Monaca applications using Microsoft Visual Studio IDE. Several features found in Monaca Cloud IDE are included in this extension. Therefore, app development with Monaca for Visual Studio is very similar to the app development on Monaca Cloud IDE.

Monaca for Visual Studio

Prerequisites

In order to use Monaca for Visual Studio, you need:

  • Microsoft Visual Studio 2015 Community Edition, Professional Edition or higher editions.
  • a valid plan subscription. Please refer to Monaca Subscription Plans.

Installing Monaca for Visual Studio

It is necessary to install tools for Apache Corodva in Visual Studio in order to run Monaca for Visual Studio properly.

There are two ways to install Monaca for Visual Studio such as:

  1. Installing from Visual Studio
  2. Installing from Web

Installing from Visual Studio

  1. From Visual Studio menu, go to Tools → Extensions and Updates .
  2. Then, go to Online → Visual Studio Gallery . Next, input monaca in a search box on the top-right corner.
  3. Select Monaca for Visual Studio 2015 and click Download. Wait until the download is finished, then install it.

    If you want to have Onsen UI templates within Visual Studio, please download and install Onsen UI Templates for Visual Studio 2015.
  4. When the installation is completed, restart Visual Studio. Then, MONACA menu can be found in the Visual Studio menu.

Installing from Web

  1. Download Monaca for Visual Studion extension here.
  2. Open the downloaded file and follow the installation instruction.
  3. Restart Visual Studio if it is opened during installation. Then, MONACA menu can be found in Visual Studio menu.

Installing Tools for Apache Cordova

  1. From Visual Studio menu, go to File → New → Project .
  2. Then, go to Installed → Templates → JavaScript → Apache Cordova Apps.
  3. Select Install Tools for Apache Cordova Update 7 and click OK.

  4. Click Install.

  5. Please close Visual Studio before the update begins. Otherwise, the following dialog asking you to close the Visual Studio will appear.

  6. Click Next.

  7. Click Update. It will take sometimes until the installation completes. Please wait.

Uninstalling Monaca for Visual Studio

To completely uninstall Monaca for Visual Studio, you need to perform the following steps:

  1. Uninstalling from Visual Studio
  2. Uninstalling from Windows PC

Uninstalling from Visual Studio

  1. From Visual Studio menu, go to Tools → Extensions and Updates .
  2. Then, go to Installed → Tools .
  3. Select Monaca and click Uninstall.

Uninstalling from Windows PC

  1. Go to Control Panel → Programs → Uninstall a program .
  2. Select Monaca for Visual Studio and click Uninstall.

Monaca Panel Features

Once Monaca is successfully installed and added into Visual Studio IDE, please log in with a valid Monaca account.

In Monaca panel, there are several features such as:

Run in Device

This function is available when at least one Monaca Debugger is connected to the host PC (running Visual Studio). It will run the current project in Monaca Debugger. Please refer to How to Connect Monaca Debugger with Monaca for Visual Studio.

Monaca Debugger is not Connected & Monaca Debugger is Connected

Build Settings

Just like in Monaca Cloud IDE, this function will open a Build Settings window which allows you to configure project settings as well as build settings such as:

Build

This function will open a Build window which allows you to build your project for 4 different platforms as shown in the screenshot below:

Preferences

While trying to pair/connect Monaca Debugger with the PC hosting Monaca within Visual Studio, you might need to configure HTTP Server Port and Proxy Server. Please refer to troubleshooting the Pairing on when this function is needed.

You can find this function by going to MONACA → Preferences .

There are two ways to define the proxy server address as follows:

  1. Proxy Server with basic authentication

    http://user:[email protected]:port
  2. Proxy Server without basic authentication

    http://server-host:port