How to Use a Cordova Build Profile with Sencha Command and Ext JS using Universal Toolkit

The Missing Piece in Universal Apps

Following our Cordova / Phone Gap Guide, you can build a simple Cordova app using Sencha Command 6.6+ and Ext JS 6.6+. Check out our Community Edition if you aren’t a customer yet. If you’ve already followed the tutorial, you might have a few questions about custom build profiles and how they are used to generate an app’s manifest. This guide is easy to follow and will help you get started working with your favorite Sencha products and Cordova. Along the way I’ll provide some helpful insight on the various build profiles created for you in a universal app as well as how to create a custom build profile – each profile allowing you to package your app with Cordova to provide that native experience you want.

Once you have created your Cordova app and are ready for testing, navigate to the root directory of your project and open up index.html in your favorite editor. Let’s take a look at the Ext.beforeLoad hook. You’ll see we are setting a manifest from a chosen profile. If you followed our docs example, you should have a “native” build profile created by Cordova (if you deleted the entire builds object), or you should have a classic and a modern profile, with the modern profile having the Cordova integration.

As a developer, you have two options at this point. Option 1: add Cordova support to either existing build profiles (modern / classic) or option 2: use your own custom profile. The issue here is that there currently isn’t a code path to a custom-named build profile. Looking at index.html, we can see that we are defaulting to modern if we fail to match profiles.

Let’s go with option one first. Follow the guide until you reach the section with the example “native” build profile – don’t delete your existing build profiles! Here we have two different build profiles, with Cordova integration added to the modern profile (just like the docs show):“builds”: {
“classic”: {
“toolkit”: “classic”,
“theme”: “theme-triton”,
“sass”: {
“generated”: {
“var”: “classic/sass/save.scss”,
“src”: “classic/sass/save”
}
}
},

“modern”: {
“toolkit”: “modern”,
“theme”: “theme-neptune”,
“packager”: “cordova”,
“cordova”: {
“config”: {
“platforms”: “android”,
“id”: “com.mydomain.MyApp”
}
}
}
},

Because we are using the modern profile, the correct profile gets added to the manifest and we have a working app (I’m testing in the Android Studio emulator using Android 7 and API 27).

This is all well and good until you continue through our guide, which indicates you should have a build profile called “native”. While this isn’t wrong, you’ll run into the aforementioned problem where no profile is selected and no manifest get’s generated / loaded. The result is a blank white screen!

Here’s how we use a custom-named build profile. I’ll use one called native, generated by Cordova init after completely removing my builds object. Be sure to remove the builds object from your app.json if you want to go this route, or copy the one below or from the guide. If you removed your builds object, running the Cordova init command will create a profile for you automatically. If you leave your existing builds object, then the output from the init command will tell you to remove your existing profiles and run init again – but you don’t have to do that! If I open up my app.json and look at the builds object you can see my custom build profile for Cordova. It’s very similar to the one generated by Cordova init.“builds”: {
“native”: {
“packager”: “cordova”,
“toolkit”: “modern”,
“theme”: “theme-neptune”,
“cordova” : {
“config”: {
“platforms”: “android”,
“id”: “com.mycompany.androidapp”,
“name”: “AndroidApp”
}
}
}
}

In order to use this build profile I will need to set the appropriate build profile in index.html:profile = ‘native’; // ‘native’ can be whatever you called your profile
Ext.manifest = profile; // this name must match a build profile name

Now you can build and run or emulate your application using the commands listed in the docs. With the profile properly set in index.html, you should have a fully functioning Cordova application!

Summary

Our documentation site is being updated (in progress as we speak) and will be out soon! We are also looking at appropriate ways to automate and improve the profile selection process. Stay tuned!