Document date: August 2016

Software release date: July 2016

HPE Propel Software version 2.20

Jumpstart

Jumpstart Legal Notices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Jumpstart Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Jumpstart Application Diagrams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Jumpstart Development Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Jumpstart Modularization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Jumpstart Modularization on Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Jumpstart Modularization on UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Extending HPE Propel Launchpad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Content

Jumpstart

3

Jumpstart Legal Notices

Legal Notices

Warranty

The only warranties for Hewlett Packard Enterprise products and services are set forth in the express warranty statements accompanying suchproducts and services. Nothing herein should be construed as constituting an additional warranty. Hewlett Packard Enterprise shall not be liablefor technical or editorial errors or omissions contained herein. The information contained herein is subject to change without notice.

Restricted Rights Legend

Confidential computer software. Valid license from Hewlett Packard Enterprise required for possession, use or copying. Consistent with FAR12.211 and 12.212, Commercial Computer Software, Computer Software Documentation, and Technical Data for Commercial Items are licensedto the U.S. Government under vendor's standard commercial license.

Copyright Notice

© Copyright 2016 Hewlett Packard Enterprise Development LP

Trademark Notices

Adobe® is a trademark of Adobe Systems Incorporated.

Microsoft® and Windows® are U.S. registered trademarks of Microsoft Corporation.

UNIX® is a registered trademark of The Open Group.

Oracle and Java are registered trademarks of Oracle and/or its affiliates.

RED HAT READY™ Logo and RED HAT CERTIFIED PARTNER™ Logo are trademarks of Red Hat, Inc.

The OpenStack word mark and the Square O Design, together or apart, are trademarks or registered trademarks of OpenStack Foundation in theUnited States and other countries, and are used with the OpenStack Foundation’s permission.

Documentation UpdatesThe title page of this document contains the following identifying information:

Software Version number, which indicates the software version.Document Release Date, which changes each time the document is updated.Software Release Date, which indicates the release date of this version of the software.

To check for recent updates or to verify that you are using the most recent edition of a document, go to: https://softwaresupport.hpe.com/

This site requires that you register for an HPE Passport and to sign in. To register for an HPE Passport ID, click on the HPE SoftwareRegister Support site or click on the HPE Passport login page.Create an Account

You will also receive updated or new editions if you subscribe to the appropriate product support service. Contact your HPE sales representativefor details.

Use the   function at the top of the page to find documentation, whitepapers, and other information sources. To learn more about using theSearchcustomer support site, go to:

https://softwaresupport.hpe.com/documents/10180/14684/HP_Software_Customer_Support_Handbook/

SupportVisit the HPE Software Support site at:   https://softwaresupport.hpe.com/ .

This web site provides contact information and details about the products, services, and support that HPE Software offers.

HPE Software online support provides customer self-solve capabilities. It provides a fast and efficient way to access interactive technical supporttools needed to manage your business. As a valued support customer, you can benefit by using the support web site to:

Jumpstart

4

Search for knowledge documents of interestSubmit and track support cases and enhancement requestsDownload software patchesManage support contractsLook up HPE support contactsReview information about available servicesEnter into discussions with other software customersResearch and register for software training

Most of the support areas require that you register as an HPE Passport user and to sign in. Many also require a support contract. To register foran HPE Passport ID, click on the HPE Support site or click on the HPE Passport login page.Register Create an Account

To find more information about access levels, go to:  .https://softwaresupport.hpe.com/web/softwaresupport/access-levels

HPE Software Solutions Now accesses the HPE Software Solution and Integration Portal website. This site enables you to explore HPE ProductSolutions to meet your business needs, includes a full list of Integrations between HPE Products, as well as a listing of ITIL Processes. The URLfor this website is .https://www.hpe.com/us/en/solutions.html

DisclaimerHewlett Packard Enterprise Software provides full support for the product functionality as provided. Customer owns the necessary servicing andrepair of any development created with the SDK tool. 

Jumpstart

5

Jumpstart OverviewHPE Propel Jumpstart (Jumpstart) enables developers to quickly start developing web application using common practices and conventions, aswell as reusable modules created by other Jumpstart developers. IT organizations will find unprecedented flexibility in customizing their portalusing Jumpstart, easily extending their portal with new content or by incorporating existing content from other sources. HPE Propel Jumpstartprovides scaffolding of server and UI modules to bootstrap implementation of new feature(s) or changes to existing feature(s).

