JHipster: blank screen every upgrade

Question

I have a recurring problem everytime jhipster upgraded its version. My application suddenly goes blank as empty white screen at http://localhost:8080. And I did not re-generate or re-run yo jhipster at that time. The compilation went ok without error messages.

I solved it (and it's very annoying) by running manual upgrade of jhipster and re-generate everything again. The annoying part is that I need to look at the diff at each file because I have made some modifications to some of the generated files.

My questions are:

1. How come calling mvnw without any changes to the local codes depend on the newest version of jhipster released on the internet?

2. What causes the empty blank screen?

3. Do I need to re-generate my application everytime jhipster release a new version?

Thanks.

Answer 1

When you start the app with ./mvnw you start the app in dev mode so the web front end is not 'web-packed' and cannot be served. If you want to serve the web front end in dev mode the recommended way is to do this

1. ./mvnw
2. In another terminal yarn start this starts the webpack dev server and connects it to the backend.

After an upgrade where node modules have changed you might have to type yarn first to make sure all the dependencies get imported.

Alternatively you can build the front end first

1. yarn webpack:build
2. ./mvnw

The disadvantage of doing this is that you have to re-do the webpack build everytime something changes on the frontend. If you serve the front end with yarn start you don't have to do that.

A production build will always webpack the front end.

One other thing I have noticed is that some versions and options of JHipster seem to want to build the web front end in a build directory and not the expected target directory. The web front end should be in target/www/app. If it is not there after a yarn webpack:build then something is wrong. Most likely it is ts.config which should have the value "outDir": "target/www/app" but there could be other places. I've had to correct this before and did a directory search for lines containing "build/www/app" that need changing.

A final trick would be to delete the node modules, delete the target directory (and the build directory if there is one) and do this:

1. yarn install && yarn webpack:build
2. ./mvnw

Answer 2

the blank screen often means, there are some JS errors. You need to enter your browsers developer console to get the error.

Despite our last release fixes the upgrade generator, which was broken for all 4.0.X versions, I did't try it out. I needed a better upgrade flow as well so I just performed the steps from the upgrade generator manually, which really made things easier. Here is how you always can go:

1. go to the branch, where you want to apply the updates. I will refer to master in my example
2. make a orphan branch based on your branch, with git checkout --orphan upgrade-jhipster. Orphan branches have no parent revisions, so during merge, every single file different to your master will end up in a merge conflict. Without this, you would just override your changes, as any changes in your upgrade will be later than your changes.
3. make sure you are running the newest generator inside your project root. Keep in mind that JHipster places a copy of the generator after generation, to make sure you can work with the version, which generated your application, even if you globally upgrade.
4. run yo jhipster --with-entities --force and commit the changes to your upgrade-jhipster branch
5. now git checkout master and git merge upgrade-jhipster

If you perform the last step in some tool with visual merge dialogs, as IntelliJ for example, the upgrade progress is quite handable and not that annoying as yeoman diffs.

Depending on how custom your changes are, there is still no guarantee that this will lead into a error free state. But this is exactly, what the upgrade generator tries to do. One difference is, that the manual method won't delete obsolete files, like the upgrade generator do. However I am upgrading my very custom JHipster projects that way and it works good