Simple persistent development setup (#1317)

.gitignore

@@ -16,3 +16,5 @@ tmp-*
 # WhiteSource
 whitesource.config.json
 plugin*.js
+core/dev-tools/latest_build.log
+core/dev-tools/simple-app

core/README.md

@@ -37,7 +37,20 @@ The `lerna run bundle` command runs the `bundle` script in every package referen
 
 You can see the Luigi Core in action by running the [Angular example application](/test/e2e-test-application).
 
+### Build and watch with a simple development environment
 
+Use the following steps, if you want to have a simpler development environment with less output and not the full-blown e2e application. This becomes handy if you want to debug a certain scenario where you already have a luigi configuration snippet.
+
+1. Install dependencies. 
+    ```bash
+    npm install
+    ```
+2. Run webserver with live reload.
+    ```bash
+    npm run simpledev
+    ```
+
+This will create (or use, if already existing) a simple luigi app under /dev-tools/simple-app where you can make changes according to your needs.
 
 <!-- 3. Serve public directory
 Distribution files generated by `lerna run bundle` and `lerna run bundle` are stored in `core/public` folder. 

core/dev-tools/simpledev.js

@@ -0,0 +1,108 @@
+const liveServer = require("live-server");
+const webpack = require('webpack');
+const fs = require('fs-extra');
+const webpack_compiler = webpack(require('../webpack.config'));
+
+let logo_ascii = `
+                              //
+                        /////   /////
+                   /////             /////
+              /////                       /////
+         ////                                   ////
+      //                                            *//
+     //                        ////                   //
+     //                     ////////                  //
+    //                    ////////   ///               //
+    //                 ////////   ////////             //
+   //                ////////   ////////   //           //
+  //              ////////   ////////    ///////        ///
+  //            ////////   ////////   ////////           //
+ //          ////////   ////////    ////////              //
+ //            ////////   ////   ////////                 //
+ //              ////////      ////////                   //
+  ///               ////////   /////                    ///
+    ///               ////////                         ///
+      ///                //////                     ///
+        ///                //                     ///
+          ///                                   ///
+            ///                               ///
+              ///                           ///
+                /////////////////////////////
+
+
+
+
+        ///                    ///               ///
+        ///
+        ///        ///    ///  ///   ////////    ///
+        ///        ///    ///  ///   ///   ///   ///
+        ///        ///    ///  ///    /////      ///
+        /////////  ////// ///  ///   /////////   ///
+                                    ///     ///
+                                      //////
+
+`;
+console.log('\x1b[32m', logo_ascii,'\x1b[0m');
+
+const rootPath = './dev-tools/simple-app';
+const indexPath = rootPath + '/index.html';
+try {
+  if (fs.existsSync(indexPath)) {
+    console.log('\x1b[32mFound ' + indexPath,'\x1b[0m');
+  } else {
+    console.log('\x1b[33mCould not find ' + indexPath, '\nInitializing new minimalistic Luigi app from template...','\x1b[0m');
+    if (!fs.existsSync(rootPath)) {
+      fs.mkdirSync(rootPath);
+    }
+    fs.copy('./dev-tools/templates/simple', rootPath);
+    console.log('\x1b[32mNew Luigi app created under ' + rootPath,'\x1b[0m');
+  }
+} catch(err) {
+  console.error(err)
+}
+
+webpack_compiler.hooks.watchRun.tap('CLI output', () => {
+  console.log('\x1b[33mWebpack [' + new Date().toLocaleTimeString() +']: ', ' Rebuild in progress...','\x1b[0m');
+});
+
+const watching = webpack_compiler.watch({
+  aggregateTimeout: 300,
+  poll: undefined,
+  logLevel: 'verbose'
+}, (err, stats) => {
+  if (err) {
+    console.error(err.stack || err);
+    if (err.details) {
+      console.error(err.details);
+    }
+    return;
+  }
+
+  if(stats.hasErrors()) {
+    console.log('\x1b[33mWebpack [' + new Date().toLocaleTimeString() +']: ','\x1b[31m', "Rebuild of Luigi core failed! \n",
+      stats.toString({
+      all: false,
+      errors: true,
+      colors: true,
+
+    }));
+  } else {
+    console.log('\x1b[33mWebpack [' + new Date().toLocaleTimeString() +']: ','\x1b[32m', 'Luigi core rebuilt without errors.\n','\x1b[0m');
+  }
+});
+
+var params = {
+	port: 4100,
+	host: "0.0.0.0",
+	root: rootPath,
+	open: false,
+	watch: ['./dev-tools'],
+	file: "index.html",
+	wait: 1000,
+	mount: [['/public', './public']],
+	logLevel: 0
+};
+
+
+liveServer.start(params);
+console.log('\x1b[32mStarting live-server at','\x1b[36m','http://localhost:' + params.port,'\x1b[0m');

core/dev-tools/templates/simple/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<title>Luigi Simple Dev</title>
+	<link rel='stylesheet' href='/public/luigi.css'>
+  <meta charset="utf-8">
+</head>
+
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script src="/public/luigi.js"></script>
+	  <script src="/luigi-config.js"></script>
+
+</body>
+
+</html>

core/dev-tools/templates/simple/luigi-config.js

@@ -0,0 +1,19 @@
+Luigi.setConfig({
+  navigation: {
+      nodes: [{
+          pathSegment: 'home',
+          hideFromNav: true,
+          hideSideNav: true,
+          loadingIndicator: {
+            enabled: false
+          },
+          viewUrl: '/microfrontend.html'
+      }],
+  },
+  settings: {
+      responsiveNavigation: 'Fiori3',
+      header: {
+          title: 'Luigi Simple Dev'
+      }
+  }
+});

core/dev-tools/templates/simple/microfrontend.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<title></title>
+	<meta charset="utf-8">
+  <link href="/public/luigi.css" rel="stylesheet">
+
+  <style>
+    body {
+      font-family: var(--sapFontFamily);
+      text-align: center;
+      color: #515559;
+    }
+  </style>
+</head>
+
+<body>
+	<div>
+		<h1>Luigi Simple Development Template</h1>
+		<p>Some content</p>
+	</div>
+</body>
+
+</html>