Create project from existing code | Cordova, PhoneGap, Ionic, Visual Studio

When I start a new Cordova or Ionic project I normally start from the command line. I initialize the project and add some platforms and packages I need to use in my project. I sometimes start coding from VSCode, but there will be a point where I’d like to switch to Visual Studio, the full version. Until recently I started by creating a new project and move the existing code and config files into that. That was until I came across this awesome feature in Visual Studio: “Create New Project From Existing Code Files”. I don’t know when it was added, but I somehow missed it.

Here’s how it works.

Import existing project

I assume you already have an existing piece of code you want to move over to a Visual Studio project. To get it into Visual Studio the easy way, go to File –> New in the menu and select, “Project From Existing Code…”

FileNew

In the dialog that appears make sure “Apache Cordova” is selected in the dropdown list and hit the “Next >” button.

CreateProject

On the next dialog screen you have to navigate to the folder in which you Cordova project is. You also have to give your project a name. Hit “Finish” after that to close the dialog and start the creation of the project. This may take a few seconds.

FolderNameProject

After the project is imported you’ll end up with a solution similar to the one in the image below.

solution

From this point on you can use Visual Studio to work on your Cordova, or Ionic, project.

 

Preventing Pinch-Zoom in Cordova on Windows 10 Mobile | Cordova

One of the most obvious ways to spot a Cordova app is a pinch-zoom inside the app. On Android and iOS you can use meta-tags and CSS to disable the pinch-zoom and over scroll. But for some reason I couldn’t get it disabled on Windows 10 mobile.

The Solution

I’ve been looking everywhere for the solution. And after a long search it turned out to be very easy. Just add the following CSS to your app:

html {
    touch-action: none;
}

There used to be a Microsoft vender specific version of this, but the vender part is dropped and it’s now according to the W3C standard.

Fix unsafe:ms-appx-web issues in Angular and Cordova on Windows 10

During a recent stream over at LiveCoding.TV I ran into some issues with displaying an image in a Cordova app I’m building. This image was stored inside my appx package, but the Content Security Policy blocked it anyways.

It turned out I needed to whitelist the ms-appx and ms-appx-web protocols.

I modified the initialization of the Angular module to whitelist these protocols for images and hrefs as you can see in the example below:

angular.module('app', ['ngRoute'], function ($compileProvider) {
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|chrome-extension|ms-appx-web|ms-appx):|data:image\//);
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|chrome-extension|ms-appx-web|ms-appx):/);
});