Even seasoned Ext JS developers are surprised to learn that Ext JS can be used to create executable desktop applications such as.exe or.app files (which can be run on Windows, macOS, or Linux). Sencha Themer, Sencha Architect, Sencha Inspector and Sencha Test are, in fact, executable desktop applications built with Ext JS and packaged with Electron. It’s even possible to upload and sell Ext JS applications, as well as package them for the Windows Store and Mac App Store using Electron. This article will walk you through the steps of creating and packaging an Ext JS 6 starter application, as well as how a Javascript Web Framework can help when creating installable desktop applications with Electron.
In order to make an Ext JS application executable, you’ll need to build the application using Sencha Cmd and then package the application with Electron. The principles for packaging an HTML5 mobile app using Apache Cordova or Adobe PhoneGap are very similar to those for packaging an HTML5 application for desktops. Currently, two desktop packaging frameworks are gaining traction: Electron, which was created by Github, and NW.js which was created by Intel and GnorTech. Both of these technologies are available under an open-source MIT license, so you can use them for free. Although each technology has its own set of advantages, I will only focus on Electron and Ext JS in this article. Electron is currently more popular than NW.js even though it’s a newer technology.
UPDATE: Watch the SenchaCon video on Advanced Techniques for Building Native Desktop Apps with Ext JS and Electron
Table of Contents
Electron – A First Look
In short, Electron is a runtime which is used to create desktop HTML5 applications. Under the hood, it’s running Chromium Content Module and Node.js runtimes. If your Ext JS webapp works in Chromium (an open source version of Google Chrome), it will also work within Electron. The impact of your Ext JS web app working in Chromium is that there is no need to test your applications on older versions of Internet Explorer, which lack modern HTML5 capabilities. Electron’s website lists numerous popular desktop applications you have probably used without realizing they are in fact an HTML5 application. Using Electron’s JavaScript APIs, you’ll be able to access native operating system APIs including features like clipboard, native application menus, context menus, notification, file system, and much more.
Electron Fundamentals
Electron works by launching a Main Process which usually launches one or more Render Processes. The Main Process is responsible for lifecycle events of an application. These include starting, exiting, and communicating with other native operating system APIs. The Render Process is created by the Main Process and can be used to load webpages. Each process is run in its own thread.

Figure 1: Electron launches the Main Process. The Main Process can create multiple Render Processes.
Because we’re using Node.js, we need to create a manifest file called package.json. This file helps Node.js understand various dependencies, which are included in the packaging process.
Let’s Package an Ext JS Starter App Together
Using Sencha Cmd, it’s possible to build a simple starter application with one command. In this section, we’ll first create a starter application using Sencha Cmd, and then package our simple starter application into an executable by using Electron.
As a prerequisite, you need to download and install Sencha Cmd and create a Sencha Cmd Workspace with the Ext JS framework. See the Installation instructions to create a Sencha Cmd Workspace. Additionally, you need to install Node.js.
Let’s first create the Ext JS starter application. You can do so with one command from within your Sencha Cmd Workspace.
sencha -sdk /path/to/ExtSDK generate app -classic StarterApp ./starterapp
Once your Starter App is created, you can run the following command to build your application for development within the starterapp directory:
sencha app watch
The command above will also enable you to view the Starter App by visiting the following link in your web browser: http://locahost:1841/starterapp.
After you have viewed the Starter App in your browser and you’re confident that the web app is functioning, open a second terminal window and go the starterapp directory.
Next, we’ll build the application using Sencha Cmd from the starterapp directory. The following command will create the electron/app subdirectories and place the minimized version of the Ext JS code into the electron/app subdirectory:
sencha app build -des electron/app
The flag -des can be avoided if the “output” property is updated in the app.json to build the application in the electron/app directory.
At this point, your directory structure should look like Figure 2.