Jumpstart is a toolset to help build single page web application as a collection of modules. It's based on open source specification (of npm andBower) and aset of development workflows leveraging module management capabilities of npm and Bower. Such approach enables developersto leverage thousands of existing open source modules and really deliver value to their customers quickly. For example, application(s) built byHPE Propel Jumpstart will have built-in core features of HPE Propel applications as well as built-in support for common user interface. To simplifyupgrading with customized applications, Jumpstart includes dependency management capabilities via semantic versioning in generated apps.

Jumpstart Value

Jumpstart provides the following value:

Jumpstart allows customers to quickly build modern web applications such as single page applications, modular microservicesarchitectures, and microservice app generators.Jumpstart's modularity provides better upgradeability and rapid development.Jumpstart utilizes open source technology such as HTML5, JavaScript, AngularJS, and NodeJS.The Jumpstart Generator creates modules that can be used for building larger web applications. Think of these modules as similar to thechildren’s LEGO® bricks that have internal and external connectors that connect together to build complex structures.Jumpstart leverages open source community pages when building inside the LEGO® bricks. Fill the client side LEGO® brick withHTML5, CSS, and AngularJS.Jumpstart supplies outside LEGO® brick functions such as user authentication and common UI layouts and themes. Fill the server sideLEGO® brick with NodeJS or Java.Each Jumpstart application or microservice can be deployed independently.Jumpstart is built using the same approach and architecture as HPE Propel.

Key Concepts

Modularity

Jumpstart applications are composed of modules. Each module conforms to a single responsibility principle. 

Distributive

Each Jumpstart module is developed for a specific Jumpstart application, and can be reused by other Jumpstart applications. Modules aredistributed across project repositories. A decentralized design allows any number of public and private repositories to work together.

Jumpstart modules are expected to be small. Each should implement one requirement, or a very small set of requirements. Jumpstart modulescan be easily configured by the user. More information follows in the Jumpstart configuration section.

Plug-and-Play

Plug-and-play is managed through standard npm and Bower module management system (e.g.,  and files). Integrate apackage.json bower.json module into a Jumpstart application by running the following commands:

npm install <module_name> --saveorbower install <module_name> --save

Disintegrate, or remove, a module with the following commands:

npm uninstall <module_name> --saveor bower uninstall <module_name> --save

Jumpstart

6

Terminology

Jumpstart application

A Jumpstart application is a simple wrapper that is composed of collection of Jumpstart modules and open source modules. It is a deployableapplication that performs no function of its own. Instead, the application includes dependencies on one or more modules, each of which performsone or more functions. A Jumpstart application declares module dependencies through either npm (package.json) or Bower (bower.json). AJumpstart application is an npm package, and must include keyword ( field in package.json file).jumpstart-app keywords

A Jumpstart application depends on core Jumpstart modules that provide development workflows in the form of tasks. These tasks includegulppacking web content, minifying/uglifying Javascript, compiling SASS files into CSS, etc.

Jumpstart module

A Jumpstart module can be either a Bower package or an npm package, with specific keywords (in bower.json and package.json) to indicate the. Jumpstart follows the standards outlined for bower.json and package.json, and does not introduce any custom attributes.module capabilities

Keywords help the Jumpstart engine module integrate, or bundle, each Jumpstart module into a Jumpstart application for deployment. AJumpstart module can have more than one role, and it can have both package.json and bower.json content for the browser and Node.js layer.

In essence, a Jumpstart module is a standard Bower or npm module that contains one or more of following:

Angular.js codeCollection of templates (i.e., HTMLs)Static assets (i.e., images, icons, etc.)Node.js server-side code (i.e., API code)

Note: keywords is part of the manifest specification for both Bower packages (bower.json) and npm packages (package.json). See and for more information.https://github.com/bower/bower.json-spec#keywords https://docs.npmjs.com/files/package.json#keywords

Jumpstart server

A Jumpstart server is a Jumpstart module with role keyword in its package.json content. It must implement the Jumpstartexpress-serverserver specification. See the chapter for more information.  Jumpstart Modularization on Server

Jumpstart middleware

Jumpstart middleware are identified by the role keyword . These are Express middleware that must be wrapped in aexpress-middlewareJumpstart module for a Jumpstart application to integrate into the Jumpstart server. See the chapter forJumpstart Modularization on Servermore information.

Jumpstart configuration

Each Jumpstart module can be declared as configurable with keyword . Configuration modules export an jumpstart-configurable Inquirer array. When the user runs the command from the Jumpstart application, the configurations in the array are presented to theobject gulp config

user as a list of guided questions via command line interface. The answers are stored in file app.json in the Jumpstart application (app.json is theJumpstart application configuration file). See in the Modularization chapter for more details.Module Configuration

