Part 1: Starting a Project

Step 1: Logging into Monaca

Before starting to develop Monaca app within Visual Studio IDE, please log into Monaca first:

  1. From Microsoft Visual Studio IDE menu, go to MONACA ‣ Sign In.
  2. Input your Monaca account information.
../../../_images/19.png

Step 2: Starting a Project

There are 3 ways to start a Monaca project in Visual Studio:

  1. creating a new project based on templates provided by Monaca
  2. opening an existing Cordova project
  3. importing an existing Monaca project.

Creating a New Project

In order to create a new project, please follow the instruction below:

  1. From Monaca panel, choose Create a new project.
  2. In the New Project window, go to Templates ‣ JavaScript ‣ Apache Cordova Apps. Then, choose a project template. Fill in the project’s information such as project name, project directory and solution name. Then, click OK.
../../../_images/26.png
  1. Now, your new project is successfully created. Visual Studio allows you to preview your project through Ripple Emulator. From Visual Studio menu, go to Debug ‣ Start Debugging or click the debug button as shown in the screenshot.
../../../_images/37.png
  1. Then, the emulator window will appear.
../../../_images/47.png
  1. You can change the debugging device within Ripple Emulator by clicking on the dropdown menu of the debug button as shown below:
../../../_images/54.png

Importing a Existing Monaca Project

Currently, we don’t have a direct importing feature for existing Monaca projects into Visual Studio. However, you can open existing Monaca projects as follows:

  1. Create a new blank Apache Cordova project. From New Project window, go to Installed ‣ Templates ‣ JavaScript ‣ Apache Cordova Apps. Then, choose Blank App (Apache Cordova) and click OK.
../../../_images/66.png
  1. Copy www folder from the existing Monaca project and replace the www folder inside your newly created project. After that, you can run the existing Monaca project within Visual Studio.
  2. Start debugging the project to see if the existing project run as you expect. From Visual Studio menu, go to Debug ‣ Start Debugging or click the debug button as shown in the screenshot. Then, the emulator window will appear.
../../../_images/37.png

Step 3: Editing the Project Files

  1. Go to Solution Explorer panel in order to see all of the project files. All editable project files are listed under www folder.
../../../_images/73.png
  1. Choose a file to edit and make some changes.
  2. Save the changes. You will be able to see the changes reflected immediately on the emulator window or Monaca debugger (if it’s connected).