Using JHipster in Development mode

How to make changes to your Angular component templates in JHipster

I have been working really hard lately to wrap up my latest course on JHipster

JHipster in Development

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 

 

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? 

Hi, I’m Dan Vega. I am a Software Engineer living just outside of one of my favorite places in the world, Cleveland Ohio. I am a self-taught programmer who firmly believes that you can accomplish anything in this life if you put your mind to it, roll up your sleeves and are willing to put in the work.

I have been writing software for over 17+ years now and I use my knowledge, passion, and influence to help other developers achieve their goals. I teach online and currently, have over 22,000 students.

When I am not writing software I have a number of things that really keep me busy. I love to read books, listen to podcasts and watch online courses. I have a real thirst for knowledge and it consumes me every single day of the week. I also love to run & lift heavy weights which keep me balanced throughout the week.

Please note: I reserve the right to delete comments that are offensive or off-topic.