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”
Good frameworks make
you write less code
Agenda
• Part 1 

- Create a Spring Boot REST service

- Create a Web client with Angular CLI

- Deploy the Angular app un...
What’s Spring Boot?
An opinionated framework that generates 

pre-configured bootable Java/Spring projects
https://start.sp...
Our Spring Boot Controller
@RestController

@RequestMapping("/api")

public class ProductController {



Product products[...
Demo
• Create a new Spring Boot App called server
• Declare a REST endpoint for products
What’s Angular?
A platform for developing of the front end for Web apps
What’s Angular CLI?
An opinionated tool that generates and builds 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
• Gradle
• Docker
• My SQL
• H2
• Liquibase
• JDL Studio
• Webpack
• SwaggerU...
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...
JHipster pros
• Generates a working Angular/Spring Boot in minutes
• Automates the manual work
• Shows best practices
• Si...
JHipster cons
• You have to be a full stack developer to understand the tooling
• The generated app may have more features...
Getting started
• Download and install node.js from https://nodejs.org
• Install the Yarn package manager

npm install yar...
JHipster can generate
• A monolithic app (Angular inside the WAR)
• Microservices app (Angular outside the WAR)
Monolithic architecture
An Angular app is packaged in a WAR file
Angular

app
User
Spring Boot



Java
Running the app
• Spring Boot app with the deployed Angular app: 

./mvnw



http://localhost:8080

• Webpack server for t...
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
JHipster microservices infrastructure
This diagram is taken from https://jhipster.github.io/microservices-architecture
nginx.conf

with proxies
Angular

app
Google

maps

APIs
User
NGINX Web Server
Spring
Boot

instances

Another

Service

W...
Adding entities with JDL-Studio
1.Define
2.Download

to a file
A sample diagram from https://gist.github.com/mraible
Importing entities
• Importing a model created in the JDL studio:



yo jhipster:import-jdl ~/Downloads/jhipster-blog.jh 
...
Demo

generating entities
Deployment options
• Heroku
• AWS
• CloudFoundry
• Kubernetes
• Docker
• OpenShift
• Rancher
Links
• A simple Spring Boot app serving 3
products:

https://github.com/yfain/springboot
• Using Angular with JHipster (d...
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

3.016 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
  • 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. Good frameworks make you write less code
  4. 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. 5. What’s Spring Boot? An opinionated framework that generates 
 pre-configured bootable Java/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 • Create a new Spring Boot App called server • Declare a REST endpoint for products
  8. 8. What’s Angular? A platform for developing of the front end for Web apps
  9. 9. What’s Angular CLI? An opinionated tool that generates and builds 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 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. 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 • Gradle • Docker • My SQL • H2 • Liquibase • JDL Studio • Webpack • SwaggerUI • 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, 7K stars on GitHub, 330 contributors
  19. 19. JHipster pros • Generates a working Angular/Spring Boot in minutes • Automates the manual work • Shows best practices • Simplifies cloud deployment
  20. 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. 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. 22. JHipster can generate • A monolithic app (Angular inside the WAR) • Microservices app (Angular outside the WAR)
  23. 23. Monolithic architecture An Angular app is packaged in a WAR file Angular
 app User Spring Boot
 
 Java
  24. 24. 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

  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. JHipster microservices infrastructure This diagram is taken from https://jhipster.github.io/microservices-architecture
  29. 29. 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
  30. 30. Adding entities with JDL-Studio 1.Define 2.Download
 to a file A sample diagram from https://gist.github.com/mraible
  31. 31. 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
  32. 32. Demo
 generating entities
  33. 33. Deployment options • Heroku • AWS • CloudFoundry • Kubernetes • Docker • OpenShift • Rancher
  34. 34. 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

×