Results 1 to 2 of 2

Thread: Build Profiles Using Sencha Architect

  1. #1
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    147
    Answers
    15

    Default Answered: Build Profiles Using Sencha Architect

    I understand it is easy to create multiple build profiles when using Sencha Cmd while developing a project. Simply create

    Code:
    "production": {
            "output": {
                "appCache": {
                    "enable": true,
                    "path": "cache.appcache"
                }
            },
            "loader": {
                "cache": "${build.timestamp}"
            },
            "cache": {
                "enable": true
            },
            "compressor": {
                "type": "yui"
            },
            "theme": "defaultBlue"
        },
    "builds": {
        "pps": {
            
            "theme": "theme-material"
        },
        "ppb": {
            "theme": "defaultBlue"
        }
    },
    Then make some other modifications to automate the build process and be sure all items are built as expected.

    Now when using Sencha Architect, modifying the app.json has risks of being overwritten at build time. So how does one create these multiple build profiles using Sencha Architect?
    Andy Allord
    Sencha MVP/Software Engineer

  2. Okay, here is what I revealed in just diving in to figure out if it works or does not work when dealing with Architect.

    I modified app.json to include

    Code:
    "builds": {
          "default": {
             "theme": "darkblue"
          },
          "pp360": {
             "theme": "theme-neptune"
          }
       },
    Some additional changes made to app.json include changes in "bootstrap" definition
    Code:
    "bootstrap": {
            "base": "${app.dir}",
    
            "manifest": "${build.id}.json",
    
            "microloader": "bootstrap.js",
            "css": "bootstrap.css"
        },
    Changes in "output" definition
    Code:
    "output": {
            "base": "${workspace.build.dir}/${build.environment}/${app.name}",
            "page": "index.html",
            "manifest": "${build.id}.json",
            "js": "${build.id}/app.js",
            "appCache": {
                "enable": false
            },
            "resources": {
                "path": "${build.id}/resources",
                "shared": "resources"
            }
        },
    Changes in "resources" definition
    Code:
    "resources": [
            {
                "path": "resources",
                "output": "shared"
            },
            {
                "path": "${toolkit.name}/resources"
            },
            {
                "path": "${build.id}/resources"
            }
        ],
    Changes in "cache" definition
    Code:
    "cache": {
            "enable": false,
            "deltas": "${build.id}/deltas"
        },
    Finally change the "archivePath" definition
    Code:
    "archivePath": "archive/${build.id}",
    Modify index.html (or your default index page) to include
    Code:
    var Ext = Ext || {};
                Ext.beforeLoad = function (tags) {
                    var theme = location.href.match(/profile=([\w-]+)/);
                    theme  = (theme && theme[1]) || 'default';
                    Ext.manifest = theme;
                };
    Run sencha app build [production] or [development] or [any other named build under "builds"]

    Finally go to your http(s)://url?profile=definedbuildprofile and feel free to switch between.

    Two things to point out. In my current development environment this was tested working on running build from inside Architect has never worked, ergo why I describe using Sencha Cmd to build the project. Second, changing profile will require a page reload as the profile theme files are processed during initial page load.

    Finally at this point I've not seen Architect change my app.json at any time through this test and moving towards implementation.

  3. #2
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    147
    Answers
    15

    Default Working Through Solution

    Okay, here is what I revealed in just diving in to figure out if it works or does not work when dealing with Architect.

    I modified app.json to include

    Code:
    "builds": {
          "default": {
             "theme": "darkblue"
          },
          "pp360": {
             "theme": "theme-neptune"
          }
       },
    Some additional changes made to app.json include changes in "bootstrap" definition
    Code:
    "bootstrap": {
            "base": "${app.dir}",
    
            "manifest": "${build.id}.json",
    
            "microloader": "bootstrap.js",
            "css": "bootstrap.css"
        },
    Changes in "output" definition
    Code:
    "output": {
            "base": "${workspace.build.dir}/${build.environment}/${app.name}",
            "page": "index.html",
            "manifest": "${build.id}.json",
            "js": "${build.id}/app.js",
            "appCache": {
                "enable": false
            },
            "resources": {
                "path": "${build.id}/resources",
                "shared": "resources"
            }
        },
    Changes in "resources" definition
    Code:
    "resources": [
            {
                "path": "resources",
                "output": "shared"
            },
            {
                "path": "${toolkit.name}/resources"
            },
            {
                "path": "${build.id}/resources"
            }
        ],
    Changes in "cache" definition
    Code:
    "cache": {
            "enable": false,
            "deltas": "${build.id}/deltas"
        },
    Finally change the "archivePath" definition
    Code:
    "archivePath": "archive/${build.id}",
    Modify index.html (or your default index page) to include
    Code:
    var Ext = Ext || {};
                Ext.beforeLoad = function (tags) {
                    var theme = location.href.match(/profile=([\w-]+)/);
                    theme  = (theme && theme[1]) || 'default';
                    Ext.manifest = theme;
                };
    Run sencha app build [production] or [development] or [any other named build under "builds"]

    Finally go to your http(s)://url?profile=definedbuildprofile and feel free to switch between.

    Two things to point out. In my current development environment this was tested working on running build from inside Architect has never worked, ergo why I describe using Sencha Cmd to build the project. Second, changing profile will require a page reload as the profile theme files are processed during initial page load.

    Finally at this point I've not seen Architect change my app.json at any time through this test and moving towards implementation.
    Andy Allord
    Sencha MVP/Software Engineer

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •