Uploading files in JHipster app

When you trying to add uploading files using this guide walks: https://spring.io/guides/gs/uploading-files/, you may see that kind of errors:

***************************
APPLICATION FAILED TO START
***************************

Description:

Parameter 0 of constructor in finbarre.storage.FileSystemStorageService required a bean of type 'finbarre.storage.StorageProperties' that could not be found.


Action:

Consider defining a bean of type 'finbarre.storage.StorageProperties' in your configuration.

To fix it, add @Component annotation to StorageProperties class:

package finbarre.storage;

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

@Component
@ConfigurationProperties("storage")
public class StorageProperties {

    /**
     * Folder location for storing files
     */
    private String location = "upload-dir";

    public String getLocation() {
        return location;
    }

    public void setLocation(String location) {
        this.location = location;
    }

}

How to redirect http to https in Spring Boot JHipster app

Here is how to redirect all traffic to https.

Let's assume in application-prod.yml file got:

server:
    port: 443
    compression:
        enabled: true
        mime-types: text/html,text/xml,text/plain,text/css, application/javascript, application/json
        min-response-size: 1024

In SecurityConfiguration.java add:

        @Value("${spring.profiles.active}")
 private String activeProfile; 

then in configure(HttpSecurity http) method add:

        if(activeProfile=="prod") {
         http.requiresChannel().anyRequest().requiresSecure()
            .and()
                .portMapper()               
                .http(80).mapsTo(443);
        }

Without activeProfile condition, in dev profile it generates ERR_TOO_MANY_REDIRECTS error.

How to create simple REST app using Spring Boot, AngularJS and MariaDB in Eclipse. Part 2

In part 1 we created some basis structure for our app.

Here I’ll show how to display two lists of entities on one page in web browser.

We will need 6 files at the beginning. This allows only to add and remove entities.

/src/main/resources/static/index.html

/src/main/resources/static/webapp/app.js

/src/main/resources/static/webapp/entities/category/category_controller.js

/src/main/resources/static/webapp/entities/category/category_service.js

/src/main/resources/static/webapp/entities/vat/vat_controller.js

/src/main/resources/static/webapp/entities/vat/vat_service.js

/src/main/resources/static/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
 href="./bower_components/bootstrap-css-only/css/bootstrap.min.css" />
</head>
<body ng-app="myApp">
 <div class="container" ng-controller="AppVatController">
  <div class="page-header">
   <h1>Vat</h1>
  </div>
  <div class="alert alert-info" role="alert"
   ng-hide="vats && vats.length > 0">There are no vats yet.</div>

  <form class="form-horizontal" role="form"
   ng-submit="addVat(newVatDescription, newVatRate, newVatActive)">
   <div class="table-responsive">
    <table class="jh-table table table-striped">
     <thead>
      <tr>
       <th></th>
       <th>ID</th>
       <th>Description</th>
       <th>Rate</th>
       <th>Active</th>
       <th></th>
      </tr>
     </thead>
     <tbody>
      <tr ng-repeat="vat in vats track by vat.id">
       <td><input type="checkbox" ng-model="vat.checked"
        ng-change="updateVat(vat)" /></td>
       <td>{{vat.id}}</td>
       <td>{{vat.description}}</td>
       <td>{{vat.rate}}</td>
       <td>{{vat.active}}</td>
       <td class="text-right">
        <div class="btn-group flex-btn-group-container">
         <button class="pull-right btn btn-danger" type="button"
          title="Delete" ng-click="deleteVat(vat)">
          <span class="glyphicon glyphicon-trash"></span>
         </button>
        </div>
       </td>
      </tr>
     </tbody>
    </table>
   </div>
   <hr />
   <div class="input-group">
    <input type="text" class="form-control" ng-model="newVatDescription"
     placeholder="Enter vat description..." /> <input type="text"
     class="form-control" ng-model="newVatRate"
     placeholder="Enter vat rate [i.e 0.23]..." /> <input type="text"
     class="form-control" ng-model="newVatActive"
     placeholder="Is it active? [true or false]..." /> <span
     class="input-group-btn">
     <button class="btn btn-default" type="submit"
      ng-disabled="!newVatDescription" title="Add">
      <span class="glyphicon glyphicon-plus"></span>
     </button>
    </span>
   </div>
  </form>




  <hr />

  <div class="container" ng-controller="AppCategoryController">
   <div class="page-header">
    <h1>Categories</h1>
   </div>
   <form class="form-horizontal" role="form"
    ng-submit="addCategory(newCategoryName, newCategoryParentId)">
    <div class="alert alert-info" role="alert"
     ng-hide="categories && categories.length > 0">There are no
     categories yet.</div>
    <div class="table-responsive">
     <table class="jh-table table table-striped">
      <thead>
       <tr>
        <th></th>
        <th>ID</th>
        <th>Name</th>
        <th>Parent Id</th>
       </tr>
      </thead>
      <tbody>
       <tr ng-repeat="category in categories">
        <td><input type="checkbox" ng-model="category.checked"
         ng-change="updateCategory(category)" /></td>
        <td>{{category.id}}</td>
        <td>{{category.name}}</td>
        <td>{{category.parentId}}
         <button class="pull-right btn btn-danger" type="button"
          title="Delete" ng-click="deleteCategory(category)">
          <span class="glyphicon glyphicon-trash"></span>
         </button>
        </td>
       </tr>
      </tbody>
     </table>
    </div>

    <hr />
    <div class="input-group">
     <input type="text" class="form-control" ng-model="newCategoryName"
      placeholder="Enter category name..." /> <input type="text"
      class="form-control" ng-model="newCategoryParentId"
      placeholder="Enter category parentId..." /> <span
      class="input-group-btn">
      <button class="btn btn-default" type="submit"
       ng-disabled="!newCategoryName" title="Add">
       <span class="glyphicon glyphicon-plus"></span>
      </button>
     </span>
    </div>
   </form>
  </div>



  <script type="text/javascript"
   src="./bower_components/angular/angular.min.js"></script>
  <script type="text/javascript"
   src="./bower_components/angular-resource/angular-resource.min.js"></script>
  <script type="text/javascript"
   src="./bower_components/lodash/dist/lodash.min.js"></script>
  <script type="text/javascript" src="./webapp/app.js"></script>
  <script type="text/javascript"
   src="./webapp/entities/vat/vat_controller.js"></script>
  <script type="text/javascript"
   src="./webapp/entities/vat/vat_service.js"></script>
  <script type="text/javascript"
   src="./webapp/entities/category/category_controller.js"></script>
  <script type="text/javascript"
   src="./webapp/entities/category/category_service.js"></script>
