Feeling stupid

[steve.brownlee]

I was encouraged by Arthur Kay to start a thread here after I posted some frustration on Twitter, so here we go.

First off, the instructions for setting up the Packager were great and I had it installed and ready for usage in a couple minutes.

Second, I specifically scoured the documentation to see if there were any special instructions for getting an ExtJS 4.1 project that I'm building with Sencha Command to get packaged. I didn't find anything so I assumed that following the basic instructions would work.

That's what I did.

I created a projectConfig.json file in the root folder of my project. The source for the UI is contained in a www sub-folder. I then use Sencha Command to build that project into a sub-sub-folder of www/build/crescendo/testing.

So here's my config file.

{
       "applicationName": "Synthesys Explorer",
       "applicationIconPaths": [],
       "versionString": "1.0",
       "outputPath": "packaged",
       "webAppPath": "/Users/stevebrownlee/DRProjects/synex-demo/www/build/crescendo/testing",
       "settings": {
           "mainWindow": {
               "autoShow": true
           },
           "remoteDebuggingPort": 9100,
           "security": {
                "allowFileSystemAccess": true
            }
       }
   }

So I then ran ionpackage crescendoConfig.json and it ran fine. Inserting output here for sake of completeness.

 -- License is valid
Packing from configuration file crescendoConfig.json...
Output path already exists. Overwrite (Y/N)? y 
Output path will be overwritten.
Searching for files. Please wait...
Total of 2315 files to be packaged.
Target package file /Users/stevebrownlee/DRProjects/synex-demo/packaged/app.ion
Package created at /Users/stevebrownlee/DRProjects/synex-demo/packaged
Package /Users/stevebrownlee/DRProjects/synex-demo/packaged/app.ion (28250844 bytes) is verified. Everything looks good.
Encrypting package with basic encryption...
Package encrypted successfully.
Extracting run-time to /Users/stevebrownlee/DRProjects/synex-demo/packaged
Run-time is extracted.


---------------------------------------------------
NOTE: You are currently evaluating Sencha Desktop Packager 1.1.
Your evaluation period will end in 29 days.




Applications packaged using this evaluation edition will function
for 14 days from the date it was packaged.


Visit http://www.sencha.com/contact for more information.

Awesome so far.

However, when I launch the packaged application, I get a blank screen and when I open up Chrome inspector and point it to the debug port, the HTML is there, with links to all my resources and script tags for my scripts, but, alas still a blank screen.

So my assumption that I could simply run Sencha Command to build my project, and then immediately run Desktop Packager against that build directory was a false assumption.

The thing is, I can't glean anything from the documentation that comes with the packager about what I'm doing wrong.

[mitchellsimoens]

Can't say anything about your app but I can talk about how to get the default generated app packaged.

I'm using Ext JS 4.1.3 but this will work for any version (minus Ext JS 4.2.0.265 due to an RTL error when in a production build) with Sencha Cmd 3.0.2.88.

First I generated an app:

cd /path/to/extjs-4.1.3
sencha generate app DesktopPackager /path/to/DesktopPackager

I then did an app build:

cd /path/to/DesktopPackager
sencha app build

I tested the build just to make sure it works in the browser and it does, great! Time to get it packaged with the Sencha Desktop Packager.

First I need to create the JSON file for the configuration. I created a desktoppackager.json file in the root directory of the app (/path/to/DesktopPackager/desktoppackager.json) and used this config:

{
    "applicationName"      : "Desktop Packager",
    "applicationIconPaths" : ["HelloWorld.ico", "HelloWorld.icns"],
    "versionString"        : "1.0",
    "outputPath"           : "build/DesktopPackager/package/",
    "webAppPath"           : "build/DesktopPackager/production/",
    "settings"             : {
        "mainWindow" : {
            "autoShow" : true
        }
    }
}

That was basically a copy from the getting started guide in the Sencha Desktop Packager API docs. I changed the applicationName to be Desktop Packager, the outputPath I put in the build/DesktopPackager/package/ dir to be like Cmd builds and the webAppPath I pointed to the production build from Cmd.

So now we are setup and just need to do the actual packaging which is as simple as:

ionpackage desktoppackager.json

I then had a Desktop Packager app in the /path/to/DesktopPackager/build/DesktopPackager/package/ directory. Launched it and I see the app just like when I tested the production build in the browser.

So the default app will work but there must be something extra in your app causing something to happen. Usually a blank screen means there was a JavaScript error and something wasn't loaded due to not being required.

[jarrednicholls]

Hi Steve,

Do you have an index.html file in the root of your webAppPath? The Desktop Packager's entry point is index.html in the root of the packaged application.

For sanity's sake, can you add a trailing "/" to your webAppPath value, so it reads "webAppPath": "/Users/stevebrownlee/DRProjects/synex-demo/www/build/crescendo/testing/", just to see if that is an issue? We had a bug regarding trailing slashes and our file indexing logic, but it was most certainly "fixed" before our release...just want to make sure it isn't rearing its ugly head.

Thanks, and sorry you are having trouble out-of-the-gate! We'll get you squared away.

[steve.brownlee]

Yes, there is an index.html file in the web app path.

Luckily, I did make progress, but not there yet. I discovered that since I'm using the Less CSS processor library in my app, the packager was choking on that because I hadn't specified "allowCrossSite": true in the config file.

So, the application now renders, but Less doesn't work properly. I see the following error after the application renders, and, of course, the styles aren't being used.

Uncaught Error: Couldn't load ionp:///css/crescendo.less (0)

I'm also using a third-party link graph tool (KeyLines) and when it attempt to draw to the screen, this additional error is thrown.

Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1

Which is completely useless to anyone, I know, because it doesn't isolate what went wrong, and the code is licensed and obfuscated so I can't debug it. Bummer.

As for the trailing slash, that actually busted the application entirely. The packager created the application, but then almost nothing was in the resulting DOM. Just an HTML, HEAD, and BODY tag, and that was it.

[jarrednicholls]

Thanks for the info Steve. Is there any way you can ship your app (contents of webAppPath) to me, jarred [at] sencha.com? It would be the easiest way for me to debug the issues you are running into. If not, perhaps we can work together on establishing a small reproducible test case that gets you past the .less load issue (XHR?)

[steve.brownlee]

Yes, Less is loaded with XHR as it reads, and then parses, a .less file and then uses the resulting CSS to style the page.

I'll tar up what I can (which should be most everything) and send it to you tonight.

I very much appreciate the offer to help.

[jarrednicholls]

Hi Steve,

Just checking in again. My offer still stands!