#Introduction

In this lab, you'll generate a starter app and run it.

#Steps

??Use the command-line to generate the app

Using a terminal window, navigate to the root of your Neo workspace.

If you use a code editor, just open the workspace, and open a terminal
window in the editor. If you ever forget the command-line options, 
just open `package.json` to see the list of scripts.

From the workspace, run this command.

    npm run create-app

Name the app _Starter_ and choose the default response for everything.

<img src="https://s3.amazonaws.com/mjs.neo.learning.images/intro/NpmRunCreateApp.png"/>

<pre>
</pre>

??Inspect the application

Open `apps/starter/view/MainContainer.mjs` and inspect the code.

??Run the app
 
 The command to start the server is `npm run server-start`. This starts a server
 on port 8080 and launches a browser window at the root of the workspace. 

 Click on the `apps` directory, then the `starter` directory, and you'll see the
 running app.

??Change the code and see the result

You can change the code any way you dare, but as a suggestion:
- Remove the `style`, `height`, and `width` configs for the tab container. 
- Then add `style: { padding: '20px' },` to the main container. 

You need to refresh the browser to see the result of code changes.

<pre style="font-size: 80%; color:#cacaca;">
import Component from '../../../node_modules/neo.mjs/src/component/Base.mjs';
import TabContainer from '../../../node_modules/neo.mjs/src/tab/Container.mjs';
import Viewport from '../../../node_modules/neo.mjs/src/container/Viewport.mjs';

/**
 * @class june-starter.view.MainContainer
 * @extends Neo.container.Viewport
 */
class MainContainer extends Viewport {
    static config = {
        /**
         * @member {String} className='june-starter.view.MainContainer'
         * @protected
         */
        className: 'june-starter.view.MainContainer',
        /**
         * @member {Boolean} autoMount=true
         */
        autoMount: true,
        <span style="color:red;">style: { padding: '20px' },</span>
        /**
         * @member {Object[]} items
         */
        items: [{
            module: TabContainer,
            <s style="color:red;">height: 300,</s>
            <s style="color:red;">width : 500,</s>
            <s style="color:red;">style : {flex: 'none', margin: '20px'},</s>

            itemDefaults: {
                module: Component,
                cls   : ['neo-examples-tab-component'],
                style : {padding: '20px'},
            },

            items: [{
                header: {
                    iconCls: 'fa fa-home',
                    text: 'Tab 1'
                },
                vdom: {
                    html: 'Welcome to your new Neo App.'
                }
            }, {
                header: {
                    iconCls: 'fa fa-play-circle',
                    text: 'Tab 2'
                },
                vdom: {
                    html: 'Have fun creating something awesome!'
                }
            }]
        }],
        /*
         * @member {Object} layout={ntype:'fit'}
         */
        layout: {
            ntype: 'fit'
        }
    }
}

Neo.setupClass(MainContainer);

export default MainContainer;
</pre>
