Sencha npm Tooling With Ext JS 6.6

Sencha tooling with npm has been announced for Ext JS 6.6.

This is awesome news!  This post is partly news item and partly tutorial.  As of June 4, 2018, Sencha made an early version of their new tooling available to their MVPs.  As a member of that group, I wanted to share some state-of-the-moment news and information for the new npm based Sencha tooling.

To learn about the Sencha MVP program and to become an MVP yourself, checkout this link: Sencha MVP Program.

Ext JS 6.6 is on the horizon and with the new release comes node packaging and node tooling to build your application.   See this link for a detailed discussion: Top Considerations for Web Development in a Free Open Source World.

This is super exciting because the same npm based build concepts in use with React, Angular and other frameworks are now in beta for Ext JS Modern and Classic.  Hooray!!  This breaks us out of the Sencha Cmd silo and makes Ext JS feel a lot more open.

To begin, make sure npm is current on your system. with npm -v 

Determine the the version of node and npm currently available here.

Get npm here if you don’t have it.

Your Sencha forum user id and password is required to get access – but first you must be a member of the Sencha MVP Program.

When prompted for user id, use your sencha support id, but replace the (at sign) @ sign in your email address with (two dots) ..

example: myemail..gmail.com

You will be asked for you Sencha forum password

You will be asked for your email address, this is your Sencha support forum email address.  Same as above but with the @ sign, not the dots

// login here!
npm login --registry=http://test.npm.sencha.com --scope=@sencha
// then install from here
npm install -g @sencha/ext-gen

Depending on your setup, for mac or linux, you may need to run with sudo.

The above screenshot shows what you will see after a successful installation.

Below, is an easier to read and copyable version of the screenshot above.

Welcome to Sencha ExtGen v0.0.191 - The Ext JS code generator
Quick Start:
ext-gen app MyAppName
ext-gen app -i
Examples:
ext-gen app --auto --template universalclassicmodern --classictheme theme-triton --moderntheme theme-material --name CoolUniversalApp
ext-gen app --auto --template classicdesktop --classictheme theme-triton --name CoolDesktopApp
ext-gen app --interactive
ext-gen app -a --classictheme theme-graphite -n ClassicApp
ext-gen app -a -t moderndesktop -n ModernApp
Run ext-gen --help to see all options

I conducted some tests based on the above examples and they were all successful.   They all built successfully and ran as expected.  The -i or –interactive options prompt for the template type but does not (yet?) prompt for the theme.

Below is the output from the ext-gen –help with some color coding to draw your attention to the current list of templates and themes.  Think of templates as the type of app you are wanting to create:  classicdesktop, moderndesktop, universalclassicmodern, universalmodern – see the template descriptions in red below for more details.

Themes are out-of-the box ways to effect and control the look of the app.  Here is a list of the stock themes available in Ext JS 6.5.3 (not sure if this is the same list that will be available for Ext JS 6.6 or not).  There is a lot to say about themes, creating custom themes and so forth that are beyond the scope of this article but I’m sure Sencha will move this forward the way they always have.

Sencha ExtGen v0.0.191 – The Ext JS code generator

Quick Start: ext-gen -a

ext-gen app (-h) (-d) (-i) (-t ‘template’) (-m ‘moderntheme’) (-c ‘classictheme’) (-n ‘name’) (-f ‘folder’)

-h –help show help (no parameters also shows help)-d –defaults show defaults for package.json-i –interactive run in interactive mode (question prompts will display)-t –template name for Ext JS template used for generate-c –classictheme theme name for Ext JS classic toolkit-m –moderntheme theme name for Ext JS modern toolkit-n –name name for Ext JS generated app-f –folder folder name for Ext JS application (not implemented yet)-v –verbose verbose npm messages (for problems only)

Examples:ext-gen app –template universalclassicmodern –classictheme theme-graphite –moderntheme theme-material –name CoolUniversalAppext-gen app–template classicdesktop –classictheme theme-graphite –name CoolDesktopAppext-gen app –interactiveext-gen app -a —classictheme theme-graphite -n ClassicAppext-gen app -a -t moderndesktop -n ModernApp

Templates:You can select from 4 Ext JS templates provided by Sencha ExtGen

classicdesktop (default)This template is the default template in ext-gen. It contains 1 profile, configured to use the classic toolkit of Ext JS for a desktop application

moderndesktopThis template is similar to the classicdesktop template. It contains 1 profile, configured to use the modern toolkit of Ext JS for a desktop application

universalclassicmodernThis template contains 2 profiles, 1 for desktop (using the classic toolkit), and 1 for mobile (using the modern toolkit)

universalmodernThis template contains 2 profiles, 1 for desktop and 1 for mobile. Both profiles use the modern toolkit.

Theme Names:classic themes: theme-classic, theme-neptune, theme-neptune-touch, theme-crisp, theme-crisp-touch theme-triton, theme-graphitemodern themes: theme-material, theme-ios, theme-neptune, theme-triton 

And finally, here are the npm commands I used to build for testing and production the way Sencha Cmd has historically done.

cd into the app folder and execute the appropriate build command.

npm run build-desktop-testing
npm run build-desktop-production
npm run build-phone-testing
npm run build-phone-production

To review Sencha Cmd for Ext JS 6.5.3 (pre npm and pre ExtJS 6.6), take a look at the article I did on Ext JS – Create Workspace and/or Classic or Modern or Universal App in 5 minutes

Check out Pinch Hitter Solutions at phs4j.com.  
Check out Scott's youtube channel at Motivated Code Pro.