Figure 2: An electron/app subdirectory is created by the sencha app build command.
Next, we need to create a manifest file called package.json in the starterapp/electron subdirectory. I have already created a sample package.json file and configured it to generate executable binaries for all supported operating systems. If you are on macOS and only wish to package your application for macOS, use the following sample package.json file instead. Download the file and place it in the starterapp/electron subdirectory.
Next, we need to create the file that contains our Main Process. Let’s call this file main.js and place it into our starterapp/electron/app subdirectory. I have created a basic Main Process file; download it and place it in the starterapp/electron/app subdirectory.
Next, we’ll need to install Electron and Electron Packager into our project. Run the following two commands in the starterapp/electron directory:
npm install electron-prebuilt -save npm install electron-packager --save-dev
After running the command above, you’ll have a new subdirectory called node_modules located in the starterapp/electron subdirectory.
To start your Electron application, type in the following in the starterapp/electron directory:
npm start
Now, you’re ready to write your own Ext JS 6 code. Each time you make changes in your Ext JS application, you’ll need to re-build, via Sencha Cmd, and re-run the npm start command. If you need to access Chrome Inspector, uncomment line 14 from the starterapp/electron/app/main.js file.
Once you’re done coding your application, you’ll need to package your application to produce an executable binary. If you’re packaging on macOS or Linux and want to create a Windows executable, you need to install Wine prior to packing your application. Wine assists in packaging Windows apps on macOS and Linux. Note: the process to install Wine on macOS can take around thirty minutes. If you’re on macOS and don’t wish to package for Windows and create an .exe binary, make sure you’re using the correct package.json file as described earlier, so you can still create a binary for Linux and macOS. If you already have MacPorts installed, you can use this command to install Wine in one step:
sudo port install wine
Next, to begin packaging your application, run the following command in the starterapp/electron directory:
npm run-script package
The command above will result in the application binaries being placed into a newly created starterapp/electron/dist subdirectory. In this subdirectory, you’ll find your newly created binaries for Linux, Windows, and macOS.
Next Steps
Ext JS and Electron work well together because Ext JS provides all of the components you’ll need to create a beautiful application, and Electron helps you package your Ext JS application and gives you access to native features.
Now that you’re done packaging your Ext JS Starter App, you can learn how to access more native features in Electron. Be sure to check out the Electron docs. Additionally, there are two Manning books about to be published that are available right now via early access on Manning’s website. Plus, at SenchaCon, we’ll have a session on Electron and Ext JS, where we’ll discuss more details about how these frameworks can be integrated to create desktop applications.
Can you talk about any disadvantages or shortcomings of doing these kind of apps? I can tell that the develop-test cycle is certainly cumbersome here. What other things are worth considering?
Thanks! Great post!
The dev-test cycle shouldn’t be cumbersome. You don’t need to run through the “npm install” commands each time you make a change to your code. All you need to do is a build and then run the “npm start” command. Consider changing the build.xml ant script to concat it further.
http://docs.sencha.com/cmd/guides/advanced_cmd/cmd_build.html
Hi,
Thanks for the great post. I will like to try this out. In the past I had developed a desktop app using extjs n Adobe air, one biggest challenge I had n have is code security. How is that done here, will the code base be easily accessible n available to anyone who installs the app ?
Regards
Shorabh
Just about any code can be decompiled, including native (e.g. javadecompilers.com and hopperapp.com). Although, you can take steps to obfuscate your JavaScript code making it difficult for someone who wants to inspect your code. Sencha Cmd will automatically obfuscate the Ext JS portion of your app code for you when you do a production build. See Electron docs for other obfuscation techniques for the Node.js + Electron portion.
From:
“Next, we’ll need to install Electron and Electron Packager into our project. Run the following two commands in the starterapp directory:”
To:
“Next, we’ll need to install Electron and Electron Packager into our project. Run the following two commands in the starterapp/electron directory:”
No?
You are correct. We will fix it in the blog.
Thanks for this simple and clear post. I hope that in a future post you will give some best practices for making the ExtJS app leverage the Electron APIs.
Thanks! You can expect a lot more from Sencha on Electron integration with Ext JS. For instance: https://www.senchacon.com/sessions/#session_57e967cb7a729
It should be noted that Sencha Architect 4.0 will not let you set your build directory within the same folder.
So if you want to try with a Sencha Architect 4.0 app, then you will need to run these commands separately as if you are using Sencha cmd yourself – which this guide is doing anyway.
I have been interested in using Electron for a while and this post was a perfect introduction, thanks Shikhir. Always happy to see guides like this on the blog and should be added to the documentation too.
You are correct, using Sencha Architect you can choose another build directory outside your project folder and then run these commands. From this point on, you will be able to follow the steps to include Electron.
Thanks for the Great Post :)
Can you talk about any disadvantages or shortcomings of doing these kind of apps? I can tell that the develop-test cycle is certainly cumbersome here. What other things are worth considering?
Advantages of Electron Apps:
1. Access to Node NPM modules. You will be able to access many native features this way.
2. Access to latest features of Chrome. You never need to think about Internet Explorer restrictions!
3. Speed! You maybe be able to reduce if not eliminate all network calls.
4. Possible integration with other Native Apps (should you choose)
5. Different app distribution channels (Mac App Store and Windows Store) for selling your apps
6. Embedded Databases!
7. Access to C/C++ via Node addons
8. Better Offline capabilities and interaction
Disadvantages of Electron Apps
1. High friction for users to get started: Users don’t like installing software. This is the biggest disadvantage.
2. Electron apps are desktop only. Although developers could use Cordova to create a hybrid mobile app.
3. Harder to switch devices and access the app’s data (unless it syncs online)
4. User’s hard drive must have free memory for installation
5. Although autoupdates are possible for Electron apps via autoUpdater module(http://electron.atom.io/docs/api/auto-updater/), Web apps updates to users appear to be instant and require no installation.
Can it be used to create intelliJ plugin?
I have this idea to create a sort of plugin for some stuff within intelliJ, it could come in handy to use ExtJS for the view, but I am having issues to connect chrome browser with intelliJ.
Perhaps electron could be solution?
I would reach out to the Jetbrains team to inquire further. Here is the FAQ for creating IntelliJ plugins:
http://www.jetbrains.org/intellij/sdk/docs/faq.html
This is a great guide, thanks. I’ve created a project template based on this, but modified it a little so that I don’t have to build it in order to test changes in Electron (I’ve also configured it to paginate an array of data in the grid via a fake http web server, using electron-routes). Here’s a link: https://github.com/mfearby/electron-extjs-starter
Thanks for sharing Marc, this is great!
Can I try this in an existing ExtJS application and not break everything? I’d like to try to package this, but if it doesn’t work I don’t want to spend time un-doing what this has done.
I’m using NWJS to wrap a window around my ExtJS application. We’re using it for our Intranet, but my NWJS window randomly disappears or crashes. I’m wondering if Electron would be more stable?