How to create new JHipster project with MySQL or MariaDB

Step 1

Create new project catalog.

Step 2

Go to this folder and run:

yo jhipster

It will create all necessary files and folders.

Step 3

In my case I use MariaDB for development and production. [For MySQL should be the same]
Create new database and user [i.e. in phpMyAdmin].

Configure database access in files:

/src/main/resources/config/application-dev.yml

and

/src/main/resources/config/application-prod.yml

Fill your access data in section:

    datasource:
        type: com.zaxxer.hikari.HikariDataSource
        url: jdbc:mariadb://localhost:3306/barfitter
        name: barfitter
        username: barfitter
        password: ************

In /pom.xml fill your access data in section:

            <plugin>
                <groupId>org.liquibase</groupId>
                <artifactId>liquibase-maven-plugin</artifactId>
                <version>${liquibase.version}</version>
                <configuration>
                    <changeLogFile>src/main/resources/config/liquibase/master.xml</changeLogFile>
                    <diffChangeLogFile>src/main/resources/config/liquibase/changelog/${maven.build.timestamp}_changelog.xml</diffChangeLogFile>
                    <driver>org.mariadb.jdbc.Driver</driver>
                    <url>jdbc:mariadb://localhost:3306/barfitter</url>
                    <defaultSchemaName></defaultSchemaName>
                    <username>barfitter</username>
                    <password>************</password>
                    <referenceUrl>hibernate:spring:com.finbarre.barfitter.domain?dialect=org.hibernate.dialect.MySQL5InnoDBDialect&amp;hibernate.ejb.naming_strategy=org.springframework.boot.orm.jpa.hibernate.SpringNamingStrategy</referenceUrl>
                    <verbose>true</verbose>
                    <logging>debug</logging>
                </configuration>

Step 4

Create new entities:

yo jhipster:entity newEntityName

Step 5

Run project:

./mvnw

Step 6

Run browsersync:

gulp

How to add new menu and static page in JHipster

Let’s start with new menu entry

Open /src/main/webapp/app/layouts/navbar/navbar.html and find:

 <li ui-sref-active="active">
                    <a ui-sref="home" ng-click="vm.collapseNavbar()">
                        <span class="glyphicon glyphicon-home"></span>
                        <span class="hidden-sm" data-translate="global.menu.home">Home</span>
                    </a>
                </li>

After this section add new entry:

                <li ng-class="{active: vm.$state.includes('admins-jobs')}" has-authority="ROLE_ADMIN" ng-switch-when="true" uib-dropdown class="dropdown pointer">
                    <a class="dropdown-toggle" uib-dropdown-toggle href="" id="admins-jobs">
                        <span>
                            <span class="glyphicon glyphicon-th-list"></span>
                            <span class="hidden-sm" data-translate="">
                                Admin's Jobs
                            </span>
                            <b class="caret"></b>
                        </span>
                    </a>
                        <li ui-sref-active="active" >
                            <a ui-sref="static" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-asterisk"></span>&nbsp;
                                <span data-translate="">Static page</span>
                            </a>
                        </li>
                    </ul>                
                </li>

It looks like this:

In /src/main/webapp/app/ create new catalog /static and copy there /src/main/webapp/app/home content.
Change filenames from home to static.

In static.html I left only:

<div ng-cloak>
    <div class="row">
        <div class="col-md-4">
            <span class="hipster img-responsive img-rounded"></span>
        </div>
        <div class="col-md-8">
            <h1 >Welcome, Java Hipster!</h1>
            <p class="lead" >This is your static test</p>


        </div>
    </div>
</div>

In static.state.js change:

      $stateProvider.state('home', {

to

      $stateProvider.state('static', {

---------

          url: '/',

to

          url: '/static',

---------

          parent: 'app', - change parent folder if you need

---------

                   templateUrl: 'app/home/home.html',

                   controller: 'HomeController',

to

                   templateUrl: 'app/static/static.html',

                   controller: 'StaticController',

---------

My resolve section:

           resolve: {

               translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {

                   $translatePartialLoader.addPart('global');

                   return $translate.refresh();

               }]

           }

If it’s static page, you don’t need static.controller.js.

How to install JHipster on Ubuntu

JHipster is like Sonata for PHP and Symfony, but I'd say it's simpler. Comparing to Symfony and Sonata, we get:

• similar entity generator.
• CRUD panels like in SonataAdminBundle
• user management system out of the box

According to https://jhipster.github.io/installation/ instruction, in Ubuntu we have to do folliwing steps [I assume you have Java 8 and Git already installed]:

Step 0 [optional]

Install Apache Tomcat :

Download Tomcat from http://tomcat.apache.org

$ sudo mkdir /opt/tomcat

$ sudo tar xvf apache-tomcat-8*tar.gz -C /opt/tomcat --strip-components=1

Start Tomcat:

$ sudo /opt/tomcat/bin/startup.sh

You can stop it:

$ sudo /opt/tomcat/bin/shutdown.sh

Step 1

Install Node.js

$ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -nodesource_setup.sh

$ sudo apt-get install nodejs

Step 2

Install Yeoman:

$ sudo npm install -g yo

In result I've got:

Yeoman Doctor
Running sanity checks on your system

✔ Global configuration file is valid
✔ NODE_PATH matches the npm root
✔ Node.js version
✔ No .bowerrc file in home directory
✔ No .yo-rc.json file in home directory
✖ npm version

Your npm version is outdated.

Upgrade to the latest version by running:
npm install -g npm

so I did:

$ npm install -g npm

Yeoman and again:

$ sudo npm install -g yo

Now I've got :

Yeoman Doctor
Running sanity checks on your system

✔ Global configuration file is valid
✔ NODE_PATH matches the npm root
✔ Node.js version
✔ No .bowerrc file in home directory
✔ No .yo-rc.json file in home directory
✔ npm version

Everything looks all right!    

Step 3

Install Bower:

$ sudo npm install -g bower

Step 4

Install Gulp: 

$ sudo npm install -g gulp-cli

Step 5

Install JHipster: 

$ sudo npm install -g generator-jhipster