Migrating an existing Cordova application to a Cordova project on Visual Studio 2017 in 3 steps

This topic will be discussed with the following structure.

• Step 1: Creating a new Cordova project on VS2017
• Step 2: Migrating your existing Cordova application files to the created project
• Step 3: Building and running your application
• You are done

March 7th, 2017 was really a great day in every .Net developer's life. Microsoft launched the Visual Studio 2017 with many great features geared towards Windows Azure and mobile development with much better performance and user experience. I, for sure, downloaded the enterprise and had a look at those nice features out there like:

• Live Unit Testing: where you can observe which line of code has a failing unit test, all succeeding or even uncovered yet by at least a single unit test.
• Xamarin Complete Integration: that allows you to develop mobile apps that are cross-platform and from the VS IDE.
  
• And much more features, but that is not the main core subject of this post. You can take a look at the full list of features here, and of course you can download the Visual Studio from here.

Here is the complete launch event with running demos of all new features and capabilities on Visual Studio 2017

One of those features that caught my eyes is creating a fully working Cordova application projects from the VS, then I asked myself, does that really mean I can create a new "Cordova" application through a defined project template on the VS, and it's going to be among the other projects in my solution? 

The answer is, yes! Then the next question came in, Can I migrate my existing applications to be Cordova projects on the VS IDE? That's what I'm going to explain further in this post.

Migrating your Cordova applications to Visual Studio is possible, and the fact is, it is easy. You can accomplish that in 3 steps only.

Step 1: Creating a new Cordova project on VS2017

In this step, you will create a new Cordova project on VS2017.

Prerequisites

The "Mobile Development with JavaScript" workload is installed among the other workloads during the installation of Visual Studio. If you have already installed VS without it then you can rerun the installer, then click "Modify" on your current version, then select the "Mobile Development with JavaScript" workload and continue the wizard to install it. 

Project creation steps:

1. Open or create a new solution, then right-click the solution on "Solution Explorer" and click Add > New Project.
2. On the project templates left-side pane, select JavaScript > Mobile Apps.
3. On the right-side pane, select "Blank App (Apache Cordova).
4. At the bottom, Type in a Name for the project, then click "OK".

After clicking "OK", Visual Studio will create a new Apache Cordova project on your solution. Time for migrating your existing app to that project.

Step 2: Migrating your existing Cordova application files to the created project

Now you are all set to copy over your existing app files to the created project in step 1. You need to copy the following files:

1. All files under WWW folder.
2. All application settings in config.xml.

Copying files to a Visual Studio project is as easy as doing a "copy" on your file explorer on your system, then right-click the target folder on your Visual Studio and click "Paste". Assuming you are using Windows as the operating system.

Step 3: Building and running your application

In this step, you will build your application on Visual Studio and run the app with emulation capabilities.

1. Right-click the created project in step 1 and click Build.
2. Notice the output window while Visual Studio creates all the needed files for the application.
3. Once you get the "Build Succeeded" message on the output window, right-click the project, then click Deploy.
4. You should now be able to see the app running on a browser instance, along with the Simulation session inside VS. (See screenshot)

Cordova Simulation Capabilities in Visual Studio 2017

So what is the real benefit of having an existing Cordova app migrated to an Apache Cordova project on VS2017, beside building and running the app? The answer is Visual Studio 2017 offers some great simulation capabilities that you can use to perform a specific scenario (like changing geographic location, device type… etc.) that you would not be able to handle running your app on a browser through a standalone Phone Gap or Cordova NodeJS server. Some of those simulation capabilities are:

1. GeoLocation:
   1. Changing your location on a map to target specific locations. Some apps would behave differently when you enter a specific region, like restaurant apps that usually send push notifications when you come nearby a well-known restaurant.
   2. You can also change your location by entering a specific longitude or latitude and much more options.
2. Native Events:
   
   1. You can fire a set of native events on your app through the VS simulator like back button, menu button, resume, search or make your phone offline/online.
3. Different Devices:
   1. You can simulate different device types like Samsung Galaxy, LG, Nexus and so on.
   2. You can control the OS version and more.
4. Compass:
   1. You can simulate the device compass by the VS simulator compass.
5. InAppBrowser Behavior:
   1. You can change the behavior of the app's InAppBrowser on the browser (not when packaged to an ipa or apk of course) by either opening a new window or use an internal iframe on the same window.

You are done

Now you have completely migrated, built and ran your Cordova app from Visual Studio and with extremely useful simulation features. I hope this post helped you migrate your app and feel free to leave a comment for any further questions or details.