spyne-cli 0.4.1 → 0.5.5

package/README.md

@@ -1,3 +1,105 @@
-## spyne-cli
-### Spyne Command Line Tool
-Generates spyne objects and saves them to standard spyne application directories.
+# Spyne CLI
+
+`spyne-cli` is a command-line utility designed to streamline the process of generating and managing applications built using the [SpyneJS](https://github.com/spynejs/spynejs) framework. It simplifies the creation of `ViewStream`, `Channel`, and `SpyneTrait` classes, making it easier to build scalable and modular single-page applications.
+
+## Features
+
+- Create a new SpyneJS application with a single command.
+- Generate `ViewStream`, `Channel`, and `SpyneTrait` classes based on user prompts.
+- Easily extend and customize applications.
+- Built-in support for channel-driven development.
+
+## Installation
+
+To install the `spyne-cli`, you need to have Node.js and npm installed on your system.
+
+1. Install the package globally:
+
+   ```bash
+   npm install -g @spynejs/spyne-cli
+   ```
+
+
+## Usage
+
+### Creating a New SpyneJS Application
+
+To create a new SpyneJS application, run:
+
+```bash
+npx spyne-cli create-app <app-name>
+```
+
+This will generate the necessary project files in the specified `<app-name>` directory.
+
+### Generating Components
+
+You can use `spyne-cli` to generate new `ViewStream`, `Channel`, and `SpyneTrait` components:
+
+- **ViewStream**: To generate a new `ViewStream`, use:
+
+  ```bash
+  npx spyne-cli generate viewstream <view-name>
+  ```
+
+- **Channel**: To generate a new `Channel`, use:
+
+  ```bash
+  npx spyne-cli generate channel <channel-name>
+  ```
+
+- **SpyneTrait**: To generate a new `SpyneTrait`, use:
+
+  ```bash
+  npx spyne-cli generate spynetrait <trait-name>
+  ```
+
+### Example
+
+To create a new application and add a `ViewStream` component:
+
+1. Create a new application:
+
+   ```bash
+   npx spyne-cli create-app my-spyne-app
+   ```
+
+2. Navigate to the application directory:
+
+   ```bash
+   cd my-spyne-app
+   ```
+
+3. Generate a `ViewStream` component:
+
+   ```bash
+   npx spyne-cli generate viewstream MyView
+   ```
+
+## Configuration
+
+The `spyne-cli` supports customization via the `spyne.config.js` file located in your project’s root directory. You can modify the config file to control the file structure, template generation, and more.
+
+### Example `spyne.config.js`
+
+```javascript
+module.exports = {
+  templates: {
+    viewstream: './templates/viewstream.hbs',
+    channel: './templates/channel.hbs',
+    spynetrait: './templates/spynetrait.hbs',
+  },
+  outputDir: './src/components',
+};
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request or open an Issue on the [GitHub repository](https://github.com/spynejs/spyne-cli).
+
+## License
+
+This project is licensed under the MIT License.
+```
+
+You can now paste this content directly into your `README.md` file. Let me know if you need further assistance!

package/index.js

@@ -2,11 +2,16 @@
 import  {SpyneCliUI} from './src/ui.js';
 import clear from 'clear';
 import SpyneAppCreator from './src/spyne-app-creator.js';
+import SpyneAppCreate from './src/spyne-app-create.js';
 import SpyneFilePrompt from './src/spyne-file-prompt.js';
 const args = process.argv;
 
 
-let spyneAppCreator = new SpyneAppCreator(args);
+//let spyneAppCreator = new SpyneAppCreator(args);
+//const {createAppBool} = spyneAppCreator;
+
+
+let spyneAppCreator = new SpyneAppCreate(process.argv.slice(2));
 const {createAppBool} = spyneAppCreator;
 
 const startPromptFn = async()=>{
@@ -17,7 +22,8 @@ const startPromptFn = async()=>{
 }
 
 if (createAppBool){
-  spyneAppCreator.generateResponse();
+  //spyneAppCreator.generateResponse();
+  spyneAppCreator.createApp();
 } else {
   startPromptFn();
 }

package/package.json

@@ -4,7 +4,7 @@
     "spyne-cli": "index.js"
   },
   "type": "module",
-  "version": "0.4.1",
+  "version": "0.5.5",
   "description": "Generates spyne objects and saves them to standard spyne.",
   "main": "index.js",
   "scripts": {
@@ -23,23 +23,26 @@
   },
   "homepage": "https://github.com/spynejs/spyne-cli#readme",
   "dependencies": {
-    "ansi-colors": "^4.1.1",
-    "boxen": "^6.2.1",
-    "chalk": "^5.0.0",
-    "change-case": "^4.1.2",
+    "ansi-colors": "^4.1.3",
+    "boxen": "^8.0.1",
+    "chalk": "^5.3.0",
+    "change-case": "^5.4.4",
     "clear": "^0.1.0",
-    "enquirer": "^2.3.6",
-    "figlet": "^1.5.2",
+    "enquirer": "^2.4.1",
+    "figlet": "^1.7.0",
+    "fs-extra": "^11.2.0",
     "json-stringify-safe": "^5.0.1",
-    "pkg-dir": "^6.0.1",
-    "pkg-up": "^4.0.0",
-    "ramda": "^0.28.0",
-    "read-pkg": "^7.0.0"
+    "package-up": "^5.0.0",
+    "pkg-dir": "^8.0.0",
+    "pkg-up": "^5.0.0",
+    "ramda": "^0.30.1",
+    "read-pkg": "^9.0.1",
+    "recast": "^0.23.9"
   },
   "devDependencies": {
     "chai": "^4.3.4",
-    "mocha": "^9.1.3",
-    "nodemon": "^2.0.15"
+    "mocha": "^10.7.3",
+    "nodemon": "^3.1.7"
   },
   "directories": {
     "lib": "lib"

package/src/spyne-app-create.js

@@ -0,0 +1,190 @@
+// SpyneAppCreator.js
+
+import c from 'ansi-colors';
+import { exec } from 'child_process';
+import fs from 'fs-extra';
+import path from 'path';
+
+class SpyneAppCreator {
+  constructor(args) {
+    this.args = args;
+    this.createAppBool = this.checkCreateAppCommand();
+  }
+
+  // Method to check if 'create' command is used with 'appFolder' argument
+  checkCreateAppCommand() {
+    const createIndex = this.args.indexOf('create');
+    if (createIndex !== -1 && this.args[createIndex + 1]) {
+      this.appFolder = this.args[createIndex + 1];
+      this.parseOptions(createIndex + 2); // Start parsing options after 'appFolder'
+      return true;
+    }
+    return false;
+  }
+
+  // Method to parse additional command-line options
+  parseOptions(startIndex) {
+    this.options = {
+      templateName: 'starter-app', // Default template
+      skipInstall: false,
+      skipGit: false,
+    };
+
+    for (let i = startIndex; i < this.args.length; i++) {
+      const arg = this.args[i];
+      if (arg === '--template' && this.args[i + 1]) {
+        this.options.templateName = this.args[i + 1];
+        i++; // Skip the next argument since it's the value of --template
+      } else if (arg === '--no-install') {
+        this.options.skipInstall = true;
+      } else if (arg === '--skip-git') {
+        this.options.skipGit = true;
+      }
+    }
+  }
+
+  // Getter for createAppBool
+  get createAppBool() {
+    return this._createAppBool;
+  }
+
+  // Setter for createAppBool
+  set createAppBool(value) {
+    this._createAppBool = value;
+  }
+
+  // Method to initiate app creation
+  async createApp() {
+    const appFolder = this.appFolder;
+    const { templateName, skipInstall, skipGit } = this.options;
+    const repoUrl = this.getTemplateRepoUrl(templateName);
+    const appPath = path.resolve(process.cwd(), appFolder);
+
+    console.log(c.green(`\nCreating a new Spyne app in ${c.cyan(appPath)} using the "${c.cyan(templateName)}" template...\n`));
+
+    try {
+      // Clone the repository
+      await this.cloneRepository(repoUrl, appFolder);
+
+      // Remove the .git directory
+      await fs.remove(path.join(appFolder, '.git'));
+
+      // Initialize a new Git repository if not skipped
+      if (!skipGit) {
+        await this.initGitRepo(appFolder);
+      }
+
+      // Install dependencies if not skipped
+      if (!skipInstall) {
+        await this.installDependencies(appFolder);
+      }
+
+      // Update package.json
+      await this.updatePackageJson(appFolder);
+
+      // Provide post-installation instructions
+      this.printSuccessMessage(appFolder, appPath, skipInstall);
+    } catch (error) {
+      console.error(c.red(`\nError: ${error.message}`));
+    }
+  }
+
+  // Method to get the repository URL based on the template name
+  getTemplateRepoUrl(templateName) {
+    const templates = {
+      'starter-app': 'https://github.com/nybatista/starter-app-alpha.git',
+      // Add more templates here if needed
+    };
+    if (!templates[templateName]) {
+      throw new Error(`Template "${templateName}" not found.`);
+    }
+    return templates[templateName];
+  }
+
+  // Method to clone the repository
+  cloneRepository(repoUrl, appFolder) {
+    return new Promise((resolve, reject) => {
+      exec(`git clone --depth=1 ${repoUrl} ${appFolder}`, (error) => {
+        if (error) {
+          reject(new Error(`Failed to clone repository: ${error.message}`));
+        } else {
+          console.log(c.green('✔ Repository cloned successfully.'));
+          resolve();
+        }
+      });
+    });
+  }
+
+  // Method to initialize a new Git repository
+  initGitRepo(appFolder) {
+    return new Promise((resolve) => {
+      exec('git --version', (gitError) => {
+        if (gitError) {
+          console.warn(c.yellow('⚠ Git is not installed. Skipping Git initialization.'));
+          resolve();
+        } else {
+          exec('git init', { cwd: appFolder }, (initError) => {
+            if (initError) {
+              console.warn(c.yellow('⚠ Failed to initialize Git repository.'));
+            } else {
+              console.log(c.green('✔ Git repository initialized.'));
+            }
+            resolve();
+          });
+        }
+      });
+    });
+  }
+
+  // Method to install dependencies
+  installDependencies(appFolder) {
+    return new Promise((resolve, reject) => {
+      console.log(c.green('\nInstalling dependencies...\n'));
+      exec('npm install', { cwd: appFolder }, (installError) => {
+        if (installError) {
+          console.warn(c.yellow('⚠ Failed to install dependencies.'));
+          resolve(); // Proceed even if installation fails
+        } else {
+          console.log(c.green('✔ Dependencies installed successfully.'));
+          resolve();
+        }
+      });
+    });
+  }
+
+  // Method to update package.json
+  updatePackageJson(appFolder) {
+    return new Promise((resolve, reject) => {
+      const pkgPath = path.join(appFolder, 'package.json');
+      fs.readJson(pkgPath)
+      .then((pkg) => {
+        pkg.name = path.basename(appFolder);
+        return fs.writeJson(pkgPath, pkg, { spaces: 2 });
+      })
+      .then(() => {
+        console.log(c.green('✔ package.json updated.'));
+        resolve();
+      })
+      .catch((err) => reject(new Error(`Failed to update package.json: ${err.message}`)));
+    });
+  }
+
+  // Method to print success message
+  printSuccessMessage(appFolder, appPath, skipInstall) {
+    console.log(c.green(`\nSuccess! Created ${c.cyan(appFolder)} at ${c.cyan(appPath)}\n`));
+    console.log('Inside that directory, you can run several commands:\n');
+    console.log(`  ${c.cyan('npm start')}`);
+    console.log('    Starts the development server.\n');
+    console.log(`  ${c.cyan('npm run build')}`);
+    console.log('    Bundles the app into static files for production.\n');
+    console.log('We suggest that you begin by typing:\n');
+    console.log(`  ${c.cyan('cd')} ${appFolder}`);
+    if (skipInstall) {
+      console.log(`  ${c.cyan('npm install')}`);
+    }
+    console.log(`  ${c.cyan('npm start')}\n`);
+    console.log(c.green('Happy coding!'));
+  }
+}
+
+export default SpyneAppCreator;

package/src/spyne-app-creator.js

@@ -97,7 +97,7 @@ export default class SpyneAppCreator {
   static checkArgs(args){
     const methodStr =  args.length>=3 ? args[2] : false;
     const folderName = args.length>=4 ? args[3] : undefined;
-    const createAppBool = methodStr === "create-app";
+    const createAppBool =  ["create-app", "new", "create", "generate"].includes(methodStr);
 
     return {folderName, createAppBool};
 
@@ -116,4 +116,4 @@ export default class SpyneAppCreator {
   }
 
 
-}
+}

package/src/spyne-file-prompt.js

@@ -7,6 +7,7 @@ import GeneratePromptInputObject from './templates/generate-prompt-input-object.
 import GenerateFileString from './templates/generate-file-string.js';
 import {onSaveSpyneFileToDir} from './utils/file-utils.js';
 import {generatePromptOutput} from './templates/generate-prompt-output.js';
+import {addChannelToIndexJS} from './utils/add-channel-to-index-file.js';
 
 export default class SpyneFilePrompt {
 
@@ -37,10 +38,23 @@ export default class SpyneFilePrompt {
   }
 
   saveFileAndSendOutput(answers) {
-    const {fileType, fileName, fileDirectory} = answers;
+    const {fileType, fileName, fileDirectory, className} = answers;
     const {fileString} = new GenerateFileString(fileType, answers);
     const savedProps = onSaveSpyneFileToDir(fileString, fileName, fileDirectory);
-    const msgOutput = generatePromptOutput(answers, savedProps, fileString);
+
+    // default is no channel to be registered, yet
+    let channelHasRegistered = false;
+
+    if (fileType === 'Channel'){
+      const savedChannelToIndexProps = addChannelToIndexJS(className, fileName);
+
+      // check if channel has been registered
+      channelHasRegistered = savedChannelToIndexProps.fileHasSaved;
+    }
+
+    const msgOutput = generatePromptOutput(answers, savedProps, fileString, channelHasRegistered);
+
+
     console.log(msgOutput);
   }
 

package/src/templates/generate-file-string.js

@@ -9,12 +9,12 @@ export class ${props.className} extends ViewStream {
     }
     
     addActionListeners() {
-        // return nexted array(s)
+        // return nested array(s)
         return [];
     }
     
     broadcastEvents() {
-        // return nexted array(s)
+        // return nested array(s)
         return [];
     }
    

package/src/templates/generate-prompt-input-fields.js

@@ -15,7 +15,8 @@ const {prompt, Select} = enquirer;
 import c from 'ansi-colors';
 import * as R  from 'ramda';
 import {getLocalFileDirectory, validateFileDirectory} from '../utils/file-utils.js';
-import changeCase from 'change-case';
+import * as changeCase from "change-case";
+
 
 const {
   camelCase,

package/src/templates/generate-prompt-input-object.js

@@ -38,7 +38,7 @@ export default class GeneratePromptInputObject{
   }
 
   static getPromptObjSettings(){
-   return R.compose(R.head, R.filter(R.propEq('inputType', _inputType)))(promptTypes);
+   return R.compose(R.head, R.filter(R.propEq(_inputType, 'inputType')))(promptTypes);
   }
 
 }

package/src/templates/generate-prompt-output.js

@@ -9,9 +9,11 @@ colors.alias('files', colors.green);
 let _answers;
 let _savedProps;
 let _fileStr;
-
+let _channelHasRegistered = false;
 
 const createChannelRegisterSnippet = () => {
+
+
   const {fileName, className, fileDirectory, channelName} = _answers;
 
   const filePath = fileDirectory+fileName;
@@ -71,17 +73,25 @@ const outputMessage = ()=>{
 
   let messageOutput = '';
 
-  const defaultStr = colors.bgBlue(colors.black("File saved successfully."));
+  const defaultStr = colors.bgBlue(colors.black(`Successfully saved the ${fileType} file.`));
+
+  const checkForChannelRegisteredMsg = ()=>{
+    if (_channelHasRegistered === true){
+       return colors.bgBlue(colors.black(`Channel registered and file saved successfully.`));
+    }
+    return `${defaultStr}\n${createChannelRegisterSnippet()}`;
+  }
+
   const messageHash = {
 
-    "ViewStream" : defaultStr,
-    "DomElement" : defaultStr,
-    "SpyneTrait" : defaultStr,
-    "Channel"    : `${defaultStr}\n${createChannelRegisterSnippet()}`
+    "ViewStream" : ()=>defaultStr,
+    "DomElement" : ()=>defaultStr,
+    "SpyneTrait" : ()=>defaultStr,
+    "Channel"    : checkForChannelRegisteredMsg
   }
 
   if (fileHasSaved){
-    messageOutput = messageHash[fileType];
+    messageOutput = messageHash[fileType]();
   } else {
 
     messageOutput = outputFailedMessage();
@@ -94,11 +104,12 @@ const outputMessage = ()=>{
 
 
 
-const generatePromptOutput = (answers={}, savedProps={}, fileStr='')=>{
+const generatePromptOutput = (answers={}, savedProps={}, fileStr='', channelHasRegistered=false)=>{
 
   _answers = answers;
   _savedProps = savedProps;
   _fileStr = fileStr;
+  _channelHasRegistered = channelHasRegistered;
 
 
   return outputMessage();

package/src/ui.js

@@ -5,7 +5,7 @@ export class SpyneCliUI {
 
   constructor() {}
   static title(){
-    const figletTxt = figlet.textSync('spyne-cli', {
+    const figletTxt = figlet.textSync('spyne-cli 5.0', {
       horizontalLayout: 'universal smushing'
     })
     const chalkOutput = chalk.blue(figletTxt);
@@ -13,4 +13,4 @@ export class SpyneCliUI {
 
   }
 
-}
+}

package/src/utils/add-channel-to-index-file.js

@@ -0,0 +1,116 @@
+// add-channel.js
+
+import fs from 'fs';
+import path from 'path';
+import recast from 'recast';
+
+const { builders: b } = recast.types;
+
+// Export the function so it can be imported elsewhere
+export const addChannelToIndexJS = (channelClassName, channelFileName, indexJSPath="./src/index.js") => {
+  try {
+    // Read the index.js file content
+    const code = fs.readFileSync(indexJSPath, 'utf8');
+
+    // Parse the code into an AST
+    const ast = recast.parse(code);
+
+    // 1. Add the import statement
+    const importDeclaration = b.importDeclaration(
+        [b.importSpecifier(b.identifier(channelClassName))],
+        b.literal(`channels/${channelFileName}`)
+    );
+
+    // Insert the import declaration after the last import statement
+    const body = ast.program.body;
+    let lastImportIndex = -1;
+    body.forEach((node, index) => {
+      if (node.type === 'ImportDeclaration') {
+        lastImportIndex = index;
+      }
+    });
+    if (lastImportIndex >= 0) {
+      body.splice(lastImportIndex + 1, 0, importDeclaration);
+    } else {
+      // No import declarations found, add at the top
+      body.unshift(importDeclaration);
+    }
+
+    // 2. Add the SpyneApp.registerChannel() call
+    const registerCall = b.expressionStatement(
+        b.callExpression(
+            b.memberExpression(b.identifier('SpyneApp'), b.identifier('registerChannel')),
+            [b.newExpression(b.identifier(channelClassName), [])]
+        )
+    );
+
+    // Find the correct place to insert the register call
+    // After the last existing SpyneApp.registerChannel() call
+    let lastRegisterIndex = -1;
+    body.forEach((node, index) => {
+      if (
+          node.type === 'ExpressionStatement' &&
+          node.expression.type === 'CallExpression' &&
+          node.expression.callee.type === 'MemberExpression' &&
+          node.expression.callee.object.name === 'SpyneApp' &&
+          node.expression.callee.property.name === 'registerChannel'
+      ) {
+        lastRegisterIndex = index;
+      }
+    });
+
+    if (lastRegisterIndex >= 0) {
+      body.splice(lastRegisterIndex + 1, 0, registerCall);
+    } else {
+      // If no existing register calls, insert after SpyneApp.init(config);
+      let initIndex = -1;
+      body.forEach((node, index) => {
+        if (
+            node.type === 'ExpressionStatement' &&
+            node.expression.type === 'CallExpression' &&
+            node.expression.callee.type === 'MemberExpression' &&
+            node.expression.callee.object.name === 'SpyneApp' &&
+            node.expression.callee.property.name === 'init'
+        ) {
+          initIndex = index;
+        }
+      });
+      if (initIndex >= 0) {
+        body.splice(initIndex + 1, 0, registerCall);
+      } else {
+        // Else, add at the end
+        body.push(registerCall);
+      }
+    }
+
+    // Generate the modified code
+    const output = recast.print(ast).code;
+
+    // Write back to index.js
+    fs.writeFileSync(indexJSPath, output, 'utf8');
+
+    // Return success result
+    return {
+      fileHasSaved: true,
+      errorType: null
+    };
+  } catch (error) {
+    // Determine error type
+    let errorType = 'UnknownError';
+    if (error.code === 'ENOENT') {
+      errorType = 'FileNotFound';
+    } else if (error.name === 'SyntaxError') {
+      errorType = 'SyntaxError';
+    } else if (error.name === 'TypeError') {
+      errorType = 'TypeError';
+    } else if (error.name === 'PermissionError') {
+      errorType = 'PermissionError';
+    }
+
+    // Fail silently and return error information
+    return {
+      fileHasSaved: false,
+      errorType
+    };
+  }
+};

package/src/utils/file-utils.js

@@ -65,6 +65,7 @@ const getLocalFileDirectory = (_fileType)=>{
     ErrorLogger.log(e, 'getFileDirectory')
   }
 
+
   return dirPath;
 
 }

package/tests/generate-prompt-input-fields-methods.test.js

@@ -1,7 +1,7 @@
 import chai from 'chai';
 const {expect, assert} = chai;
 import PromptInputField from '../src/templates/generate-prompt-input-fields.js';
-import changeCase from 'change-case';
+import * as changeCase from "change-case";
 
 const {
   camelCase,
@@ -95,7 +95,7 @@ describe('should create all necessary prompt input initial, hint and validate fi
 
     it('it should generate initial value for directory based on app path', ()=>{
       let inputType = 'fileDirectory';
-      const initialViewStreamFileDir = new PromptInputField(inputType,  fileType,     'initial').field;
+      const initialViewStreamFileDir = new PromptInputField(inputType,  fileType,      'initial').field;
       const initialDomElementFileDir = new PromptInputField(inputType, 'DomElement',  'initial').field;
       const initialChannelFileDir =    new PromptInputField(inputType, 'Channel',     'initial').field;
       const initialSpyneTraitFileDir = new PromptInputField(inputType, 'SpyneTrait',  'initial').field;
@@ -107,6 +107,7 @@ describe('should create all necessary prompt input initial, hint and validate fi
 
 
       //console.log('process ',{initialFileDir})
+
       expect(initialViewStreamFileDir).to.equal('./src/app/components/')
       expect(initialDomElementFileDir).to.equal('./src/app/components/')
       expect(initialChannelFileDir).to.equal('./src/app/channels/')

package/tests/generate-prompt-output.test.js

@@ -6,7 +6,7 @@ const {answersArr} = AnswersData;
 import {generatePromptOutput} from '../src/templates/generate-prompt-output.js';
 import * as R  from 'ramda';
 
-const getAnswersByFileType = (fileType) => R.compose(R.head, R.filter(R.propEq('fileType', fileType)))(answersArr)
+const getAnswersByFileType = (fileType) => R.compose(R.head, R.filter(R.propEq(fileType, 'fileType')))(answersArr)
 
 const defaultStr = `
 import {Subject} from 'rxjs';

package/src/app/channels/channel-custom.js

@@ -1 +0,0 @@
-Some content for tests/utils/file-utils-test -- should test saving to file

package/src/app/components/my-ui-el-view.js

@@ -1,25 +0,0 @@
-import {ViewStream} from 'spyne';
-
-export class MyUiElView extends ViewStream {
-    
-    constructor(props={}) {
-        
-        super(props);
-    }
-    
-    addActionListeners() {
-        // return nexted array(s)
-        return [];
-    }
-    
-    broadcastEvents() {
-        // return nexted array(s)
-        return [];
-    }
-   
-    onRendered() {
-    
-    }
-    
-}
-

package/src/app/components/sdafsdfaa.js

@@ -1,25 +0,0 @@
-import {ViewStream} from 'spyne';
-
-export class Sdafsdfaa extends ViewStream {
-    
-    constructor(props={}) {
-        
-        super(props);
-    }
-    
-    addActionListeners() {
-        // return nexted array(s)
-        return [];
-    }
-    
-    broadcastEvents() {
-        // return nexted array(s)
-        return [];
-    }
-   
-    onRendered() {
-    
-    }
-    
-}
-

package/src/h-world-new/README.md

@@ -1,15 +0,0 @@
-##  Spynejs Hello World Application
- barebones app preconfigured for building, testing and adding content using the spyne-cli tool
-
-App includes
-* AppView
-* Application Folder Structure
-* Build, production setup using webpack and sass
-* Spyne Console plugin
-* Unit testing 
-
-```
-npm run init or npm install
-```
-
-### Build better web experiences, faster