My approach to side by side in Jhipster with Vue and custom UI Layouts (4 Part Series)
This is the first part in my series "My approach to side by side in Jhipster with Vue and custom UI Layouts", second part soon!
This article departs from a simple monolith application generated with JHipster 6.2, if you do not know how to install or generate a simple JHipster app, I really recommend to visit their docs for installation or how to generate a simple app.
Then I watched Antonio Goncalves and his talk about JHipster side by side, and it was just what I need, I was hitting many of the same problems that he had, so I changed both layout and framework and tried with Angular and AppWorks.
I realized that I was really comfortable with Angular, dependency injection, classes, it was like Net Core or Spring, it was all beautiful (or the most that can be, I am not so good in front end and distribution, user experience and that stuff).
I really wanted to write a post about my experience, but I had so much work (and this was my hobby project), then I watched a video of David Steiman, talking more in detail about side by side and was happily surprised because many of the tips or way to do things seemed really similar to the way I was doing stuff, so if you are trying side by side with JHipster and Angular, I really recommend to watch both videos.
While I am really happy with angular, I had a problem, there was one major player missing for the front end, and the blueprint was ready, so, why do not give a try?
I was hesitating, but:
- The front end developers in my work are working with Vue, so I can get some extra help with doubts and questions.
- I keep seeing many good comments about Vue, comming from a lot of people that I follow.
- I know you should not choose a framework based only on some milliseconds of advantage in some benchmarks, but hey, at least it can compete with Angular and React.
- Being a programmer for so long, I am really worried about one thing: Developer experience, and, again, many people are saying that Vue is a little more productive and easy to develop, so, why not try and see if fits me?
If you need a simple application, you can just leave the layout as is and add new features with side by side, however, like I said before, I am not so expert in user interfaces, and, while I can see something and think "Oh, this looks ugly", I do not have the esthetic abilities to make it nice and beautiful.
When you start to add UI plugins you need to make sure they look uniform, bootstrap can help, but there are always some details, so, since this is only a personal project with just me, and I love back-end, but I can have some problems designing, Why not pay to an specialist?
Other reason is to try to differentiate from the rest, while the JHipster layout is nice and clean, there is always that "boostrap" feeling (no that is something bad, I must accept this project could me take less time if I stop playing with the base layout).
I have to admit, now that it comes with integration for bootswatch, maybe this will be even less necessary, but, hey, I really wanted my left menu :P.
My first rule is to modify the minimum in the JHipster archives, this can lead to some duplicate code, but in my experience is a lot easier to maintain, specially when new versions with major changes comes out. This is even more true in my case, using an external layout basically means a review to all the front end (I think, still easier than make everything from scratch).
The second rule is to adapt the layout to JHipster, not the other way. The first time it was more a mixture between both and it failed, it was really hard to maintain. So now I try keeping the JHipster structure whenever I can, it is where generally most good practices are, the updates are more frequent and in general is always more elaborate than the demo dashboards of the commercial layouts.
So, the first step is to create a simple JHipster app using the Vue blueprint, I like to use postgresql for both development and production (same environment, same behavior), but you can create it however you like.
Then run the app so you can confirm everything is working fine.
To run this project I am using Intellij with 3 run configurations:
- The default spring boot configuration to run the back end.
- A NPM configuration to run the front end.
- A docker config to start the postgresql server and other services, like elasticsearch.
On the other hand, we have the app work demo application:
My starting point is the index.html file
As you can see, the JHipster page is more complex and handles more cases than our demo page, the appwork demo page mainly loads some styles. Here the changes are simple, I just merge the styles from the layout.
As you can see, not much happened here, I just changed
<%= BASE_URL %>
Because in the layout the static resources are in base, but in JHipster the resources are in the
content folder, so I just paste the folder in a new folder called
bjt (my private package), so I can mark where my resources are, and where the JHipster resources stay.
The next important point where modifications are needed is in the
App.vue file, it is the one where the app is loaded.
Here you can note more differences, the JHipster app has the layout declared, while the Appworks app only loads a simple component, so we need to investigate more.
Appworks contains several layouts to work with, to keep things simple we will just work with one layout, the default one, peeking in the router we can see is the one that the demo is displaying.
So, the real comparison needs to be between JHipster
app.vue and the Appwork
Layout1.vue files, luckily the structure is way more similar now:
Now we have a place where we can start replacing the JHipster components with ours!
Before continuing, I create a new folder in
bjt, again, this is the point where my code begins, o at least most of it.
Then, I need to change the point where
app.vue is loaded, so I can load mine, a quick search for the filename reveals our precious place in
So, to start practicing, I modify my
bjt/App.vue to be exactly as the one from JHipster, and I copy the
So, now the real test, I just run the project, the layout should come out normal.
But, if we modify the import in
Then we can see our custom App.vue!
Now we can start to modify code more aggressively, not worrying about breaking the JHipster for when the app updates, you can even turn back to the JHipster layout by simply changing the imports in
In the second part I will start to integrate the components from Appwork to my JHipster app, I Hope you like it!.