{"id":32494,"date":"2016-03-06T14:47:17","date_gmt":"2016-03-06T09:17:17","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=32494"},"modified":"2017-08-03T13:18:09","modified_gmt":"2017-08-03T07:48:09","slug":"jhipster-rad-with-spring-boot-and-angularjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/jhipster-rad-with-spring-boot-and-angularjs\/","title":{"rendered":"JHipster : RAD with Spring Boot and AngularJS"},"content":{"rendered":"

What if we want to build our new app with technology like Spring Boot exhibiting REST APIs with an AngularJS front end<\/a>? This basically involves 2\u00a0steps:<\/p>\n

    \n
  1. Setup the backend app using Spring Boot<\/li>\n
  2. Setup the frontend app using AngularJS<\/li>\n<\/ol>\n

    Setting up these 2 separate environments have their own quirks. Beside of setting up the framework we have to setup some build tools also to manage the dependencies, i.e., Bower<\/strong>, Grunt<\/strong>, Gradle<\/strong> or Maven<\/strong>. So in initial time, we would do mostly setting up the things like logging, security, database, different environments and then get the apps in working state and build on top of it.\u00a0This requires extra effort and time. The real pain is you have to synchronize between two different technologies like Spring and Angular. Without proper structure, your app and code would go wild in a matter of weeks.<\/p>\n

    To overcome above issues, we have a new tool or may be a\u00a0framework (if you like to call it that), which binds Spring Boot and AngularJS in one. It’s\u00a0JHipster<\/strong>.<\/p>\n

    JHipster generates a minimal Spring Boot application with AngularJS front end<\/a>, along with the build tools like Gradle<\/strong> or M<\/b>aven<\/strong> for Spring Boot and Bower<\/strong>, Grunt<\/strong> or Gulp<\/strong>\u00a0for AngularJS,\u00a0configured already, all working seamlessly. It provides us support to build the application for production using Gradle or Maven and minifying and building\u00a0front-end artifacts using gulp or grunt.<\/p>\n

    Getting started with JHipster with as easy as issuing command\u00a0yo jhipster<\/strong>.\u00a0Let\u2019s see how to get it up and running.<\/p>\n

     <\/p>\n

    Installing<\/h4>\n
      \n
    1. Install\u00a0<\/a>node<\/a>\u00a0<\/strong>which will also install\u00a0npm<\/strong><\/li>\n
    2. Install yeoman, bower, grunt and gulp using\u00a0npm install -g yo bower grunt-cli gulp<\/strong><\/li>\n
    3. Install JHipster using npm install -g generator-jhipster<\/strong><\/li>\n<\/ol>\n

       <\/p>\n

      Generating the application<\/h4>\n
        \n
      1. Create a folder with your app’s name and change into it using mkdir myApp && cd myApp<\/strong><\/li>\n
      2. Run the Yeoman generator using\u00a0yo jhipster<\/strong><\/li>\n
      3. Follow up with answering all the questions and you are done as shown in the following image:<\/li>\n<\/ol>\n

        \"myappjhipsternew\"<\/p>\n

        Here I’ve selected my database to be PostgreSQL<\/strong>, Spring security<\/strong> as an authentication and authorization system, Gradle<\/strong> as the build tool for the backend, and Grunt<\/strong> as the build tool for the frontend.<\/p>\n

        JHipster automatically installs all frontend dependencies using npm install && bower install<\/strong>. To get backend dependencies you want to run .\/gradlew<\/strong>. One thing to note here is that if it detects Java 7 then it would generate Java 7 compliant code, and if it detects Java 8 then it would generate Java 8 compliant code that uses Lambdas.<\/p>\n

         <\/p>\n

        Walkthrough<\/h4>\n

        Let’s discover what the JHipster has done for us.<\/p>\n

          \n
        1. \u00a0\/src\/main\/java\u00a0<\/strong>folder contains our Spring code distributed as follows:\n