Using JHipster 4 for generating Angular/Spring Boot apps
4 likes3,583 views
The document presents a guide on using JHipster 4 to generate Angular/Spring Boot applications, covering both front-end and back-end development. It includes a step-by-step agenda, discusses the pros and cons of JHipster, and provides examples of creating REST services, deploying applications, and managing entities. Additionally, it outlines deployment options and helpful resources for developers.
![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;
}
}](https://image.slidesharecdn.com/jhipster16x9-170514133341/85/Using-JHipster-4-for-generating-Angular-Spring-Boot-apps-6-320.jpg)
![@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](https://image.slidesharecdn.com/jhipster16x9-170514133341/85/Using-JHipster-4-for-generating-Angular-Spring-Boot-apps-10-320.jpg)
Using JHipster 4 for generating Angular/Spring Boot apps
- 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
- 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