Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Using JHipster 4 for generating
Angular/Spring Boot apps
Yakov Fain
Farata Systems

yfain
About myself
• Work for Farata Systems
• Java Champion
• Latest book:

“Angular Development with TypeScript”
Agenda
• Part 1 

- Start a Spring Boot app that serves products

- Generate a Web client with Angular CLI

- Deploy the A...
Good frameworks make
you write less code
What’s Spring Boot?
An opinionated runtime for Spring projects
https://start.spring.io
Our Spring Boot Controller
@RestController

@RequestMapping("/api")

public class ProductController {



Product products[...
Demo
• Start a Spring Boot App from the server dir
What’s Angular?
An opinionated platform for developing front-
end of Web apps
What’s Angular CLI?
An opinionated tool that generates and
bundles Angular projects
@Component({
selector: 'app-root',
template: `<h1>All Products</h1>
<ul>
<li *ngFor="let product of products">
{{product.t...
Demo
Generating a new Angular project called client to
display products
scripts": {

"build": "ng build -prod",

"postbuild": "npm run deploy",

"predeploy": "rimraf ../server/src/main/resources...
Adding packages for deployment to
package.json
"copyfiles": "^1.0.0",
"mkdirp": "^0.5.1",
"rimraf": "^2.5.4"
Demo

Our Angular app deployed in Spring Boot
Java
Angular
When I was young...
I just needed to learn a couple of tools
Do you know all these?
• Yeoman
• npm
• Yarn
• Maven
• Gradle
• Docker
• My SQL
• H2
• Liquibase
• JDL Studio
• Webpack
• ...
What’s Yeoman?
An opinionated tool for kickstarting new
Web projects and generating things
What’s JHipster?
• An opinionated Yeoman generator to generate, 

develop, and deploy Spring Boot + Angular projects
• Doc...
Why use JHipster?
• Generates a working Angular/Spring Boot in
minutes
• Automates the manual work
• Shows best practices
...
Getting started
• Install node.js from https://nodejs.org
• Install the Yarn package manager

npm install yarn -g
• Instal...
JHipster can generate
• A monolithic app (Angular+Java inside the WAR)
• Microservices app (Angular inside a gateway
app a...
Monolithic architecture
An Angular app is packaged in a WAR file
Angular

User Spring Boot



Java
Running a deployed monolithic app
To serve the deployed Angular app:



./mvnw

Angular

User
Spring Boot



Java
localhos...
To serve Angular client with hot reload:



yarn start
Running a monolithic app in dev
Angular

User
Webpack

dev server

...
Generating a WAR file
• To package the app in a prod WAR file:



./mvnw -Pprod package
• You’ll get one executable WAR and ...
Internationalization

ng2-translate
<h1 class="display-4" jhiTranslate="home.title">Welcome, Java Hipster!</h1>
<p class="...
Demo

generating a monolith app
Adding entities with JDL-Studio
1.Define
2.Download

to a file
Importing entities
• Importing a model created in the JDL Studio:



yo jhipster:import-jdl ~/beers.jh 

• Adding an entit...
Demo

generating entities
nginx.conf

with proxies
Angular

app
Google

maps

APIs
User
NGINX Web Server
Spring
Boot

instances

Another

Service

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

8080
Consul

from HashiCorp

8500
User
Angular
Sample microservices infrastructure

with Consul discovery
Microse...
To generate a microservices app,

run Hipster twice
• Create two directories - one for app and one for gateway
• In app di...
To start Microservices app 

Docker + Consul
• In terminal 1 (Consul on 8500): 

docker-compose -f src/main/docker/consul....
Deployment options
• Heroku
• AWS
• CloudFoundry
• Kubernetes
• Docker
• OpenShift
• Rancher
Links
• Spring Boot app serving 3 products:

https://github.com/yfain/springboot
• Using Angular with JHipster (docs):

ht...
Using Jhipster 4 for Generating Angular/Spring Boot Apps
Nächste SlideShare
Wird geladen in …5
×

Using Jhipster 4 for Generating Angular/Spring Boot Apps

4.042 Aufrufe

Veröffentlicht am

YAKOV FAIN SOLUTIONS ARCHITECT, FARATA SYSTEMS
JHipster 4 is an open-source code generator that allows you to automate creation and configuration of a Web project that uses the Angular framework on the front and Spring Boot on the back. We'll start with a simple example where an Angular app consumes the REST service from Spring Boot. After that, we'll use JHipster to generate a complete Angular/Spring Boot project.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

Using Jhipster 4 for Generating Angular/Spring Boot Apps

  1. 1. Using JHipster 4 for generating Angular/Spring Boot apps Yakov Fain Farata Systems
 yfain
  2. 2. About myself • Work for Farata Systems • Java Champion • Latest book:
 “Angular Development with TypeScript”
  3. 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. 4. Good frameworks make you write less code
  5. 5. What’s Spring Boot? An opinionated runtime for Spring projects https://start.spring.io
  6. 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. 7. Demo • Start a Spring Boot App from the server dir
  8. 8. What’s Angular? An opinionated platform for developing front- end of Web apps
  9. 9. What’s Angular CLI? An opinionated tool that generates and bundles Angular projects
  10. 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. 11. Demo Generating a new Angular project called client to display products
  12. 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. 13. Adding packages for deployment to package.json "copyfiles": "^1.0.0", "mkdirp": "^0.5.1", "rimraf": "^2.5.4"
  14. 14. Demo
 Our Angular app deployed in Spring Boot Java Angular
  15. 15. When I was young... I just needed to learn a couple of tools
  16. 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. 17. What’s Yeoman? An opinionated tool for kickstarting new Web projects and generating things
  18. 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. 19. Why use JHipster? • Generates a working Angular/Spring Boot in minutes • Automates the manual work • Shows best practices • Simplifies cloud deployment
  20. 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. 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. 22. Monolithic architecture An Angular app is packaged in a WAR file Angular
 User Spring Boot
 
 Java
  23. 23. Running a deployed monolithic app To serve the deployed Angular app:
 
 ./mvnw
 Angular
 User Spring Boot
 
 Java localhost:8080
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. Demo
 generating a monolith app
  28. 28. Adding entities with JDL-Studio 1.Define 2.Download
 to a file
  29. 29. Importing entities • Importing a model created in the JDL Studio:
 
 yo jhipster:import-jdl ~/beers.jh 
 • Adding an entity interactively:
 
 yo jhipster:entity beer
  30. 30. Demo
 generating entities
  31. 31. 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
  32. 32. Sample microservices infrastructure Source: https://jhipster.github.io/microservices-architecture
  33. 33. Gateway
 8080 Consul
 from HashiCorp
 8500 User Angular Sample microservices infrastructure
 with Consul discovery Microservice 1
 8081 Microservice 2
 8082
  34. 34. To generate a microservices app,
 run Hipster twice • Create two directories - one for app and one for gateway • In app dir: • In gateway dir:
  35. 35. 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
  36. 36. Deployment options • Heroku • AWS • CloudFoundry • Kubernetes • Docker • OpenShift • Rancher
  37. 37. 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

×