Multipage App - EXT JS 6 - Package (404)

Question

I have a multi page application that I have migrated from EXT JS 6 (single page application) to a work space (ext JS 6).

I have split out some of the common parts, such as my applications header and a few custom input components. These I have put into a package (since they are being accessed by multiple 'applications' in my work space.

My problem is that I have one page (work space app) that is running fine, finding all the files that it needs and carrying on just fine.

The other page (same work space, separate app) is not working, it's getting 404's looking for files (404-ing because it's looking in the wrong directory)

APP.JSON I've been through the app.json file and told it exactly what packages to use. It's identical in both applications.

Class Path I have not touched the ClassPath for either application. So they are still identical to eachother.

App 1 (page1) Looks for a file in my package by going to:

http://localhost/packages/local/page/src/store/file.js

App 2 (page2) Looks for the same file by going to:

http://localhost/App2/store/file.js

I've run sencha cmd and have not had any errors

sencha app refresh
sencha app build

Everything that I can think of that should make a difference here has been checked and rechecked;

So question time: - Why/how does Sencha Cmd test that a file exists in a specific location? - Why would it be getting it wrong in this case? - What configuration options and gotcha's could I be missing?

EDIT :

I have just found and run the following:

C:\Development\workspaces\e\e\app1>sencha app explain "testapp.store.Locale"
Sencha Cmd v6.2.0.46
[INF] Loading app json manifest...
[INF] Loading classes...
[INF] Gathering dependencies...
"edited"\sencha-compiler\app\full-page-master-bundle.js
    (@require file.js)
      --> e\app1\app.js
            e\app1\app.js:6 (Ext.require)
              (config)
                --> packages\local\page\src\store\Locale.js





C:\Development\workspaces\e\e\app2>sencha app explain "testapp.store.Locale"
    Sencha Cmd v6.2.0.46
    [INF] Loading app json manifest...
    [INF] Loading classes...
    [INF] Gathering dependencies...
        "edited"\sencha-compiler\app\full-page-master-bundle.js
        (@require file.js)
        --> e\app2\app.js
            e\app2\app.js:6 (Ext.require)
            (config)
            --> packages\local\page\src\store\Locale.js

which looks like it's telling me App2 has the correct path in configuration... (Feels like I've found a bug)

What is the package name and what are the app names of App1 and App2? — Alexander
The package name is 'page' and Both apps are called 'testapp' (yes that's probably bad practice, but I needed to do it that way for simplicity sake while I finish migrating the app from a single app to the workspace setup. — TolMera
Oh yea, the package is namespaced as page, but the declarations inside are all testapp as well... I realise this must really be confusing things, but was not an option for me to fix as this corsses 6000+ files that make up the broader app. — TolMera
Yes, it's a bit more than a simple search and replace operation, it should take about half an hour. Let me see whether I find how to do it, it's in my internal documentation somewhere. — Alexander
Oh I can do a simple "grep ... xargs sed -i ..." to search and replace everything as appropriate, but (and I've already done it once and ran into issues) then I have to deal with files that have not been put in the correct places being adjusted to the 'group' for their appropriate (app1, app2, app3) location. Then something searching for the something thats moved... it's a headache. Hopefully if I can get everything into the right place, then do this as a lastish step, I'm hoping it will save me a lot of headache — TolMera

Robert Watkins Robert Watkins · Accepted Answer · 2016-10-12T21:14:53

Sounds like you're hitting problems with the Ext.Loader configuration. From the comments, it seems you are using the same root namespace in both the package and the test app. The problem is that the Ext.Loader will map the namespace to the file location. Get the wrong mapping, and you get to look in the wrong place.

The simplest answer is to ensure that the package and the app have something different about the namespace. That can mean changing the prefix (e.g. MyPackage vs MyApp), or having a multi-level namespace (MyStuff.package vs MyStuff.app). The latter is how ExtJS itself is organised.

One place to look at is the generated classic.json for the app. This file is used by the bootstrap process, and it has a list of all the classes it has found, and where that class lives, relative to the application. (I suggest doing some pretty-printing formatting of it first, as it's all a single line). Check to see if it's got the class name you're looking for in it, and what the path is.

...
"classes": {
    ...
    "Ext.Ajax": {
        "alias": [],
        "alternates": [],
        "idx": 43
    },
    ...
},
...
"loadOrder": {
    ....
    {
        "idx": 43,
        "path": "../ext-6.2.0/packages/core/src/Ajax.js",
        "requires": [
            42
        ],
        "uses": []
    },
    ....
},
...
"paths": {
    "Ext": "../ext-6.2.0/classic/classic/src",
    ....
    "Ext.Ajax": "../ext-6.2.0/packages/core/src/Ajax.js",
    ...
},
...

The paths section is the crucial part. In the above, see how there's one for the namespace (Ext) and another for the file (Ext.Ajax). If the application code wants to load a reference to a class not in the paths section, it finds the longest match on the class namespace and looks in that directory.

Multipage App - EXT JS 6 - Package (404)

1 Answers