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
This is a brief state-of-the moment look at npm for Ext JS. I’m excited to see what comes next and I will continue to provide updates as things move along.
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.
This tutorial has been tested with:
Ext JS 6.5.3 Commercial
Ext JS 6.2.0 GPL – If you are using the GPL version, replace ext-6.5.3.57 with ext-6.2.0 below.
1 – Downloads
Download the current version of Sencha Cmd:
Download Sencha Cmd
Choose DOWNLOAD with JRE INCLUDED (unless you have a good reason not to)
Windows version works the same way, though 64bit provides only the JRE INCLUDED version.
If you don’t have a commercially licensed version of ExtJS, download the GPL version from here: Download GPL Version of Ext JS then check your email for the ExtJS Download Link.
If you do have a commercial license and haven’t downloaded it yet, you can download the most recent sdk from here: Download Commercial Version of Ext JS
Be mindful that ExtJS versions change frequently so replace the versions mentioned above and below with the current versions available when you are using these instructions.
Unzip the ExtJS sdk (ext-6.5.3.zip) to a convenient location (remember this location, you will need it later) – Sencha does not include a formalized installation process, you just just need to unzip the sdk to the desired location.
I unzipped mine to ~/motivatedcodepro – You can unzip yours to wherever it’s convenient for you.
Assuming you are using ~/motivatedcodepro as your unzip location you will end up with this:
~/motivatedcodepro/ext-6.5.3.57
You DO NOT need to create folder ext-6.5.3.57 on your own, unzipping ext-6.5.3.zip will take care of that for you.
2 – Now that the sdk is installed, lets create a Sencha workspace:
Skip this step if you don’t want or need to use a workspace.
sencha -sdk ~/motivatedcodepro/ext-6.5.3.57/ generate workspace ~/motivatedcodepro/starterworkspace
We are telling sencha cmd that the sdk is located at ~/motivatedcodepro/ext-6.5.3.57/
And to generate the workspace at ~/motivatedcodepro/starterworkspace (starterworkspace folder will be created automatically)
Once completed, the runtime framework will be installed in starterworkspace. This allows your projects to share the sdk and other assets.
cd ~/motivatedcodepro/starterworkspace
3 – Next, lets generate some starter apps.
Note that all of the sencha generate app commands shown below will create a “starter app” for you to experiment with. You can runt this starter app from the browser at the end of these steps.
Create an ExtJS classic app in a workspace:
sencha generate app --ext classic classicapp classicappflr
We are telling sencha cmd to create an ExtJS classic app called classicapp in folder classicappflr within the ~/motivatedcodepro/starterworkspace folder.
Create an ExtJS classic app without a workspace:
sencha -sdk ~/motivatedcodepro/ext-6.5.3.57/ generate app –ext classic classicapp /your/chosen/folder/classicappflr
We are telling sencha cmd where the sdk is located and to create an ExtJS classic app called classicapp in folder /your/chosen/folder/classicappflr
Create an ExtJS modern app in a workspace:
sencha generate app --ext modern modernapp modernappflr
We are telling sencha cmd to create an ExtJS modern app called modernapp in folder modernappflr.
Create an ExtJS modern app without a workspace:
sencha -sdk ~/motivatedcodepro/ext-6.5.3.57/ generate app --ext modern modernapp /your/chosen/folder/modernappflr
We are telling sencha cmd where the sdk is located and to create an ExtJS modern app called modernapp in folder /your/chosen/folder/modernappflr.
Create an ExtJS universal app in a workspace:
sencha generate app --ext universalapp universalappflr
We are telling sencha cmd to create an ExtJS universal app called universalapp in folder universalappflr.
Create an ExtJS universal app without a workspace:
sencha -sdk ~/motivatedcodepro/ext-6.5.3.57/ generate app --ext universalapp /your/chosen/folder/universalappflr
We are telling sencha cmd where the sdk is located and to create an ExtJS universal app called universalapp in folder /your/chosen/folder/universalappflr.
4 – Now let’s test our installation:
To test any or all of these apps, cd into the appropriate folder and execute sencha app watch:
cd ~/motivatedcodepro/starterworkspace/modernappflr (or /your/chosen/folder/ if you're not using a workspace)
sencha app watch
This will start the sencha cmd webserver and watch utility (a whole other subject) and will allow you to test your newly created apps.
Note that the server is running on port 1841
Point your browser to:
http://localhost:1841/modernappflr
**Note that for non-workspace apps, you do not need to include the app folder in the url (modernappflr in this case). The app folder is only needed when running in a workspace so sencha app watch will know which app to load from the workspace.
All done! Here you should see the following:
