using jhipster for generating angular/spring boot apps
TRANSCRIPT
Using JHipster for generating Angular/Spring Boot apps
Yakov FainFarata Systems
yfainAugust 29, 2017
About myself
• Angular practice lead at Farata Systems
• Java Champion
• Latest book:“Angular 2 Development with TypeScript”
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
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[] = 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; }}
@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’sendpoint
Configuring a proxyfor dev mode
CLI dev server
4200
Spring Boot server
with data on products
8080
Angular app in Web browser
Angular App
• 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
{ "/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 4200and redirected
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
staticresources
Spring Boot app
Bundled Angular app
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
Why use JHipster?
• Generates a working Angular/Spring Boot in minutes
• Automates the manual work
• Shows best practices
• Simplifies cloud deployment
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
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)
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
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
Angular and Javain the same project
Angular dependencies
Java dependencies
Java sources
Angular sources
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
./mvnw - start the server yarn install - install Angular dependencies yarn start - serve Angular client with hot reload
Running a monolithic app in dev
Angularwith proxy
UserAngular CLI dev server
localhost:9000 Java
SpringBoot
localhost:8080
Internationalizationng2-translate
<h1 class="display-4" jhiTranslate="home.title">Welcome, Java Hipster!</h1> <p class="lead" jhiTranslate="home.subtitle">This is your homepage</p>
Importing entities
• Importing a model created in the JDL Studio: yo jhipster:import-jdl ~/beers.jh
• Adding an entity interactively: yo jhipster:entity beer
Sample microservices infrastructure
Source: https://jhipster.github.io/microservices-architecture
Gateway 8080
Consul from HashiCorp
8500
User
Angular
Sample microservices infrastructurewith Consul discovery
Microservice 1 8081
Microservice 2 8082
JHipster Registry is an alternative to Consul
To generate a microservices app, run Hipster twice
• Create two directories - one for app and one for gateway
• In app dir:
• In gateway dir:
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