Integrate Angular in Spring Boot with Gradle

Having a Angular HTML5 single page application and a Spring Boot application, we would like to serve the complete Angular app from Spring Boot. This blog shows you a couple simple steps to get everything up and running: run NPM from Gradle, integrate the Gradle frontend build in the main build and support HTML5 mode in the ResourceHandler of Spring Boot.

Run NPM from Gradle

Create a subdirectory called frontend with the frontend code and build scripts (webpack, npm). Let’s assume our npm start and npm run watch output to the /frontend/dist/ directory.

First we need to make sure the frontend code is build when we run gradle build on our project. We can use the plugin gradle-node-plugin for this. Go ahead and create a /frontend/build.gradle file.

Now, if we run a gradle build from our frontend subdirectory:

  • node will be downloaded
  • npm install will be executed
  • npm run build will be executed

Run integrated Gradle build

To run the frontend submodule integrated from our root project, all we need to do is include a settings.gradle at the root of the project.

Go ahead and run gradle build from the root of our project and see that npm is downloaded and the expected npm tasks are run.

We need to include the distribution of the frontend build in the JAR. Thus the frontend:build task needs to be run before we process the resources of the JAR. Go ahead and add the following snippet to /build.gradle.

Support Angular HTML5 mode

Now all we need to do is create support for HTML5 mode in Angular. Angular is a single page application and subroutes of the application are default served with a ‘#’ hashtag separator. If we want to have regular paths, we can enable HTML5 mode. The problem in serving this Angular HTML5 application from Spring Boot is that the Spring Boot ResourceHandler cannot find these resources, since the real resources is the index.html with the JavaScript files. With the next code snippet we instruct Spring Boot to look for the index.html as well. This is inspired by

Happy coding!

5 thoughts on “Integrate Angular in Spring Boot with Gradle

  1. Hello Willem Cheizoo,

    Thanks for the great, post, this is what I am looking for. However, I am getting this error after creating the frontend directory adding the build.gradle example above and adding the settings.gradle entry.

    I saw gradle download stuff but failed on building with the following errors

    npm ERR! Darwin 15.6.0
    npm ERR! argv “…/frontend/build/node/node-v6.8.0-darwin-x64/bin/node” “…/frontend/build/node/node-v6.8.0-darwin-x64/lib/node_modules/npm/bin/npm-cli.js” “run” “build”
    npm ERR! node v6.8.0
    npm ERR! npm v3.10.8
    npm ERR! path …//frontend/package.json
    npm ERR! code ENOENT
    npm ERR! errno -2
    npm ERR! syscall open

    npm ERR! enoent ENOENT: no such file or directory, open ‘…/frontend/package.json’
    npm ERR! enoent ENOENT: no such file or directory, open ‘…/frontend/package.json’
    npm ERR! enoent This is most likely not a problem with npm itself
    npm ERR! enoent and is related to npm not being able to find a file.
    npm ERR! enoent

    npm ERR! Please include the following file with any support request:
    npm ERR! …//frontend/npm-debug.log
    :frontend:build FAILED

    FAILURE: Build failed with an exception.

    * What went wrong:
    Execution failed for task ‘:frontend:build’.
    > Process ‘command ‘…/frontend/build/node/node-v6.8.0-darwin-x64/bin/node” finished with non-zero exit value 254

    * Try:
    Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output.

    • Hi Ahmed,

      Thanks for your reply. Have you cleaned your /build, /node_modules, /typings directories in your frontend module?
      If the specified versions for node and npm in the build.gradle differ from the versions you have used earlier to build the frontend with, it can give you strange exception.
      If this doesn’t work, try running your build with –stacktrace

    • Hi Ahmed,

      npm ERR! enoent ENOENT: no such file or directory, open ‘…/frontend/package.json’

      It looks like the package.json file in your frontend directory is missing.

      npm ERR! path …//frontend/package.json

      There seems to be a double / in that frontend path, is the include statement in your settings.gradle correct?

  2. Hi.. I am new to spring boot and angular 2 , I am not getting where should i create frontend folder. help me plz..

Leave a Reply

Your email address will not be published. Required fields are marked *