Creating a Spring Boot and Angular application for Azure (1/7)
Tags: spring, angular, azure, java
Published: 2019-05-27 08:07:13

---
title: Creating a Spring Boot and Angular application for Azure (1/7)
published: true
description: 1st part of a series of blog posts on how to efficiently deploy Spring Boot and Angular applications on Azure
tags: spring, angular, azure, java
series: "Spring and Angular applications on Azure"
---

In this series of blog posts, we are going to deploy a full-stack application to Azure, and learn how to set up many components efficiently, and in a cost-conscious way.

We are going to talk about Spring Boot and Angular, but also deployment automation with Azure Pipelines and Azure Web Apps, monitoring with Azure Insights, and performance tuning. And we will not be shy about money: we'll talks about budgets and cost, and try to have a very inexpensive setup that can scale when needed.

Here are the parts of this series:

- Creating a Spring Boot and Angular application for Azure (1/7)
- [Creating and configuring Azure Web App and MySQL to host a Spring Boot application (2/7)](https://dev.to/jdubois/creating-and-configuring-azure-web-app-and-mysql-to-host-a-spring-boot-application-2-7-1n13)
- [Using Azure Pipelines to build, test and deploy a Spring Boot and Angular application (3/7)](https://dev.to/jdubois/using-azure-pipelines-to-build-test-and-deploy-a-spring-boot-and-angular-application-3-7-593j)
- [Using Azure Application Insights with Spring Boot (4/7)](https://dev.to/azure/using-azure-application-insights-with-spring-boot-4-7-263i)
- [Using Azure Application Insights with Angular (5/7)](https://dev.to/azure/using-azure-application-insights-with-angular-5-7-4kej)
- [Configuring Azure CDN to boost Angular performance (6/7)](https://dev.to/azure/configuring-azure-cdn-to-boost-angular-performance-6-7-5ebe)
- [Configuring Azure Redis Cache to boost Spring Boot performance (7/7)](https://dev.to/azure/configuring-azure-redis-cache-to-boost-spring-boot-performance-7-7-52dl)

## Generating the application

As the creator and lead developer of [JHipster](https://www.jhipster.tech/), I'm going to use JHipster to generate a "full stack" application using both Spring Boot and Angular. Please note that this series of posts is not linked to JHispter: what we will do here should work in a generic way for all Spring Boot and Angular applications. We only use JHipster to speed up the development process, and also because it generates a non-trivial application for us, so we are not showcasing a simple "Hello, world" application, but one that is close to what you would expect in a real-life scenario.

You can either install JHipster by going to [https://www.jhipster.tech/](https://www.jhipster.tech/), or use [JHipster Online](https://start.jhipster.tech) to generate a full-stack application graphically. For this series of posts, we will use the latest release available at this moment, v6.0.1. We have chosen here a few interesting options for Azure:

- We use MySQL, more specifically [Azure Database for MySQL](https://azure.microsoft.com/fr-fr/services/mysql/?WT.mc_id=devto-blog-judubois), as it is a very inexpensive option with Azure.
- We do not use any Hibernate 2nd level cache. With Hibernate, if you want to be able to scale you will need to have a distributed cache, which is a bit complex to set up, so we will disable this for the moment. We will see on part 7 of this series how to use Azure Redis Cache to achieve this.
- We have configured end-to-end tests with Protractor, so we will be able to test our complete application easily

The generated application has been pushed on [https://github.com/jdubois/spring-on-azure](https://github.com/jdubois/spring-on-azure), and you can see the initial commit corresponding to this part [here](https://github.com/jdubois/spring-on-azure/commit/25839fbbf903e9a32dde21dd9e98b91ccca394c7).

## Adding some business logic to the application

Now that a basic application has been created, we are going to add some business logic to it, in order to have a more "real-life" product. For this, JHipster proposes its "JHispter Domain Language", and we are going to use one of the provided samples, [the "Bug Tracker"](https://github.com/jhipster/jdl-samples/blob/master/bug-tracker.jh). This will generate an application that looks a bit like the GitHub bug tracker: it's only generated code, and if you really want a working application, you will still need to code some business logic, but for this series of blog posts this gives us a complete application to play with.

Those entities can either be created using the JHipster command line, or graphically using [JHipster Online](https://start.jhipster.tech), which will even be able to do a pull request to your GitHub project with those changes.

The commit corresponding to those new entities is available [here](https://github.com/jdubois/spring-on-azure/commit/dfbaf7147cb621b350b22b53a6dc87fa7c30dddc).

## Testing and running the application locally

Now that we have the full application ready, we can run its tests to see if everything is fine. You can run `mvnw test` to run the Java tests, and `npm run test` to run the front-end tests.

We can now run the application locally by typing `mvnw -Pdev,webpack spring-boot:run`, and opening our browser at [http://localhost:8080/](http://localhost:8080/). 

Lastly, let's run end-to-end tests with Protractor by running in another console `npm run e2e`. This will launch a browser that will run integration tests on [http://localhost:8080/](http://localhost:8080/), proving that the whole application works well.

Below is a screenshot of the final application: [in the next post of this series](https://dev.to/jdubois/creating-and-configuring-azure-web-app-and-mysql-to-host-a-spring-boot-application-2-7-1n13), we will create an Azure infrastructure so we can deploy it to production.

![](https://thepracticaldev.s3.amazonaws.com/i/hj62hhyb1lkbvixvuomn.png)