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

How to migrate an existing Cordova app to VS2017
10 March, 2017
Fady Soliman
271 Views
 1 user marked as helpfull

Introduction to Visual Studio 2017

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 develop mobile apps that are cross-platform and from the VS IDE.
  • and much 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. (See screenshot below)

Mobile development with JavaScript


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

Create a new Cordova Project


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

Cordova created project on VS




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

Related Posts

09 March, 2017
Fady Soliman
phonegap , .net
271 Views

Did you find this helpfull?

About The Author

Fady Soliman

An experienced, resourceful and highly motivated IT professional, with a proven record of success in both Stack Development and Software Architecture. Possesses a wealth of transferable skills, including outstanding interpersonal, problem solving and staff management abilities. A capable organizer, quick to grasp – and make good use of – new ideas and information, and reliable and conscientious in all he takes on.

leave A Comment