JHipster 4 is an open-source code generator that allows you to automate generation and configuration of the Web project that uses the latest version of Angular on the front and Spring framework on the back. Over the next year, Angular/Spring combination will become a valuable addition to the skill set of any enterprise Java developer. In this presentation, you’ll see how to jump-start a Web project with JHipster.

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. Good frameworks make
you write less code

4. Agenda
• Part 1
- Create a Spring Boot REST service
- Create 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

5. What’s Spring Boot?
An opinionated framework that generates
pre-configured bootable Java/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
• Create a new Spring Boot App called server
• Declare a REST endpoint for products

8. What’s Angular?
A platform for developing of the front end for Web apps

9. What’s Angular CLI?
An opinionated tool that generates and builds 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 REST server
data => this.products=data,
err => console.log(“Got and error. Code: %s, URL: %s ", err.status, err.url));
}
}
Our Angular Client
Server
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
• Gradle
• Docker
• My SQL
• H2
• Liquibase
• JDL Studio
• Webpack
• SwaggerUI
• 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, 7K stars on GitHub, 330 contributors

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

20. JHipster cons
• You have to be a full stack developer to understand the tooling
• The generated app may have more features than you need

21. Getting started
• Download and 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

22. JHipster can generate
• A monolithic app (Angular inside the WAR)
• Microservices app (Angular outside the WAR)

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

25. Running the app
• Spring Boot app with the deployed Angular app:
./mvnw
http://localhost:8080
• Webpack server for the client and Spring Boot as REST API:
yarn start
http://localhost:4200

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. JHipster microservices infrastructure
This diagram is taken from https://jhipster.github.io/microservices-architecture

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

31. Adding entities with JDL-Studio
1.Define
2.Download
to a file
A sample diagram from https://gist.github.com/mraible

32. Importing entities
• Importing a model created in the JDL studio:
yo jhipster:import-jdl ~/Downloads/jhipster-blog.jh
• Adding an entity interactively:
yo jhipster:entity blog

33. Demo
generating entities

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

35. Links
• A simple Spring Boot app serving 3
products:
https://github.com/yfain/springboot
• Using Angular with JHipster (docs):
https://jhipster.github.io/using-angular
• Our company: faratasystems.com
• My blog:
yakovfain.com