Separating the JHipster layout from a custom UI implementation
Tags: jhipster, vue
Published: 2019-09-02 17:34:35

# Some background #

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!

## Why JHipster? ##

I love [JHipster](https://www.jhipster.tech/), I have been using it for some toy projects. It has been useful to learn some front end technologies, since I am a back-end developer and I wanted to update my knowledge of the trending Javascript libraries and frameworks for front end.

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](https://www.jhipster.tech/installation/) or how to [generate a simple app](https://www.jhipster.tech/creating-an-app/).

## Why vue? ##

### The React attempt ###

I stared with React, integrating the [Inspinia layout](http://webapplayers.com/inspinia_admin-v2.9.2/), and loved the easiness of the learning curve to create new components and make them interactive (I even made my first, really simple [contribution](https://github.com/jhipster/generator-jhipster/pull/8389)), however there was some things that were a little harder to understand, like the reducers (I know, maybe some tutorials of the basics could help, but I really wanted to learn doing). Maybe it was my lack of practice with Javascript (I mainly program C# and Java since some time a go).

![JHipster+React+Inspinia](https://thepracticaldev.s3.amazonaws.com/i/lbwnzln2ibrt3rmsciep.jpeg)

### The Angular attempt ###

Then I watched Antonio Goncalves and his talk about [JHipster side by side](https://www.youtube.com/watch?v=9WVpwIUEty0), 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](https://uxpowered.com/products/appwork/v131/angular-demo/dashboards/dashboard-1).

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](https://www.youtube.com/watch?v=Gg5CYoBdpVo) 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.

### The Vue attempt ###
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](https://github.com/hipster-labs/jhipster-angular-react-vue-comparison), 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?

## Why to use other layout?

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](https://bootswatch.com/), maybe this will be even less necessary, but, hey, I really wanted my left menu :P.

# Starting the work #

**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](https://github.com/jhipster/jhipster-vuejs), 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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sw7e1y8kmd6i7hr6vdli.png)

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.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/r6al2ym2t7md8j7ikoc5.png)

On the other hand, we have the app work demo application:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/c4fanpauolofiyo0jrox.png)

My starting point is the index.html file

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1mjm1cchpqke89skaa69.png)

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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/00mzo6ayevb1uegert5e.png)

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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vjwktqw9swwp5ucaly42.png)

The next important point where modifications are needed is in the `App.vue` file, it is the one where the app is loaded.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4i42j4zv9rn517wmps7t.png)

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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ea3wzyerbld70lggrral.png)

Appworks contains [several layouts](https://uxpowered.com/products/appwork/v131/vue-demo/layouts/layout-1) 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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zx40loatioi7bfb2wyko.png)

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:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/affpa35moov7tyi9p4oi.png)

Now we have a place where we can start replacing the JHipster components with ours!

Before continuing, I create a new folder in `app` called `bjt`, again, this is the point where my code begins, o at least most of it.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a3s4lwstjjgo6qoiza4j.png)

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 `main.ts`:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/32qo2dzw20jrwnhc0vue.png)

So, to start practicing, I modify my `bjt/App.vue` to be exactly as the one from JHipster, and I copy the `app.component` file to my folder (Appwork includes the Javascript in the same file as the view, but I like JHipster order more), then I make a little modification so I can see if the layout changes accordingly.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/obeamna9mj809b19u1gk.png)

So, now the real test, I just run the project, the layout should come out normal.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/79cc8ohhuyaujkmyn698.png)

But, if we modify the import in `main.ts`:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sd2fx9o3ht1qq8ua6xv7.png)

Then we can see our custom App.vue!

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/iiaydc9hy1i2ipc0senv.png)

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 `main.ts`.

In the second part I will start to integrate the components from Appwork to my JHipster app, I Hope you like it!.