TL;DR: Single Page Applications SPAs have been the biggest web development trend for a while now. Developers from all around the world have started creating new applications based on this technique, and started migrating existing ones too. For many years, Java developers relied on technologies specific to the Java world, such as. But, as JavaScript frameworks started to gain more power, become more popular and well supported, Java developers started migrating their front-end code to these frameworks. Today we will see how we integrate Node. Luckily, all the popular tools were developed around a single technology, Node. In this article, we will use a Maven plugin, called , to integrate tasks into Maven's generate-resources phase. If instead of Gulp you are using some other tool, like or , fear not, the approach shown throughout the article is the same for those. Cloning Maven Application To give us some leverage, let's clone a simple RESTful application based on. This application has a trivial API that handles HTTP requests to add new tasks, delete existing ones, and retrieve all tasks. Upon this API we will build a very small application. If you are not familiar with AngularJS or Spring Boot, but would like too learn how to integrate Node. As both the backend API and the front-end application that we will build are deadly simple, you will still be able to keep up with this article. To start, let's issue the following commands. As mentioned before, we will create an AngularJS application that will allow users to interact with the existing API. To start, let's add an index. As you can see above, the application uses to give us a nice interface, and has only two JavaScript dependencies: angular. The first one is AngularJS source code, which enables us to use the framework in our app, and the second one is the application that we will build. Our AngularJS application will contain two files. The first one, which will be responsible for defining a new AngularJS module, will be called app-definition. But, as our application won't have any dependency, this file will be used only to define the new AngularJS module called app. The second file that our front-end application will have is the mainController controller used in the index. Let's call this new file as app-controller. One to add new tasks, one to remove a task passed as parameter, and one to load all tasks from the RESTful application. These files are everything that our AngularJS SPA needs to interact with our RESTful API. Now we just need to assemble these files in a single one, called app. Assembling AngularJS with Gulp To process the AngularJS source files created above we will use Gulp. But first, let's define our application as a Node. To do that, let's issue the following command in the root directory of our application: npm init -y This will add a file called package. After that, we can install Gulp and its plugins: npm install --save-dev gulp gulp-concat gulp-if gulp-sourcemaps gulp-uglify gulp-util And then define a new file called gulpfile. And the second one is responsible for processing the AngularJS source files created before, assembling it as a single one called app. This task also checks if it is running on production to decide if it should uglify the JavaScript source code or not. Therefore, we use this plugin only when releasing our code to production. We will see in a bit where the envName paramaters, that triggers or blocks the uglify process, comes from. With this file in place, we are now able to generate the app. Let's issue the following commands to accomplish that: executes the default task in the gulpfile. Our AngularJS application is up, running, and working as expected. This is not the process that we want. We don't want to remember yet another command to generate the static resources that compose our front-end application. We want to integrate this in our current release process. That is, we want to integrate this process with Maven. Integrating Gulp with Maven To integrate Gulp and its tasks into Maven's lifecycle, we just need to add the Maven plugin previously mentioned, Frontend Maven Plugin, and configure a few steps on it. To do that, let's open the pom. The first one, called install node and npm, is responsible for installing Node. The second one, called npm install, will install all our Node. And then the last one will execute the gulp command as we did manually before. The difference, in this case, is that it will explicitly define default as the task to be executed and it will add the envName environment variable with a value that we still need to define. This is how Gulp will decide if it should uglify the AngularJS source code or not. These profiles will be defined by adding the following elements to the pom. If we run Maven without the profile definition, -P production, Maven will use the development profile which is marked with activeByDefault and build our application without uglifying our AngularJS code. Aside: Securing Spring APIs with Auth0 Securing Spring Boot APIs with Auth0 is easy and brings a lot of great features to the table. With , we only have to write a few lines of code to get solid , , support for , and support for. In the following sections, we are going to learn how to use Auth0 to secure APIs written with. Creating the API First, we need to create an API on our. Registering the Auth0 Dependency The second step is to import a dependency called. This can be done on a Maven project by including the following configuration to pom. In this extension, we use JwtWebSecurityConfigurer to integrate Auth0 and Spring Security: package com. Let's set them in a properties file on our Spring application e. There are multiple ways to do this and. For example, if we are developing a Single Page Application SPA , we will use what is called the. If we are developing a mobile application, we will use the. There are other flows available at Auth0. However, for a simple test like this one, we can use our Auth0 dashboard to get one. Therefore, we can head back to , click on the API we created before, and then click on the Test section of this API. There, we will find a button called Copy Token. Let's click on this button to copy an access token to our clipboard. As we are now using our access token on the requests we are sending to our API, we will manage to get the list of contacts again. That's how we secure our Node. Conclusion Developing SPAs is indeed a good practice, as it gives an smooth interface for our users with seamless navigation and great user experience. Besides that the frameworks available have big communities and a lot of resources available that make web developers very productive. Therefore, integrating JavaScript with Java applications is a good idea and, as we saw today, easy as well. If we are using Maven on our project, we just need to register a single plugin to the build process and configure a few steps to automate the whole process.
