Rally-app-builder displays nothing in browser for "Story Board" app

I have been attempting to learn how to build a Rally app using the rally-app-builder. I began wiith the Your first Rally app tutorial at https://help.rallydev.com/apps/2.0rc3/doc/#!/guide/first_app, after following the instructions for installing Node.js, and the rally-app-builder, I got to the step where we are supposed to add a rallycombobox to our app. However, when I run the App-debug.html file, my screen is blank. I have attempted to add other objects rather than a combobox and still nothing appears on the screen in the browser. I noticed that one other person had asked this question several months ago, but there is no answer posted as to why this might happen. I attempted to view the App-debug.html file in several browsers as well. None of them displayed the expected output.

Here is the code for the app.js file.

Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    launch: function () {
        this.iterationCombobox = this.add({
            xtype: 'rallyiterationcombobox',
            listeners: {
                ready: this._onIterationComboboxLoad,
                scope: this
            }
        });
    },
});

Solution

If I use the exact code you posted I get this error in the console of Chrome's DevTools:

Uncaught TypeError: Cannot read property 'fn' of undefined

The reason for it is that in this code _onIterationComboboxLoad is called but never defined. Try an alternative browser and check javascript console for errors.

To fix the error you may add this method after launch :

_onIterationComboboxLoad:function(){
//can be empty for now
}

As far as general steps to use rally app builder, try this:

Assuming rally app builder is installed, a command rab --version should return a version, e.g. 0.9.2

In the terminal, cd to a directory that you created for a Story Board app. Run this command:

rab init "Story Board" 2.0rc3

You should see this output:

Creating a new App named Story Board
Creating App-debug.html
Creating App.html
Creating App-uncompressed.html
Success

Look at the code that the rally-app-builder (rab) generated:

Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',
    items:{ html:'<a href="https://help.rallydev.com/apps/2.0rc3/doc/">App SDK 2.0rc3 Docs</a>'},
    launch: function() {
        //Write app code here
    }
})

Open App-debug.html in a browser. There should be a link to AppSDK2rc3 documentation on top of an otherwise empty page. This link indicates that the app is working.

Assuming it works, you may delete the content of App.js file generated by rab and replace it with the entire code example from the Building Your First App guide here. Copy the entire code of App.js under "The finished app should look like this" and test it in the browser to make sure it works. After that you may delete the content of App.js file once again and go back to the guide and follow it step by step, knowing what to expect.

If at any point you get an empty page, check the console in Dev Tools of your browser and also try alternative browsers. If you are not currently logged in to Rally in another tab of the same browser you will be prompted to login when loading App-debug.html.