Migrate Existing Ext JS + Sencha Cmd applications to Open Tooling and npm Packages

Starting in ExtGen 7.0.0, our open tooling platform is capabale of migrating Ext JS application that were built with Sencha Cmd to use ExtGen, Sencha’s open tooling solution using npm packages, webpack, and other modern, open source tools. This guide provides the steps necessary to migrate a Sencha Cmd application to an open tooling (ExtGen + npm packages).

Requirements

Ext JS applications with open tooling require the following:

Node 8+
npm 4+
Webpack 2+
Java 8

ExtGen’s Migration Tool

Follow these steps to migrate your application from Sencha Cmd to open tooling (ExtGen):

*Note: you must be signed into the Sencha npm registry to access the Ext JS packages. See Getting Started Guide

This doc assumes you created your Ext JS application with Sencha Cmd

Install ExtGen. Use the following command to install Sencha ExtGen on your machine:
```
npm install -g @sencha/ext-gen
```
The ext-gen migrate command converts existing Sencha Cmd applications to ExtGen applications. Run the command in the root of your application folder:
```
ext-gen migrate
```

ext-gen migrate will create and modify certain files to update the existing app to use npm packaging. Including in these files are a package.json and a webpack configuration file for Sencha’s custom webpack plugin. Also created for you is an index.js file that will be placed at the root of your project.

A backup folder is created to keep backup of original files.

Install npm Packages

Install the required packages that are now defined in package.json by using following command in the application folder

npm install

**Specify Build Profile in included scripts

When you created your Sencha Cmd application, your application’s app.json configuration file was created and contains build profiles.

To make the most of Open Tools and the included npm scripts, ExtGen’s webpack plugin needs to know which build profile you would like it to use.

Configure the two scripts (dev and build) defined in the newly created package.json at the root of your project by adding the build profile you wish to use to the the environment variables passed into the webpack plugin via the script:

"dev": "webpack-dev-server --env.profile=<YOUR_PROFILE_HERE e.g. 'classic', 'phone', 'desktop'> --env.browser=yes --env.verbose=no

Here is an example configuration for a desktop profile:

"dev": "webpack-dev-server --env.profile=desktop --env.browser=yes --env.verbose=no

If you choose to use OpenTools without specifying a build profile the same profile(s) that Sencha Cmd will use by default will ALSO be used by the webpack plugin

Run the app

Run the application using following command in the application folder

npm start

To use the provided sample scripts use the following commands:

npm run-script dev
npm run-script build