Document TOP » Products Guide » Monaca for Visual Studio » Manual » Monaca for Visual Studio Overview

Monaca for Visual Studio Overview

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 Pricing.

Installing Monaca for Visual Studio

Note

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.
../../../_images/213.png

Note

If you want to have Onsen UI templates within Visual Studio, please download and install Onsen UI Templates for Visual Studio 2015.

  1. When the installation is completed, restart Visual Studio. Then, MONACA menu can be found in the Visual Studio menu.
../../../_images/311.png

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.
../../../_images/117.png
  1. Click Install.
../../../_images/122.png
  1. Please close Visual Studio before the update begins. Otherwise, the following dialog asking you to close the Visual Studio will appear.
../../../_images/132.png
  1. Click Next.
../../../_images/141.png
  1. Click Update. It will take sometimes until the installation completes. Please wait.
../../../_images/151.png

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.
../../../_images/102.png

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.

../../../_images/92.png

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.

../../../_images/411.png

Monaca Debugger is not Connected

../../../_images/59.png

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:

../../../_images/611.png

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:

../../../_images/77.png

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.

../../../_images/84.png

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

  1. Proxy Server with basic authentication
http://user:[email protected]:port
  1. Proxy Server without basic authentication
http://server-host:port