Tweak scripts to run from main dir

Author: Dave Syer

README.md

@@ -1,38 +1,49 @@
+## Install npm Locally
+
+```
+<build>
+    <plugins>
+        <plugin>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-maven-plugin</artifactId>
+        </plugin>
+        <plugin>
+            <groupId>com.github.eirslett</groupId>
+            <artifactId>frontend-maven-plugin</artifactId>
+            <version>1.6</version>
+            <configuration>
+                <nodeVersion>v8.8.1</nodeVersion>
+            </configuration>
+            <executions>
+                <execution>
+                    <id>install-npm</id>
+                    <goals>
+                        <goal>install-node-and-npm</goal>
+                    </goals>
+                </execution>
+            </executions>
+        </plugin>
+        <plugin>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-maven-plugin</artifactId>
+        </plugin>
+    </plugins>
+</build>
+```
+
+then
+
 ```
-    <build>
-        <plugins>
-            <plugin>
-                <groupId>org.springframework.boot</groupId>
-                <artifactId>spring-boot-maven-plugin</artifactId>
-            </plugin>
-            <plugin>
-                <groupId>com.github.eirslett</groupId>
-                <artifactId>frontend-maven-plugin</artifactId>
-                <version>1.6</version>
-                <configuration>
-                    <nodeVersion>v8.8.1</nodeVersion>
-                </configuration>
-                <executions>
-                    <execution>
-                        <id>install-npm</id>
-                        <goals>
-                            <goal>install-node-and-npm</goal>
-                        </goals>
-                    </execution>
-                </executions>
-            </plugin>
-            <plugin>
-                <groupId>org.springframework.boot</groupId>
-                <artifactId>spring-boot-maven-plugin</artifactId>
-            </plugin>
-        </plugins>
-    </build>
+$ mvn generate-resources
+$ ls node*
 ```
 
+## Install Angular CLI
+
 ```
-$ mvn generate-resources
 $ cat > npm
 #!/bin/sh
+cd $(dirname $0)
 PATH="$PWD/node/":$PATH
 node "node/node_modules/npm/bin/npm-cli.js" "$@"
 $ chmod +x npm
@@ -44,22 +55,25 @@ and run `mvn generate-resources` again.
 ```
 $ cat > ng
 #!/bin/sh
+cd $(dirname $0)
 PATH="$PWD/node/":$PATH
 node_modules/@angular/cli/bin/ng "$@"
 $ chmod +x ng
 $ ./ng --version
-    _                      _                 ____ _     ___
+_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
-               |___/
+           |___/
 @angular/cli: 1.4.9
 node: 8.8.1
 os: linux x64
 ```
 
-Now create an angular app:
+## Create an Angular App
+
+Create the app with the CLI and move it to `src/main`:
 
 ```
 $ ./ng new client
@@ -69,38 +83,40 @@ $ sed -i -e 's,dist,../../../target/classes/static,' src/main/client/.angular-cl
 $ mv ng npm src/main/client
 ```
 
+## Building
+
 Add
 
 ```
-                <configuration>
-                    <workingDirectory>src/main/client</workingDirectory>
-                </configuration>
+<configuration>
+    <workingDirectory>src/main/client</workingDirectory>
+</configuration>
 ```
 
 and
 
 ```
-                    <execution>
-                        <id>npm-install</id>
-                        <goals>
-                            <goal>npm</goal>
-                        </goals>
-                        <configuration>
-                            <arguments>install</arguments>
-                        </configuration>
-                    </execution>
+    <execution>
+        <id>npm-install</id>
+        <goals>
+            <goal>npm</goal>
+        </goals>
+        <configuration>
+            <arguments>install</arguments>
+        </configuration>
+    </execution>
 ```
 
 Install the modules again using `mvn generate-resources`.
 
 ```
-$ (cd src/main/client; ./ng version)
-    _                      _                 ____ _     ___
+$ src/main/client/ng version
+_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
-               |___/
+           |___/
 @angular/cli: 1.4.9
 node: 8.8.1
 os: linux x64
@@ -122,13 +138,13 @@ typescript: 2.3.4
 And the tests work:
 
 ```
-$ (cd src/main/client; ./ng e2e.)
+$ src/main/client/ng e2e
 ..
 [13:59:46] I/direct - Using ChromeDriver directly...
 Jasmine started
 
   client App
-    ✓ should display welcome message
+✓ should display welcome message
 
 Executed 1 of 1 spec SUCCESS in 0.718 sec.
 [13:59:48] I/launcher - 0 instance(s) of WebDriver still running
@@ -138,36 +154,44 @@ Executed 1 of 1 spec SUCCESS in 0.718 sec.
 Add
 
 ```
-                    <execution>
-                        <id>npm-build</id>
-                        <goals>
-                            <goal>npm</goal>
-                        </goals>
-                        <configuration>
-                            <arguments>run-script build</arguments>
-                        </configuration>
-                    </execution>
-
+    <execution>
+        <id>npm-build</id>
+        <goals>
+            <goal>npm</goal>
+        </goals>
+        <configuration>
+            <arguments>run-script build</arguments>
+        </configuration>
+    </execution>
 ```
 
 and then the client app will be compiled during the Maven build.
 
+You can build continuously with
+
+```
+$ src/main/client/ng build --watch
+```
+
+Updates are built (quickly) and pushed to `target/classes` where they can be picked up by Spring Boot.
+
+## Adding Bootstrap
+
 https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a
 
 ```
-$ cd src/main/client
-$ ./npm install bootstrap@3 jquery --save
+$ src/main/client/npm install bootstrap@3 jquery --save
 ```
 
 and update `.angular-cli.json` to add the new content:
 
 ```
   "styles": [
-    "styles.css",
-    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
+"styles.css",
+"../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
   "scripts": [
-    "../node_modules/jquery/dist/jquery.min.js",
-    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
+"../node_modules/jquery/dist/jquery.min.js",
+"../node_modules/bootstrap/dist/js/bootstrap.min.js"
   ],
 ```

pom.xml

@@ -81,5 +81,4 @@
         </plugins>
     </build>
 
-
 </project>

src/main/client/ng

@@ -1,3 +1,4 @@
 #!/bin/sh
+cd $(dirname $0)
 PATH="$PWD/node/":$PATH
-node_modules/@angular/cli/bin/ng "$@"
+./node_modules/@angular/cli/bin/ng "$@"

src/main/client/npm

@@ -1,3 +1,4 @@
 #!/bin/sh
+cd $(dirname $0)
 PATH="$PWD/node/":$PATH
 node "node/node_modules/npm/bin/npm-cli.js" "$@"

src/main/client/src/app/app.component.html

@@ -4,7 +4,7 @@ <h1>
     Welcome {{title}}!
   </h1>
   <div class="container">
-    <p>ID: <span>{{data.id}}</span></p>
+    <p>Id: <span>{{data.id}}</span></p>
     <p>Message: <span>{{data.content}}</span></p>
   </div>
 </div>