JS Days 2025 is now live – Join 5,000+ devs for the premier virtual JavaScript event. Register Now

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

January 8, 2019 2160 Views
Show

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!

Recommended Articles

Guide to Estimating ROI When Switching From DIY Libraries to Full Software Development Platforms Like Ext JS

Teams started with Do It Yourself, or DIY, JavaScript tools like jQuery and Bootstrap. But those fall apart as projects scale. Scattered code, user interface…

Top Frameworks Developers Are Using for Custom Software Development in 2025

We’re seeing it more every year; teams aren’t settling for plug-and-play tools anymore. In healthcare, finance, logistics, and other data-heavy industries, there’s a clear shift.…

Meet Sencha AI Coding Companion: Your AI-Powered Assistant for Faster Ext JS Development

Building modern web applications should be exciting. But too often, developers find themselves buried in documentation, endlessly Googling framework quirks, or stuck solving the same…

Ext JS 7.9 & Rapid Ext JS V1.1 Have Arrived

The Sencha team is excited to announce the latest Ext JS version 7.9 and Rapid Ext JS 1.1 release – designed to accelerate development, enhance…

Top 10 JS Grid Customization Tips for a Better UI Experience

Grids are pretty much everywhere in web apps. Working with financial sheets, product details, or users? Then you’ve probably used a JavaScript grid. It makes…

Why Ext JS Framework is the Go-To Framework for Building Scalable and Data-Intensive Web Apps

Web apps are much more advanced now. They deal with large amounts of data and need to stay fast, even with many users. If you’re…

View More

Trusted by Top Developers: Learn how to enhance your development journey — for free

Get the latest newsletter keeping thousands of developers in the loop.

Loved by developers at