Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using JHipster for generating Angular/Spring Boot apps

1,533 views

Published on

Slides from my presentation at the JHipster NYC Meetup

Published in: Technology
  • Be the first to comment

Using JHipster for generating Angular/Spring Boot apps

  1. 1. Using JHipster for generating Angular/Spring Boot apps Yakov Fain Farata Systems
 yfainAugust 29, 2017
  2. 2. About myself • Angular practice lead at Farata Systems • Java Champion • Latest book:
 “Angular 2 Development with TypeScript”
  3. 3. Agenda • Part 1 
 - Start a Spring Boot app that serves products
 - Demo an Web client generated with Angular CLI
 - Running the app in dev and prod modes • Part 2 
 - Generate an Angular/Spring Boot app with JHipster
 - Review of dev mode
 - 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 implements OnInit { products: Array<string> = []; theDataSource: Observable<string>; constructor(private http: HttpClient) { this.theDataSource = this.http.get('/api/products'); } ngOnInit() { // Get the data from the REST server this.theDataSource.subscribe( data => { if (Array.isArray(data)) { this.products = data; } else { this.products.push(data); } }, err => console.log('Can not get products. Error code: %s, URL: %s ', err.status, err.url), () => console.log('Product(s) are retrieved') ); } } Our Angular Client Server’s
 endpoint
  11. 11. Configuring a proxy
 for dev mode CLI dev server 4200 Spring Boot server
 with data on products 8080 Angular app in Web browser Angular App
  12. 12. • In dev mode you can continue running the dev server for the client on port 4200 with ng serve • But our Spring Boot server runs on port 8080 • If the client will do http.get(‘http://localhost:8080/ api/products’), it’ll get No ‘Access-Control-Allow_Origin’:
 Due to the same-origin policy we can configure a proxy on the client or add the header Access-Control-Allow-Origin: * on the server Same origin error
  13. 13. {
 "/api": {
 "target": "http://localhost:8080",
 "secure": false
 }
 } proxy-conf.json Configuring proxy for Angular client The Spring Boot
 server runs here Run the client using proxy:
 ng serve --proxy-config proxy-conf.json Angular client: http.get('/api/products'); goes to 4200
 and redirected
  14. 14. Demo Adding an Angular project called client to display products
  15. 15. 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
  16. 16. Demo
 Our Angular app deployed in Spring Boot Java Angular
  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.tech • 500K downloads, 8K stars on GitHub, 350 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. 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
  21. 21. Two ways to generate an app • Online at https://start.jhipster.tech • Using locally installed yeoman and jhipster-generator In any case, you need to have installed:
 
 - Maven or Gradle
 - Node.js (nodejs.org)
 - Yarn package manager (npm i yarn -g)
  22. 22. Generating an app online • Go to https://start.jhipster.tech • Click on Create Application and fill out the form with options • Download and unzip the generated zip file • The readme.md file has the info on starting in dev and prod modes
  23. 23. ./mvnw yarn start
  24. 24. Generate an app with locally installed JHipster • 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

  25. 25. Angular and Java
 in the same project Angular dependencies Java dependencies Java sources Angular sources
  26. 26. Running a deployed monolithic app in prod Run: ./mvnw -Pprod Angular
 User Spring Boot
 
 Java localhost:8080 .war You’ll need a prod DB, e.g. 
 docker-compose -f src/main/docker/mysql.yml up -d
  27. 27. ./mvnw - start the server
 yarn install - install Angular dependencies yarn start - serve Angular client with hot reload Running a monolithic app in dev Angular
 with proxy
 User Angular CLI
 dev server
 localhost:9000 Java Spring
 Boot
 localhost:8080
  28. 28. 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>
  29. 29. Demo
 generating a monolithic app
  30. 30. Adding entities with JDL-Studio 1.Define 2.Download
 to a file
  31. 31. Importing entities • Importing a model created in the JDL Studio:
 
 yo jhipster:import-jdl ~/beers.jh 
 • Adding an entity interactively:
 
 yo jhipster:entity beer
  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 JHipster Registry is 
 an alternative to Consul
  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 • Angular training/consulting inquiries: training@faratasystems.com • My blog:
 yakovfain.com

×