</body>
</html>

/src/main/resources/static/webapp/app.js:

(function(angular) {
   angular.module("myApp.vat_controller", []);
   angular.module("myApp.vat_service", []);
   angular.module("myApp.category_controller", []);
   angular.module("myApp.category_service", []);
  angular.module("myApp", ["ngResource", "myApp.vat_controller", "myApp.vat_service", 
   "myApp.category_controller", "myApp.category_service"]);
}(angular));

/src/main/resources/static/webapp/entities/category/category_controller.js

(function(angular) {
  var AppCategoryController = function($scope, Category) {
   Category.query(function(response) {
      $scope.categories = response ? response : [];
    });
    
    $scope.addCategory = function(name, parentId) {
      new Category({
          name: name,
          parentId: parentId,
          checked: false
      }).$save(function(category) {
        $scope.categories.push(category);
      });
      $scope.newCategoryParentId = "";
      $scope.newCategoryName = "";
    };
    
//    $scope.updateCategory = function(category) {
//     category.$update();
//    };
//    
    $scope.deleteCategory = function(category) {
     category.$remove(function() {
        $scope.categories.splice($scope.categories.indexOf(category), 1);
      });
    };
  };
  
  AppCategoryController.$inject = ['$scope', 'Category'];
  angular.module("myApp.category_controller").controller("AppCategoryController", AppCategoryController);
}(angular));

/src/main/resources/static/webapp/entities/category/category_service.js:

(function(angular) {
  var CategoryFactory = function($resource) {
    return $resource('/category/:id', {
      id: '@id'
    }, {
      update: {
        method: "PUT"
      },
      remove: {
        method: "DELETE"
      }
    });
  };
  
  CategoryFactory.$inject = ['$resource'];
  angular.module("myApp.category_service").factory("Category", CategoryFactory);
}(angular));

/src/main/resources/static/webapp/entities/vat/vat_controller.js:

(function(angular) {
  var AppVatController = function($scope, Vat) {
    Vat.query(function(response) {
      $scope.vats = response ? response : [];
    });
    
    $scope.addVat = function(description, rate, active) {
      new Vat({
        description: description,
        rate: rate,
        active: active,
        checked: false
      }).$save(function(vat) {
        $scope.vats.push(vat);
      });
      $scope.newVatDescription = "";
      $scope.newVatRate = "";
      $scope.newVatActive = "";
    };
//    
//    $scope.updateVat = function(vat) {
//      vat.$update();
//    };
//    
    $scope.deleteVat = function(vat) {
      vat.$remove(function() {
        $scope.vats.splice($scope.vats.indexOf(vat), 1);
      });
    };
  };
  
  AppVatController.$inject = ['$scope', 'Vat'];
  angular.module("myApp.vat_controller").controller("AppVatController", AppVatController);
}(angular));

/src/main/resources/static/webapp/entities/vat/vat_service.js:

(function(angular) {
  var VatFactory = function($resource) {
    return $resource('/vats/:id', {
      id: '@id'
    }, {
      update: {
        method: "PUT"
      },
      remove: {
        method: "DELETE"
      }
    });
  };
  
  VatFactory.$inject = ['$resource'];
  angular.module("myApp.vat_service").factory("Vat", VatFactory);
}(angular));

Now it should look like this:

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