Hands-On: ExtJS + Electron JS → AlliBilli.com on Surge.sh

💁 Context:

1. This article is intended to build a live web application. AlliBilli.com using ExtJS.
2. Use the same app and turn it to run as a Desktop app using the Electron JS for OSx & Windows.

💁 Set up the environment

Go to ExtJS and fill the form to receive the credentials for community edition.

💁 There are 2 ways to generate an EXT JS App.

Sencha-Gen NPM Generator Structure

1. The NPM Way (Classic Themes are not available)

• Run the command to add NPM registry →

🛠 npm login --registry=https://sencha.myget.org/F/community/npm/ --scope=@sencha

using the credentials retrieved.

Example:
Username: testme..gmail.com
Password: XXXXXX
Email: (this IS public) testme@gmail.com

• Install the runtime & SDK

🛠 npm install -g @sencha/ext-gen

Generate the EXT JS App using the npm interactive mode. Choose the defaults or enter your custom input for the application name and to generate package.json.

🛠 ext-gen app -i

• Run the below command

🛠 npm run start

you will be seeing a running application in the browser per the below screenshot.

NPM Generated App

Go to ‘app/desktop/sass/var.scss’, uncomment one of the $base-color variables and you can see the theme colors.

Sencha Command Generated Structure

2. The Sencha Command Way

• Download and Install Sencha Command. Different ways of generating the project as listed below:

🛠 sencha generate app -ext -classic AlliBilli ./MyClassicApp
🛠 sencha generate app classic -ext AlliBilli ./MyClassicApp
Above commands gnerates the application in the MyClassicApp folder.
🛠 sencha app init --ext@7.2.0 -t classicdesktop --classic AlliBilli
This command genates the app in your own folder.

To run the application, use the below command:

🛠 sencha app watch

It generates a similar application per the screenshot below:

A classic app generated through Sencha Command.

💁 Package Structure

Take a look at the package structure generated using NPM & Sencha Cmd and observe the difference, per the above screenshots. You can organize yourself later however you would like.

📔 View, View SCSS file, ViewController, ViewModel is called a ViewPackage.

💁 ExtJS Terminology:

Package: The folder structure. Organizing files in a maintainable fashion.

Design Pattern: 👽 MVVM — Model, View, ViewModel

• View → Specification about Presentation. The UI Interface user is interacting with. Part of View Package.
• Model → The actual Data. Usually Model should be at the parent package holding the store of data records.
• ViewModel → Specifications about DataBinding, Data, Store. Part of View Package.
• ViewController → User Actions, Listeners, event handlers like for button clicks. The business logic. Part of View Package.

💁 Time to build a few functionalities:

• Border Layout: Let's stick the components in multiple regions: East, West, South, North & Center. These components will bring the auto panel collapsing features to the navigations (left & right closable panels).

A quick example of a Border Layout.

• Add a Reorderbale Tab Panel in the center view. This also requires the Ext UX to be imported. Make sure this is also available in app.json file.

"requires": ["font-awesome","ux"]

Add “Ext.UX” inside app.json requires section, which is used here.

• Now customize the bottom dock with few buttons. Note the way how the DockerView and DockerViewController are written.

• Completed Center Component will look like this:

💁 Reload the app in your browser (Considering the “Sencha app watch” command is already running and watching for changes). The App will look like this so far:

💁 Covert to a desktop app, using Electron.

For that, at first, let's generate a production-ready code by building this application.

🛠 sencha app build -des electron/app

Open the folder and find the HTML file. Open it inside a browser and you will be seeing your app running as you designed.

Run the below command from the electron/app directory to create a package.json file.

🛠 npm init

Enter the details as listed below:

package name: (app) allibilli
version: (1.0.0) 1.0.0
description: All news papers at one place
entry point: (app.js) index.js
test command: 
git repository: 
keywords: AlliBilli, News
author: Gopi K Kancharla
license: (ISC) MIT
About to write to /Users/gopimac/Documents/GitHub/AlliBilli/electron/app/package.json:
{
  "name": "allibilli",
  "version": "1.0.0",
  "description": "All News papares at single place",
  "main": "./main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "AlliBilli",
    "News"
  ],
  "author": "Gopi K Kancharla",
  "license": "MIT"
}
Is this OK? (yes) yes

The above command will generate a package.json file. Now, install the below two packages:

🛠 npm install electron -save 
🛠 npm install electron-packager --save-dev

Open your package.json file and add the below script:

"start": "electron .",
"package": "electron-packager ./ starterapp --all --out ./dist --overwrite",

It now looks like below:

Now copy the following files from https://github.com/electron/electron-quick-start into your electors/app directory.

main.js
preload.js
renderer.js

Now, running the command results in the below screen.

🛠 npm start

The Electron Desktop App

Now let's learn to package.

If you are packaging from MacOS we need to install “wine64”

🛠 brew cask install xquartz
🛠 brew cask install wine-stable

Now run

🛠 npm run package 
* Results the below status.
Wrote new apps to:
dist/starterapp-linux-ia32
dist/starterapp-win32-ia32
dist/starterapp-darwin-x64
dist/starterapp-linux-x64
dist/starterapp-mas-x64
dist/starterapp-win32-x64
dist/starterapp-linux-armv7l
dist/starterapp-linux-arm64
dist/starterapp-win32-arm64

open the mas 64 folder and run the app on OSX.

Uninstall after you are done:

🛠 brew cask uninstall wine-stable
🛠 brew cask uninstall xquartz

💁 Find the Source-Code:

GopiMedium/allibilli-ext-js-electronjs

💁 Let’s Install on Surge:

Surge

• Install Surge:

🛠 npm install --global surge

• Build the application which we want to deploy

🛠 npm run build:desktop (Npm way of building the app)
🛠 sencha app build -des electron/app (Another way to build - custom folder)
🛠 sencha app build (Another way to build - build folder)

Move to the build/production/allibilli folder and run

🛠 surge

:: Bhoom 🙋::

Your app will be up and running and it is now live. Add the custom domain as described here.

Special Thanks to XYZ for reviewing, comments, and Guidelines.

AlliBilli.com

Find my other articles & publication: ThinkSpecial