Skip to main content
Version: 1.2.x

Phone and Tablet Apps with PhoneGap

Key Points
  • Optimize your app.
  • Copy all assets to the _www_ folder of your PhoneGap/Cordova project.
  • Update the _index.html_ file to point to the optimized build (and your other assets).

Explanation​

Creating native applications for phones and tablets is easy by combining Durandal with PhoneGap/Cordova. The first step is to optimize your application for deploy. How you do this depends on what platform and setup you are running. In general, you have these options:

  • If you are using the .NET project, you can run optimizer.exe, located at app/durandal/amd/optimizer.exe
  • If you are using Mimosa, then you can execute the command mimosa build -mo
  • For all other configurations, you should see the r.js documentation for help using the optimizer directly.

Ultimately, the output of this process should be a file such as main-built.js which contains all your app's JavaScript and HTML. Next, you will want to locate the www folder inside of your PhoneGap/Cordova project. Copy all your applications's assets to that folder. This includes, images, css, 3rd party JS libraries...and of course, your main-built.js file. Finally, you need to update the index.html file so that it points to your css, etc and be sure to add a script reference for main-built.js. That's it.

Note: If you wish to run without needing to optimize, you may need to perform an additional step. For example, the PhoneGap Visual Studio 2012 template requires that you alter Plugins/File.cs by changing readResourceAsText, because it reads the views from the wrong location. You can see this article for more information.