Sencha 6 EXT JS Build using CMD - wrong paths

Question

Sencha 6.2 CMD Sencha EXT JS GPL 6+ My web structure [server side]

-/public_html/affiliates --/app/sprinkles/tracker/assets/sencha [workspace folder - containing ext in /ext] --/app/sprinkles/tracker/assets/sencha/affiliates - contains sencha app

From Web Side [browser] App is called when at http://localhost/affiliates Path to app is http://localhost/assets-raw/tracker/assets/sencha/affiliates

Note: http://localhost/assets-raw/tracker/assets/sencha/affiliates/index.html Works no issue!

When i goto http://localhost/affiliates I'm getting 404 errors for ext/classic (maybe 50ish js can't load) Also app/application.js can't load

I need to be able to add ../assets-raw/tracker/assets/sencha/affiliates to just the production build path.

However I'm finding that distinquishing paths webside to build path side is difficult. Cannot find the sencha doc that would discuss this (i've gone thru the docs alot)

Here is my app.json config https://gist.github.com/bobby5892/bf607a37c79a62820cf7fcaa245553c4

workspace.json config https://gist.github.com/bobby5892/689c54272ba49d63cb35b96f6a24266d

How i initialize extjs on the page

  <script type="text/javascript">
        var Ext = Ext || {}; // Ext namespace won't be defined yet...

        // This function is called by the Microloader after it has performed basic
        // device detection. The results are provided in the "tags" object. You can
        // use these tags here or even add custom tags. These can be used by platform
        // filters in your manifest or by platformConfig expressions in your app.
        //
      Ext.manifest = '../assets-raw/tracker/assets/sencha/affiliates/classic';

    </script>

    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" data-app="48a1b848-93ab-47fe-ba5a-a54e94f92ae5" type="text/javascript" src="/assets-raw/tracker/assets/sencha/affiliates/bootstrap.js"></script>

How do i edit that path?

Here is the relevant part from app.json (included in that gist)

   "production": {
        "frameworks": {        
                "ext": {
                    "path":"../assets-raw/tracker/assets/sencha/ext",
                    "version":"6.2.0.981"
                }
            },
         "output": 
        {
                "base": "${workspace.build.dir}/${build.environment}/${app.name}",
                "page": "../assets-raw/tracker/assets/sencha/affiliates/index.html",
                "manifest": "../assets-raw/tracker/assets/sencha/affiliates/${build.id}.json",
                "js": "../assets-raw/tracker/assets/sencha/affiliates/${build.id}/app.js",
                "appCache": {
                    "enable": false
                },
                "resources": {
                    "path": "${build.id}/resources",
                    "shared": "resources"
                }
        },
        "loader": {
            "cache": "${build.timestamp}"
        },
        "cache": {
            "enable": false
        },
        "compressor": {
            "type": "yui"
        },
        "manifest": {
           "embed": true
        }

also i'm doing the build via sencha cmd

sencha app refresh
sencha app build

Thanks in advance, have put alot of time into trying to figure this out!

Edit: Adding image to show the paths that are vs the paths I need.

Paths

Edit: Have found that when sencha CMD is generating the build, the generated paths in classic.json are wrong. The documentation says changing the output parameter in app.json for "page" might work. I have that in the the "production" segment of the build. Still not working. :(

Answer 1

Results in discussion on sencha forum yielded success. https://www.sencha.com/forum/showthread.php?469231-Sencha-6-EXT-JS-Build-using-CMD-wrong-paths

Solved by changing the paths in the Ext.Manifest object after retrieved from ajax call but prior to them being processed by ExtJS.

  <script type="text/javascript">
    ExtAbsoluteBasePath = "/assets-raw/tracker/assets/sencha/build/production/affiliates/";
    var Ext = Ext || {}; // Ext namespace won't be defined yet...

    // This function is called by the Microloader after it has performed basic
    // device detection. The results are provided in the "tags" object. You can
    // use these tags here or even add custom tags. These can be used by platform
    // filters in your manifest or by platformConfig expressions in your app.
    //
    Ext.beforeLoad = function (tags) {
        var s = location.search,  // the query string (ex "?foo=1&bar")
            profile;

        // For testing look for "?classic" or "?modern" in the URL to override
        // device detection default.
        //
        if (s.match(/\bclassic\b/)) {
            profile = 'classic';
        }
        else if (s.match(/\bmodern\b/)) {
            profile = 'modern';
        }
        else {
            profile = tags.desktop ? 'classic' : 'modern';
            //profile = tags.phone ? 'modern' : 'classic';
        }

        Ext.manifest = ExtAbsoluteBasePath + profile; // this name must match a build profile name

        // This function is called once the manifest is available but before
        // any data is pulled from it.
        //
        return function (manifest) {
            // peek at / modify the manifest object

            console.log(manifest);
            // Update JS Paths
            var i=0;
            manifest.js.forEach(function(jsPath) {
                console.log("\n Updating JS Path - " + jsPath.assetConfig.path + " to " + ExtAbsoluteBasePath + jsPath.assetConfig.path);
                manifest.js[i].assetConfig.path = ExtAbsoluteBasePath + jsPath.assetConfig.path;
                i++;
            });

            // Update CSS Paths
            i=0;
            manifest.css.forEach(function(cssPath) {
                console.log("\n Updating CSS Path - " + cssPath.assetConfig.path + " to " + ExtAbsoluteBasePath + cssPath.assetConfig.path);
                manifest.css[i].assetConfig.path = ExtAbsoluteBasePath + cssPath.assetConfig.path;
                i++;
            });


            //manifest.js["0"].assetConfig.path = ExtAbsoluteBasePath + manifest.js["0"].assetConfig.path;
            console.log("\n JS Path - " + manifest.js["0"].assetConfig.path);
        };
    };
</script>