Using JHipster in Development mode

ALT TEXT

I have been working really hard lately to wrap up my latest course on JHipster. In one of the exercises, I have the students create their own application. In this application, one of the requirements is to make UI changes. When working with Angular you have probably come to expect to see those changes automatically reflected in the browser. In this tutorial, we will look at how to work with JHipster in Development. 

JHipster in Development

I was working on this course and I quickly realized that unless you were familiar with this stack it might be a little confusing to know what to do in development. It is important to remember that we are really working with 2 different applications, Angular & Spring Boot, that work together. When you first start working with JHipster your first thought is to simply run the Spring boot app.

JHipster in Development

Angular Development

At this point, you might try to go into your webapp (Angular) directory, locate the home component and begin making changes to the application. 

JHipster in Development

The problem with this is that any changes you make won't be seen in the browser, even if you reload the page. JHipster gives us a way to work efficiently in development mode.  If you have worked on Angular applications before you might have spun up a server using "npm start" that will watch for any changes and automatically refresh the browser window. JHipster gives us something similar by running the "yarn start" command and you can run it right in your IDE. 

JHipster in Development

From the JHIpster documentation running this command provides us some very impressive features. 

  • As soon as you modify one of your HTML/CSS/TypeScript files, your browser will refresh itself automatically
  • As your testing your application on several different browsers or devices, all your clicks/scrolls/inputs should be automatically synchronized on all screens

This will launch:

JHipster in Development Mode Screencast 

https://www.youtube.com/watch?v=SVUB3Yhv3sQ&t=114s  

Conclusion

I hope this short tutorial shed some light on how to work with JHipster in development. 

_Question: What problems are you facing in your JHipster projects? _

Subscribe to my newsletter.

Sign up for my weekly newsletter and stay up to date with current blog posts.

Weekly Updates
I will send you an update each week to keep you filled in on what I have been up to.
No spam
You will not receive spam from me and I will not share your email address with anyone.