Using JHipster for generating Angular/Spring Boot apps

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

Good frameworks make you write less code

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; }}

Demo

• Start a Spring Boot App from the server dir

What’s Angular?

An opinionated platform for developing front-end of Web apps

What’s Angular CLI?

An opinionated tool that generates and bundles Angular projects

@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

DemoAdding an Angular project called client to display products

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

DemoOur Angular app deployed in Spring Boot

Java

Angular

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

• 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

./mvnw

yarn start

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>

Demogenerating a monolithic app

Adding entities with JDL-Studio

1.Define2.Download

to a file

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

Deployment options• Heroku

• AWS

• CloudFoundry

• Kubernetes

• Docker

• OpenShift

• Rancher

Links

• Angular training/consulting inquiries: [email protected]

• My blog:yakovfain.com