My presentation slides for Spring Days in New York City, June 21 2017

1. Using JHipster 4 for generating
Angular/Spring Boot apps
Yakov Fain
Farata Systems
yfain

2. About myself
• Work for Farata Systems
• Java Champion
• Latest book:
“Angular Development with TypeScript”

3. Agenda
• Part 1
- Start a Spring Boot app that serves products
- Generate a Web client with Angular CLI
- Deploy the Angular app under Spring Boot
• Part 2
- Generate an Angular/Spring Boot app with JHipster
- Monolithic vs Microservices
- Generating entities
- Internationalization

4. Good frameworks make
you write less code

5. What’s Spring Boot?
An opinionated runtime for Spring projects
https://start.spring.io

6. Our Spring Boot Controller
@RestController
@RequestMapping("/api")
public class ProductController {
Product products[] = new Product[3];
ProductController(){
products[0] = new Product(0,"First product", 59.99);
products[1] = new Product(1,"Second product", 12.50);
products[2] = new Product(2,"Third product", 14.40);
}
@RequestMapping(value="products",
method = RequestMethod.GET,
produces= MediaType.APPLICATION_JSON_VALUE)
public Product[] getProducts(){
return products;
}
}

7. Demo
• Start a Spring Boot App from the server dir

8. What’s Angular?
An opinionated platform for developing front-
end of Web apps

9. What’s Angular CLI?
An opinionated tool that generates and
bundles Angular projects

10. @Component({
selector: 'app-root',
template: `<h1>All Products</h1>
<ul>
<li *ngFor="let product of products">
{{product.title}}
</li>
</ul>
`})
export class AppComponent {
products: Array<string> = [];
theDataSource: Observable<string>;
constructor(private http: Http) {
this.theDataSource = this.http.get('/api/products')
.map(res => res.json());
}
ngOnInit(){
this.theDataSource.subscribe( // Get the data from the Spring Boot server
data => this.products=data,
err => console.log(“Got and error. Code: %s, URL: %s ", err.status, err.url));
}
}
Our Angular Client
Server’s
endpoint

11. Demo
Generating a new Angular project called client to
display products

12. scripts": {
"build": "ng build -prod",
"postbuild": "npm run deploy",
"predeploy": "rimraf ../server/src/main/resources/static &&
mkdirp ../server/src/main/resources/static",
"deploy": "copyfiles -f dist/** ../server/src/main/resources/
static"
}
Automating deployment with
npm scripts
static
resources
Spring
Boot app
Bundled
Angular app

13. Adding packages for deployment to
package.json
"copyfiles": "^1.0.0",
"mkdirp": "^0.5.1",
"rimraf": "^2.5.4"

14. Demo
Our Angular app deployed in Spring Boot
Java
Angular

15. When I was young...
I just needed to learn a couple of tools

16. Do you know all these?
• Yeoman
• npm
• Yarn
• Maven
• Gradle
• Docker
• My SQL
• H2
• Liquibase
• JDL Studio
• Webpack
• SwaggerUI
• Consul
• Angular
• Java
• JavaScript
• TypeScript
• Spring
• JWT
• RESTFul Web
services
• JSON
• HTML

17. What’s Yeoman?
An opinionated tool for kickstarting new
Web projects and generating things

18. What’s JHipster?
• An opinionated Yeoman generator to generate,
develop, and deploy Spring Boot + Angular projects
• Docs: https://jhipster.github.io
• 500K downloads, 7300 stars on GitHub, 340 contributors

19. Why use JHipster?
• Generates a working Angular/Spring Boot in
minutes
• Automates the manual work
• Shows best practices
• Simplifies cloud deployment

20. Getting started
• Install node.js from https://nodejs.org
• Install the Yarn package manager
npm install yarn -g
• Install the Yeoman generator
npm install yo -g
• Install the JHipster generator
npm install -g generator-jhipster
• Create a new folder and cd to it
• Run JHipster and answer the questions
jhipster

21. JHipster can generate
• A monolithic app (Angular+Java inside the WAR)
• Microservices app (Angular inside a gateway
app and Java is a separate app)
• Entities for your CRUD app

22. Monolithic architecture
An Angular app is packaged in a WAR file
Angular
User Spring Boot
Java

24. Running a deployed monolithic app
To serve the deployed Angular app:
./mvnw
Angular
User
Spring Boot
Java
localhost:8080

25. To serve Angular client with hot reload:
yarn start
Running a monolithic app in dev
Angular
User
Webpack
dev server
localhost:9060
Java
Spring
Boot
localhost:8080

26. Generating a WAR file
• To package the app in a prod WAR file:
./mvnw -Pprod package
• You’ll get one executable WAR and another for an app
server:
target/hello-0.0.1-SNAPSHOT.war
target/hello-0.0.1-SNAPSHOT.war.original

27. Internationalization
ng2-translate
<h1 class="display-4" jhiTranslate="home.title">Welcome, Java Hipster!</h1>
<p class="lead" jhiTranslate="home.subtitle">This is your homepage</p>
webapp/app/shared/language

28. Demo
generating a monolith app

29. Adding entities with JDL-Studio
1.Define
2.Download
to a file

30. Importing entities
• Importing a model created in the JDL Studio:
yo jhipster:import-jdl ~/beers.jh
• Adding an entity interactively:
yo jhipster:entity beer

31. Demo
generating entities

32. nginx.conf
with proxies
Angular
app
Google
maps
APIs
User
NGINX Web Server
Spring
Boot
instances
Another
Service
Would be nice to have
Feature request: https://github.com/jhipster/generator-jhipster/issues/5754

33. Sample microservices infrastructure
Source: https://jhipster.github.io/microservices-architecture

34. Gateway
8080
Consul
from HashiCorp
8500
User
Angular
Sample microservices infrastructure
with Consul discovery
Microservice 1
8081
Microservice 2
8082

35. To generate a microservices app,
run Hipster twice
• Create two directories - one for app and one for gateway
• In app dir:
• In gateway dir:

36. To start Microservices app
Docker + Consul
• In terminal 1 (Consul on 8500):
docker-compose -f src/main/docker/consul.yml up
• In terminal 2 (backend on 8081):
./mvnw
• In terminal 3 (gateway on 8080)
./mvnw
If you specified a DB during a microservice generation,
start it using docker-compose

37. Deployment options
• Heroku
• AWS
• CloudFoundry
• Kubernetes
• Docker
• OpenShift
• Rancher

38. Links
• Spring Boot app serving 3 products:
https://github.com/yfain/springboot
• Using Angular with JHipster (docs):
https://jhipster.github.io/using-angular
• Angular training inquiries:
training@faratasystems.com
• My blog:
yakovfain.com