Over a million developers have joined DZone.

Single Page AngularJS Application With Spring Boot and Yeoman

Looking for a quick example for a single page application? Look no further.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

I am very thankful for tools like yeoman which provide a very quick way to combine different JavaScript libraries together into a coherent application. Yeoman provides the UI tier; if you needed to develop the services tier and a web layer for the static assets a good way to package it is to use Spring Boot. I know there are tools like JHipster which make this easy but if you are just looking for a basic template then what I am outlining here should suffice.

So, this is what I do... let's start by getting a basic Spring Boot web template in place, the following way:

spring init --dependencies=web spring-boot-static-sample

This assumes that you have the command line application for Spring Boot available in your machine, if you don't then just follow the instructions

There should be a folder called spring-boot-static-sample with all the Spring Boot generated code in there, now to layer in the static content in there, I have used the yeoman gulp angular generator to generate the code the following way inside the spring-boot-static-sample folder:

npm install -g yo gulp bower npm install -g generator-gulp-angular yo gulp-angular

Almost there, just modify one of the gulp configurations—instead of creating the packaged JavaScript distribution to dist folder, let the folder be src/main/resources/static instead. In gulp/conf.js:

This is the folder that Spring Boot uses to serve out static content by default.

And that's it, when you are developing the single page apps this can be done very quickly using the convenient gulp commands:

gulp serve

When you are ready to package the application, just run:

gulp build

Which would get the static content into a location that Spring Boot understands and then run the app:

mvn spring-boot:run

The Single page app UI should show up:

Simple and clean!

Here is a sample project with these steps already executed - https://github.com/bijukunjummen/spring-boot-static-sample

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

web design and web development,angular,angular js,gulp,spring boot,yeoman,javascript

Published at DZone with permission of Biju Kunjummen, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}