Minor improvements

1. This add instructions while installing dependencies.
2. Improves instructions in TODO.md.
3. Fix a bug that made webpack failed to make bundle.js.

generators/app/index.js

@@ -358,6 +358,19 @@ module.exports = class extends Generator {
       bower: false,
       yarn: false
     });
+    this.log(
+      `While we install the dependencies, you can read the next steps - \n1. Write the code for your component, instructions are in ${chalk.yellow(
+        "src/index.js"
+      )}.\n2. Add css styles to your component in ${chalk.yellow(
+        "src/style"
+      )}.less.\n3. Run ${chalk.yellow(
+        "npm run less && npm run build"
+      )}.\n4. Use your component in ${chalk.yellow(
+        "examples/index.html"
+      )}.\n5. Test your component using ${chalk.yellow(
+        "npm start"
+      )}.\n\nYou can read the detailed instructions in TODO.md.\n`
+    );
   }
 };
 

generators/app/templates/TODO.md

@@ -15,7 +15,16 @@ produced the basic files needed for your tool. You'll still need to handle the i
   },```
 - [] add any css styles to [src/style.less](src/style.less)
 
-All those done? Brilliant! To push this component to npm, you'll need an [account at npmjs.com](https://www.npmjs.com/). Once you've signed up....
+Run the commands written below in the given order - 
+1. `npm run less`
+2. `npm run build`
+3. `npm start`
+
+Navigate to the `examples` page and check if your component is working.
+
+All those done? Now anybody can use your Web Component by importing the [bundle.js](dist/bundle.js) file in the [dist](dist) directory and [style.css](dist/style.css) if you have a stylesheet.
+
+Brilliant! To push this component to npm, you'll need an [account at npmjs.com](https://www.npmjs.com/). Once you've signed up....
 
 1. Run `npm login` in your terminal to sign in to npm. Add your username and password when prompted.
 2. Run `npm publish` - this step will publish your app onto the public npm repository.

generators/app/templates/src/index.js

@@ -1,4 +1,3 @@
-import 'hybrids/shim';
 import {
   define
 } from 'hybrids';
@@ -63,13 +62,18 @@ function initComponent(options) {
       /** you have a gene visualisation so you want a gene id  **/
       /** as a parameter, set the parameter as an attribute,   **/
       /** and then get the attribute from host, like this:     **/
-      var myGeneId = host.getAttribute("geneId");
+
+      var myGeneId = host.getAttribute("geneId"); 
+
       /** The line above would return BRCA1 if you've left the **/
       /** default settings. Delete if needed. **/
+      /** This is just an example, you should remove it later. **/
 
       host.innerHTML = "<div>A placeholder for a pretty" +
         " visualisation for " + myGeneId + ".</div>";
 
+      /** The line above explains how you can interact with your Web Component. **/
+      /** You should remove it later. **/
 
       //leave this line here. Deleting it will result in your css going AWOL.
       addStylesIfNeeded();