Download as PDF, PPTX
![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/jhipster-170620184413-170626185301/75/Using-Jhipster-4-for-Generating-Angular-Spring-Boot-Apps-6-2048.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 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](https://image.slidesharecdn.com/jhipster-170620184413-170626185301/75/Using-Jhipster-4-for-Generating-Angular-Spring-Boot-Apps-10-2048.jpg)
Uploaded byVMware Tanzu
Using Jhipster 4 for Generating Angular/Spring Boot Apps
The document discusses using JHipster 4 to generate Angular/Spring Boot applications, providing an overview of setting up a Spring Boot app to serve products and creating an Angular client. It details the advantages of JHipster, including rapid generation of both monolithic and microservices architectures, entity creation, and internationalization support. Additionally, it covers deployment options, essential tools for the development process, and includes links for further resources and examples.
More Related Content
Similar to Using Jhipster 4 for Generating Angular/Spring Boot Apps
Using Jhipster 4 for Generating Angular/Spring Boot Apps
- 1. Using JHipster 4for generating Angular/Spring Boot apps Yakov Fain Farata Systems yfain
- 2. About myself • Workfor Farata Systems • Java Champion • Latest book: “Angular Development with TypeScript”
- 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. Good frameworks make youwrite less code
- 5. What’s Spring Boot? Anopinionated runtime for Spring projects https://start.spring.io
- 6. Our Spring BootController @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 • Start aSpring Boot App from the server dir
- 8. What’s Angular? An opinionatedplatform for developing front- end of Web apps
- 9. What’s Angular CLI? Anopinionated tool that generates and bundles Angular projects
- 10. @Component({ selector: 'app-root', template: `<h1>AllProducts</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. Demo Generating a newAngular project called client to display products
- 12. scripts": { "build": "ngbuild -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 fordeployment to package.json "copyfiles": "^1.0.0", "mkdirp": "^0.5.1", "rimraf": "^2.5.4"
- 14. Demo Our Angular appdeployed in Spring Boot Java Angular
- 15. When I wasyoung... I just needed to learn a couple of tools
- 16. Do you knowall 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. What’s Yeoman? An opinionatedtool for kickstarting new Web projects and generating things
- 18. What’s JHipster? • Anopinionated 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. Why use JHipster? •Generates a working Angular/Spring Boot in minutes • Automates the manual work • Shows best practices • Simplifies cloud deployment
- 20. Getting started • Installnode.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. 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. Monolithic architecture An Angularapp is packaged in a WAR file Angular User Spring Boot Java
- 24. Running a deployedmonolithic app To serve the deployed Angular app: ./mvnw Angular User Spring Boot Java localhost:8080
- 25. To serve Angularclient with hot reload: yarn start Running a monolithic app in dev Angular User Webpack dev server localhost:9060 Java Spring Boot localhost:8080
- 26. Generating a WARfile • 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.
- 29. Adding entities withJDL-Studio 1.Define 2.Download to a file
- 30. Importing entities • Importinga model created in the JDL Studio: yo jhipster:import-jdl ~/beers.jh • Adding an entity interactively: yo jhipster:entity beer
- 31.
- 32. nginx.conf with proxies Angular app Google maps APIs User NGINX WebServer Spring Boot instances Another Service Would be nice to have Feature request: https://github.com/jhipster/generator-jhipster/issues/5754
- 33. Sample microservices infrastructure Source:https://jhipster.github.io/microservices-architecture
- 34. Gateway 8080 Consul from HashiCorp 8500 User Angular Sample microservicesinfrastructure with Consul discovery Microservice 1 8081 Microservice 2 8082
- 35. To generate amicroservices app, run Hipster twice • Create two directories - one for app and one for gateway • In app dir: • In gateway dir:
- 36. To start Microservicesapp 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
- 37. Deployment options • Heroku •AWS • CloudFoundry • Kubernetes • Docker • OpenShift • Rancher
- 38. Links • Spring Bootapp 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