Jumpstart Application DiagramsThe following diagrams provide a graphical representation and descriptions of the various parts of a Jumpstart application.

Figure 1: Structure of typical Jumpstart application

Jumpstart

7

Figure 2: Example content for integrating a Jumpstart module into a Jumpstart application

Jumpstart Development EnvironmentTechnologies Used by Jumpstart 

Jumpstart embraces popular open source technologies around the Node.js platform. Following are technologies used by Jumpstart with briefintroductions.

Required tools

- a package manager for the webBower (http://bower.io/)

Jumpstart

8

- a streaming build systemgulp (http://gulpjs.com/) - a cross-platform runtime environment for server-side and networking applicationsNode.js (http://nodejs.org/)

- a CSS extension languageSass (http://sass-lang.com/)

Optional tools

Angular.js (https://angularjs.org/)Express.js (http://expressjs.com/)npm - Node Package Manager (https://www.npmjs.org/)Yeoman (http://yeoman.io/)

Angular.js

AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your template language and extend HTML's syntax toexpress your application's components clearly and succinctly.

Jumpstart web tier modules are Angular modules, Angular templates, or a combination of both. The ability to isolate an Angular template as amodule allows a Jumpstart application to change the look and feel of reusable web modules without rewriting the logic.

Angular can work with jQuery framework, and it has a large set of extension available as Bower packages.

For the most up-to-date information on AnjularJS, visit https://angularjs.org/.

Bower

Bower is a package manager for the web. Bower packages differ from npm packages in that they manage all types of files that will be loaded by abrowser. Bower is optimized for the front-end. It uses a flat dependency tree requiring only one version for each package, reducing page load to aminimum.

While Bower is a relatively smaller repository when compared to npm, it hosts most popular web modules known today (e.g., angular.js, jQuery,etc.).

All Jumpstart web modules are Bower packages.

For the most up-to-date information on Bower, visit .http://bower.io/

Express.js

Express is a minimal and flexible Node.js web application framework. An Express application is essentially a stack of middleware which isexecuted serially. Jumpstart allows dynamic injection of middleware into an Express application/server. A typical Jumpstart server module will bedefined as an Express middleware.

For the most up-to-date information on Express, visit  http://expressjs.com/.

gulp

gulp is a streaming build system. Jumpstart defines an opinionated set of gulp tasks for developing, testing, integrating and deploying Jumpstartmodules and applications. Many of these tasks promote best practices; some help troubleshoot common problems during web development. Thisshould increase development efficiency.

For the most up-to-date information on gulp, visit .http://gulpjs.com/

Node.js

Node.js is an open source, cross-platform runtime environment for server-side and networking applications. Node.js is a software platform used tobuild fast, scalable network applications. Node.js uses JavaScript as its scripting language. Node.js uses an event-driven, non-blocking I/O modelthat makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Node.js was chosen for Jumpstart because of its outstanding performance when hosting lightweight service APIs and web content. Additionallythere are emerging sets of standard development tools for web technologies built for Node.js (e.g., HTML, CSS, Javascript).

For the most up-to-date information on Node.js, visit .http://nodejs.org

npm - Node Package Manager

Npm (Node Package Manager) is the default package manager for Node.js. npm manages dependencies between Node.js modules. AllJumpstart modules that run on the server side are npm packages.

For the most up-to-date information on npm, visit .https://www.npmjs.org/

Sass

Sass is a CSS extension language, and is used by Jumpstart for styling module compilation. Sass features such as variables, partials, mixins, and

Jumpstart

9

extend/inheritance make Object Oriented CSS ( )OOCSS development simpler.

For the most up-to-date information on Sass, visit .http://sass-lang.com/

Yeoman

Yeoman is a development stack consisting of tools and frameworks intended to help developers quickly build web applications. Yeoman runs as acommand-line interface written in Node.js. Jumpstart provides a project generator on top of Yeoman that helps developers bootstrap the creationof various building blocks.

For the most up-to-date information on Yeoman, visit http://yeoman.io/.

Installing Required Tools

In order to develop modules and applications using Jumpstart, you must first install the following tools.

These tools are available on Linux and OSX. They are also available on Windows, although only preliminary Jumpstart testing has been done onthis platform.

Node.js

Install Node.js from http://nodejs.org/.Mac/Linux users

Install Node.js via NVM (Node Version Manager) from . This allows you to install multiple versions ofhttps://github.com/creationix/nvmNode.js and switch between them as appropriate. It also makes it easier to upgrade to the latest Node.js version.

Verify that Node.js is installed by executing command: . This will display Node.js version information.node -v

Bower

Once Node.js is installed, install Bower by executing command: npm install -g bower.

Verify that Bower is installed by executing command: This will display bower version information.bower –v.

Now command will be available for you to install Bower packages.Bower

yo

Install Yeoman by executing command:  .npm install -g yo

gulp

Once Node.js is installed, install gulp by executing command: npm install -g gulp.

Verify that gulp is installed by executing command: . gulp –v This will display gulp version information.

Sass

Sass is required by Jumpstart for the styling module compilation. Install Sass from http://sass-lang.com/install.

 Note: Sass depends on the Ruby runtime.

Jumpstart

Install the Jumpstart generator from the private npm repository by executing the following command:

Note: Please get in touch with your HPE Propel representative to configure your to point to HPE Propel's private npm repository.~/.npmrcOtherwise, you won't be able to install any of HPE Propel's npm modules.

    npm install -g @propel/ jumpstartgenerator-

Proxy Support

Following are tips for adding proxy support if your machine is protected by a corporate firewall:

Add system wide proxy configuration

Linux:

Jumpstart

10

1. 2.

export HTTP_PROXY=<proxy address>export HTTPS_PROXY=<proxy address>

Windows:

Add HTTP_PROXY and HTTPS_PROXY on your System Properties -> Environment Variables

Node.js proxy configuration

       Open file <home_directory>/.npmrc and add the following entry - proxy = <proxy_address>.        Example: proxy = http://<host name>:<host port>/ 

Git proxy configuration

       Add the following entries to file < home directory >/.gitconfig:

[http] proxy = <proxy address> sslVerify = false [https] proxy = <proxy address> [url "https://github.com"] insteadOf = git://github.com

Jumpstart Modularization

Jumpstart Design Goals

Follow the Node.js design paradigm.Application should be composed of modules.Each module should be small and should perform only one function - single responsibility principleEach module should be reusable.

Public modules in npm and Bower repositories should work as-is in a Jumpstart environment.A module is integrated into a Jumpstart application by adding it as a dependency.A Jumpstart application does not include any function or requirement. It serves as the host of the centralized configurations, and as theroot of all the module dependencies.Modules can optionally define a set of module-specific configurations through the Jumpstart configuration interface. The Jumpstartapplication can then generate the unified configuration through a guided user interface.

Module Types

There are two types of modules in a Jumpstart application:

npm module: Package contents run on the server side within the Node.js runtime. Bower module: Package content sent to and runs on the client side within the browser runtime.

It is possible for a module to implement both module types simultaneously.

Module Specification

The only requirement for any Jumpstart module is that it be a valid npm or Bower module.

All packages served by a public Bower repository and/or public npm repository are valid Jumpstart modules. Some modules perform special

Jumpstart

11

duties. These packages contain keywords in their package manifest file list property as described in the section in the Terminology Overviewchapter.

There are two Jumpstart-specific module roles,  and .jumpstart-app jumpstart-engine

jumpstart-app

The keyword indicates that this is the top level Jumpstart application module. This type of module usually contains only thejumpstart-apppackage manifest files, setting files and configuration, as well as exactly one task engine, identified by keyword andjumpstart-engineimplemented as its dependency.

A jumpstart-app module does not contain any business logic/function. Rather, all business logic/functions are performed by modules specifiedthrough the application’s dependencies in the package.json and bower.json files.

After installation and building, the application module can also create folders that contain children packages and compiled files for developmentand deployment (e.g.,  , , , ). This content is typically excluded from a Git repository.node_modules bower_components .tmp dist

Note: A module with the jumpstart-app role must not take on additional roles. This violates the design principle that a Jumpstart applicationincludes no function, but rather includes module dependencies that perform needed functions.

jumpstart-engine

A module with role is an opinionated set of  that controls the development workflow.jumpstart-engine tasksgulp

angular-template

A Jumpstart module (bower) that holds HTML templates. It contains a folder called under the project root. The project root cantemplatescontain any folder/file structure. The primary targets are the .html files expected to contain angular template formats. The folder/file structure in thetemplates folder is preserved when bundled into a Jumpstart application, so that other modules that contain angular logic can refer to the templatefile reliably.

angular-ui

A Jumpstart module (bower) which contains Angular.js code. An package must contain javascript files that will run in a browser. Allangular-uijavascript files entries should be included in the property in bower.json.main

Note: angular-ui is the default keyword if no other keyword is specified.

express-middleware

A Jumpstart module (npm) that conforms to the Jumpstart server module specification (i.e., Jumpstart server lifecycle) and exports Express.jsmiddleware.

express-server

A Jumpstart module (npm) that exports an instance of Express.js and follows the Jumpstart server specification (i.e., Jumpstart server lifecycle).

jumpstart-configurable

Indicates that there's a set of configurations for the specified module that will be exposed to the user to configure.

Jumpstart Modularization on Server

Jumpstart Modularization on Server (Node.js)Jumpstart server module (express-server keyword)Jumpstart Middleware Module (express-middleware keyword)

Exporting a function from a middleware moduleExporting a hash from a middleware moduleMounting Jumpstart middleware modulesThe loader contextModule configuration

Jumpstart Modularization on Server (Node.js)

The primary benefit of using Jumpstart is the ability to build your application as an aggregation of modules. Modules can be easily exchanged toprovide different capabilities to the application.

A Jumpstart application consists of a single module and one or more modules.server middleware

Jumpstart

12

Jumpstart server module (express-server keyword)

The server module exports an instance of Express.js server. It emits a series of  lifecycle events which serve as dynamic mounting points for theother middleware modules (identified via the  keyword).express-middleware

The following lifecycle events are dispatched in order when the server is instantiated:  

setup : Dispatched after the Express.js server instance is created.init : Dispatched after the basic server configuration completes (when the configuration is loaded/applied by the server).session : Dispatched after the session has been set up.auth : Dispatched after authentication has been set up.defaults : Dispatched after setup is complete.

Dispatching the event as shown in the following is the responsibility of each server. Every event must be dispatched only once and in the orderspecified. It is important to pass the server object when dispatching these events.

The following is the simplest server module that can be created:

Jumpstart

13

'use strict';

var assert = require('assert');var express = require('express');

module.exports = function () { assert(this.config, '`loader.config` is not defined'); assert(this.server, '`loader.server` is not defined');

// This will be covered later var pkg = require('./package'); var opts = this.config.getConfig(pkg.name);

assert(opts.env, 'Option `env` is not set.');

var app = this.app = express(); var server = this.server; server.on('request', app);

/*** =======================================* Server lifecycle: setup

*/ this.emit(this.LifeCycle.setup, app, server);

/*** =======================================* Server lifecycle: init

*/ this.emit(this.LifeCycle.init, app, server);

/*** =======================================* Server lifecycle: session set

*/ this.emit(this.LifeCycle.session, app, server);

/*** =======================================* Server lifecycle: auth set

*/ this.emit(this.LifeCycle.auth, app, server);

return server;};

In the server module's file, keyword indicates to Jumpstart that this is the server module.package.json express-server

{ "name": "my-server", "keywords": [ "express-server" ]}

Jumpstart

14

The HPE Propel Jumpstart application uses the  module as its module.@propel/idm-express express-server

Jumpstart Middleware Module ( keyword)express-middleware

A middleware module typically encapsulates a single problem domain, for example, a set of REST APIs or mounting a static asset. Middlewaremodule syntax can export a function or export a hash of functions.

Exporting a function from a middleware module

module.exports = function () { this.on('init', function (app) { app.use(express.static(path.resolve(__dirname, 'public_assets'))); }.bind(this)); this.on('auth', function (app) { app.use(express.static(path.resolve(__dirname, 'private_assets'))); }.bind(this));}

Exporting a hash from a middleware module

The following syntax exports a hash of functions, with the keys being the name of each lifecycle event being emitted by the Jumpstart servermodule. Each function must have signature

function (app) { ...}

where app is a reference to the instantiated Express.js instance exported by the Jumpstart server (express-server keyword) module.

Note: The following code achieves the same results as the code above. Because this syntax is more concise and easier to read, it isrecommended. 

module.exports = { init: function (app) { app.use(express.static(path.resolve(__dirname, 'public_assets'))); }, auth: function (app) { app.use(express.static(path.resolve(__dirname, 'private_assets'))); }}

 

Mounting Jumpstart middleware modules

Once you have defined a middleware module, you will need to mount, or inject it, into the server module.

Jumpstart will dynamically inject/mount the middleware module onto the server module. You simply add the middleware module as dependency inyour application’s .package.json

Following is a sample for a Jumpstart application:package.json

Jumpstart

15

{ "name": "my-application", "dependencies": { "my-server": "<link_to_server>" // Jumpstart Server Module "some-module": "<link_to_module>" // Jumpstart Middleware Module }}

Middleware modules have as part of their  in . Middleware module generators automaticallyexpress-middleware keywords package.jsoninclude this keyword.

Following is a sample for middleware module:package.json

{ "name": "some-module", "keywords": [ "express-middleware", "jumpstart-configurable", // this module exports a set of configuration ... ]}

 

The loader context

In both types of middleware modules, functions are invoked with loader context object, . It allows each middleware module to access thethisshared assets during the server instantiation.

Following is example code on using the loader context:

module.exports = { session: function (server) { var serverConfig = this.config.getConfig('server'); // returns a configurationdenoted by 'server' server.use(express.static(path.resolve(__dirname, serverConfig.assetPath))); }}

 

Module configuration

Jumpstart provides a method for collecting user input for module configuration. Configurable module(s) are identified by the keyword in their .jumpstart-configurable package.json files

{ "name": "some-module", "keywords": [ "jumpstart-configurable" ... ]}

Keyword indicates to Jumpstart that this module exports a set of user configurable values.jumpstart-configurable

Jumpstart

16

Each module is responsible for defining and exporting its configuration, if any. For example, if a module needs a session timeout value from theuser, it must define and export this configuration.

Configuration is defined and exported as follows:

some-module\ config\ index.js package.json index.js

By default, Jumpstart looks for configuration information in the folder. You can specify a custom path to the configuration information byconfigappending it to the keyword as shown here:jumpstart-configurable

{ "name": "custom-module", "keywords": [ "jumpstart-configurable:myConfig/content" ... ]}

In this example, Jumpstart will try to load the configuration settings by resolving the path < , which couldcustom-module>/myConfig/contentbe a or an npm package folder.content.js

Jumpstart uses to define and export the module configuration. Inquirer.js

Referring back to the earlier example on prompting the user for the session timeout value, might look as follows:config/index.js

'use strict'; // use a helper library for validating the inputvar validator = require('validator'); module.exports = [{ type: 'input', name: 'sessionTimeout', message: 'Please enter the session timeout value (in milleseconds)', default: 1800000, validate: function(answer) { if (validator.isNumeric(answer)) { answer = answer * 1; return (answer > 0) ? true : false; } else { return false; } }}];

Note: You can specify a default value as well as validate the user inputs.

Run the following command from the Jumpstart generated application to launch configuration After configuration is done,gulp config. 

Jumpstart will generate an file that includes all user inputs.app.json

Jumpstart

17

{ "some-module": { "sessionTimeout": 600000 }}

 The namespace for each module will be based on the module name. Specify a different namespace, by exporting the name from the :config/index.js file as shown here

'use strict';

module.exports = [ // options];

module.exports.packageName = 'cool-module';

  :The generated app.json will look as follows

{ "cool-module": { "sessionTimeout": 600000 }}

In each module, you can enable a module to access its own configuration by doing the following:

'use strict';

module.exports = function() { var pkg = require('./package'); // loads the package.json var opts = this.config.getConfig(kg.name); // or you can do the following // var opts = this.config.getConfig('cool-module'); // `opts` now has the user defined configuration for this module ...}

Jumpstart Modularization on UIJumpstart allows you to build a single-page web application as a collection of modules. There are three types of UI modules you can define andimplement. They are defined and managed via in the same ways server modules are defined and managed via .bower.json package.json

Note: Jumpstart currently only supports Angular.js.

UI module types include:

angular-uijumpstart-assetangular-template

Jumpstart

18

Jumpstart Angular UI module (angular-ui keyword)

A module with keyword contains the javascript logic of Angular.js. The keyword is optional; this is a valid Jumpstartangular-ui angular-uiangular-ui module. Following is an example module definition in bower.json to create a UI as a module in Jumpstart.

{ "name": "my-module-ui", "version": "0.0.1", "keywords": [ "angular-ui", ... ], "main": [ // NOTE: you need to explicitly include all the .js files that you wish to beexpose in dependent order "app/index.js", "app/overview.service.js", "app/overview.ctrl.js", ... ]}

 

The following is the Jumpstart module structure. Note that the Angular.js code filesangular-ui (overview.ctrl.js, overview.service.js and index.js) have been specified in the main property in the bower.json file.

my-module-ui app my-module.ctrl.js my-module.service.js index.js bower.json package.json ...

Jumpstart asset module (jumpstart-asset keyword)

A module containing keyword allows you to expose static assets on a Jumpstart application - images, fonts, and so on. A jumpstart-asset module is expected to have a directory named  that contains all static assets you want to serve through the hostingjumpstart-asset assets

Jumpstart application. You do not need to specify each file as part of the   property in bower.json; all files in the folder will bemain assetsaccessible publicly once the Jumpstart application starts.

Since all modules that implement  share the same mounting path , it is recommended you wrap assets in a folderjumpstart-asset /assetsnamed after your module as a way to avoid file path collision with assets from other jumpstart-asset modules.

To extend the previous example to also implement jumpstart-asset the module definition looks as follows in bower.json, :

{ "name": "my-module-ui", "version": "0.0.1", "keywords": [ "angular-ui", "jumpstart-asset", ... ]}

Jumpstart

19

The module structure will look as follows:

my-module-ui app/... assets my-module // using a directory name after your module create a context for yourfiles fonts images logo.png ... bower.json package.json ...

All of the content under the assets folder will be mounted on the server as a static content.

Jumpstart Angular template (angular-template keyword)

A module containing keyword encapsulates all HTML templates for Jumpstart UI module (  keyword). Similarangular-template angular-uito , modules that implement would have a directory named   directly under the root of thejumpstart-asset angular-template templatesmodule folder. All .html files would automatically be considered Angular.js template files; you do not need to further specify individual files inbower.json. It is recommended you wrap template files in a directory named after your module to avoid collision of template files served from othermodules.

Note that all template files are required to reside under one root folder and apart from their associated .js files.

Let's extend the previous example as follows to include template files.

{ "name": "my-module-ui", "version": "0.0.1", "keywords": [ "angular-ui", "jumpstart-asset", "angular-template", ... ]}

The module structure will look as follows:

my-module-ui app/... assets/... templates my-module overview.html bower.json package.json ...

The following demonstrates how my-module-ui/app/index.js references the template files. This example uses   angular-ui-router .

Jumpstart

20

angular.module("my-module", []) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $urlRouterProvider .when('', '/overview') .when('/', '/overview') .otherwise('');

$stateProvider .state('app.overview', { url: '/overview', templateUrl: '/templates/my-module/overview.html', // NOTE: This is therelative path to your template file, starting from the root of your module. (but beginwith a '/') controller: 'overviewCtrl' }); }) ...

  

The following shows how   my-module-ui/templates/my-module/overview.html uses the asset my-module/assets/my-module/images/logo.png:

<header> <img src="/assets/my-module/images/logo.png"> <!-- Note: this is the relative path to your asset file, starting from the root ofyour module. (but begin with a '/') --></header>...

As shown, you use the relative path to your template/asset file to reference a template/asset file, starting from the root of a module. The referencepath should always begin with a ' ./'

We can separate our example module and still use the same reference path. If we split our module so that assets content is in its own module, theasset module would look as shown here:

my-module-assets assets/... bower.json package.json ...

Its would be as shown here: bower.json

{ "name": "my-module-assets", "version": "0.0.1", "keywords": [ "jumpstart-asset", ... ]}

The remaining module would be structured as follows:

Jumpstart

21

my-module-ui app/... templates/... bower.json package.json ...

Its bower.json would be as follows:

{ "name": "my-module-ui", "version": "0.0.1", "keywords": [ "angular-ui", "angular-template", ... ]}

Extending HPE Propel Launchpad

Jumpstart Guide on Extending HPE Propel Launchpad

This guide provides information on how you can create your own interface and integrate it with HPE Propel Launchpad.

Jumpstart Guide on Extending HPE Propel LaunchpadOverviewApplication StructurePrerequisite Configuration SetupCreating new Jumpstart moduleBuilding with your new Jumpstart module

Jumpstart Setup on Production EnvironmentDeploying your new Jumpstart module (Example)

Jumpstart Modules Deployment (i.e. RSS interface) under Production Environment

Overview

HPE Propel Launchpad (Launchpad) is built using HPE Propel Jumpstart (Jumpstart). This enables Launchpad to be "extended" - partners andcustomers can build their own new user interface and integrate it into Launchpad. 

Launchpad, in essence, is comprised of a collection of bower and npm modules. bower modules refer to any code that will execute on thebrowser; npm modules refer to any code that will execute on the Node.js. Partners and customers can create their own bower module(s) or npmmodule(s) and integrate them into Launchpad using Jumpstart.

Application Structure

HPE Propel Launchpad is structured as follows:

Jumpstart

22

// Propel Launchpad Basic Structure

app.json bin start.js stop.js bower.json bower_components // bower dependencies conf dashboard.json endpoints.json gulpfile.js logs node_modules // npm dependencies package.json

app.json - configuration file for the Launchpad application (contains configurations for all underlying modules)bin - contains scripts for starting and stopping the Launchpad applicationbower.json - bower configuration file for listing all bower dependencies ( ) used for Launchpadofficial specificationbower_components - directory that contains all bower modules dependenciesconf - folder that contains the business configuration filesgulpfile.js - used for invoking gulp taskslogs - folder that holds log filesnode_modules - folder that holds all npm modules dependenciespackage.json - npm configuration file for listing all npm modules dependencies ( ) used for Launchpadofficial specification

New bower modules will be placed in the  folder. New npm modules will be placed in the  folder.bower_components node_modules

Prerequisite Configuration Setup

Add following line to your   file:~/.npmrc

@propel:registry=https://propelrepo.com:443/artifactory/api/npm/jumpstart/proxy=http://web-proxy.sdd.hp.com:8088

Note: This tells   to go to HPE Propel's private   repository for all   modules namespaced with npm npm npm @propel.

Add the following to your file:~/.gitconfig

[http] proxy = http://web-proxy.sdd.hp.com:8088 sslVerify = false[https] proxy = http://web-proxy.sdd.hp.com:8088[url "https://github.com"] insteadOf = git://github.com

Note: You need to refer to your own proxy hostname/port (if HPE's proxy settings is not applicable)

Creating new Jumpstart module

To create a Jumpstart module (bower and/or npm), we can use the Jumpstart yeoman generator.

Before installing the Jumpstart yeoman generator, execute the following command to install yo and gulp

Jumpstart

23

npm install -g yo gulp

To install Jumpstart yeoman generator, do the following:

npm install -g @propel/generator-jumpstart

Now you can generate a Jumpstart bower or npm module by running the following command:

yo @propel/jumpstart

You can follow the CLI to create a Jumpstart UI module or a Jumpstart server module (example screenshot follows).

Building with your new Jumpstart module

Jumpstart Setup on Production Environment

We need to use the core Jumpstart engine to integrate and test the new Jumpstart module.

Please follow the instructions below to install Jumpstart engine on the HPE Propel Launchpad application.

Jumpstart

24

Create   under Launchpad's home directory (typically  ) and copy the content below:gulpfile.js /opt/hp/propel/launchpad

'use strict';var gulp = require('gulp');require('@propel/jumpstart-engine-angular-express-sass').expressAndAngular();// Enable gulp tasks for packagingrequire('@propel/gulp-jumpstart-web-packager')();require('@propel/gulp-jumpstart-archiver')(); gulp.task('default', ['serve']);

Deploying your new Jumpstart module (Example)

Jumpstart Modules Deployment (i.e. RSS interface) under Production Environment

For example, let's say you have a Bower Jumpstart module called rss-client and NPM Jumpstart module called rss-msvc. 

Place the  under rss-client /opt/hp/propel/launchpad/bower_componentsPlace the  under rss-msvc /opt/hp/propel/launchpad/node_modules/@propel

: You can also install this module easily by running:Note

npm install @propel/rss-msvc

Once you place these modules in the appropriate locations, please add the following section to as follows (this is the configurationapp.json

required from module):rss-msvc

"rss": { "mount": "/api", "rssConfigDir": "conf/", "rssConfig": "rss.json", "rssConfigOrg": "rss.{orgName}.json" },

Place the following configuration under (under ):conf/dashboard.json  sections

{ "id": "dashboard-tile_rss", "label": "Hot News", "role": ["CONSUMER", "SUPPORT"], "backgroundImage": "assets/propel-endpoints/images/app-news.png", "link": "https://<PUT_YOUR_HOSTNAME_HERE>:9000/rss"},

Place the following configuration under (defines the RSS feeds):conf/rss.json

From HPE Propel Launchpad's home directory (typically  ), run the following commands to install/opt/hp/propel/launchpadcore devDependencies:npm install gulpnpm install @propel/gulp-jumpstart-web-packagernpm install @propel/gulp-jumpstart-archivernpm install @propel/jumpstart-engine-angular-express-sass

Contact your HPE representative for access to rss-client and rss-msvc modules.

Jumpstart

25

[ "http://rss.cnn.com/rss/cnn_topstories.rss", "http://sports.espn.go.com/espn/rss/news", "http://www8.hp.com/us/en/hp-news/newsroom-rss.jsp"]

Now, let's repackage the browser content and restart the server:

// repackage the browser contentgulp dist

// restart the launchpadservice launchpad stopservice launchpad start

Launchpad should now be up and running with the new RSS interface. 

Jumpstart