Make a build for multiple customers on a single application

[gmisslin]

Hello everyone,

I have a single application running with Sencha CMD 5.1.2.52 and Extjs 5.1.0.
Let's say that there will be 2 customers who will use my application. I would like to know if there is a way to make a build for each customer. And these builds will run a different view on the launch of my application.

I already know that we can add a builds setting in the app.json like so :

"builds": {        "customer1": {
            "theme": "ext-theme-classic"
        },
        "customer2": {
            "theme": "ext-theme-classic"
        }
},

But aside from the "theme" option, i don't know what i could also write...

And if these builds can only concatenate their own controllers/models/stores/views, that would be great.

Any ideas ?

[israelroldan]

You can configure anything you'd configure on app.json inside a build profile, you can also add your own properties and read them programmatically with Ext.manifest.yourProperty.

For example:

    "builds": {
        "firstCustomer": {
            "mainViewName": "Foo.view.main.Foo"
        },
        "secondCustomer": {
            "mainViewName": "Foo.view.main.Bar"
        }
    },

This will allow you to read that value like this:

// Do note that in this case the "mainViewName" is an arbitrary name
// you can choose the one that suits you best, this is not something the framework is aware of
Ext.create(Ext.manifest.mainViewName);

And of course, build using the build profile name:

> sencha app build firstCustomer
> sencha app build secondCustomer

[israelroldan]

As a follow up, it seems that my previous suggestion is only working when on development mode.

To get this working on production I used a different approach, inspired on Ext JS 6.x's toolkit concept.

You can download a working app from here: https://dl.dropboxusercontent.com/u/30389009/Sample.zip (just run "sencha app watch first" or "sencha app watch second" to get all the bits ready).

The approach consisted on modifying app.json like this:

    // Modify the classpath, from ${app.dir}/app to this value
    "classpath": "${app.dir}/app,${app.dir}/${app.customerDir}/src",
    // Modify the "output" object to account for that customerDir
    "output": {
       "base": "${workspace.build.dir}/${build.environment}/${app.name}/${app.customerDir}"
    },
    // Add two build profiles with a property that represents the name of a directory in your app's root
    "builds": {
        "firstCustomer": {
            "customerDir": "first"
        },
        "secondCustomer": {
            "customerDir": "second"
        }
    },

In your app's root, create the "first" and "second" directories, that will contain customer-specific code inside their "src" directory.
Place a class inside each directory (it must have the same name for both customers, for example: MyApp.view.main.Foo).
Build with "sencha app build firstCustomer" and "sencha app build secondCustomer" and you'll see "firstCustomer" and "secondCustomer" as directories in your build dir, it they contain the customer-specific build output.

On the sample application, you see a message in the console that tells you which build it is (based on a console.log on the customer-specific class).