Build and deploy your full-stack Spring app with JHipster Azure Spring Apps
Published Sep 25 2023 09:49 AM 3,308 Views
Microsoft

This tutorial shows you how to build and deploy a full-stack web application on Azure using React, Spring Boot, and PostgreSQL empowered by JHipster Azure Spring Apps.

 

JHipster Azure Spring Apps provides a holistic solution for full-stack web development, covering front-end, back-end, database, and cloud deployment. Prioritizing simplicity, it offers one-click project creation through JHipster Online. With over 100k monthly users, JHipster is a leading code generator, fostering a vibrant developer community.

 

What is JHipster Azure Spring Apps?

Initiated as a Yeoman application generator in 2013, JHipster has evolved into a comprehensive development platform, facilitating the code generation, development, and deployment of modern web applications and microservice architecture.

 

Azure Spring Apps is a fully managed service for Spring developers. Focus on your applications without the complexity of infrastructure management. Manage the lifecycle of all your Spring apps with comprehensive monitoring and diagnostics, configuration management, service discovery, continuous integration, continuous delivery (CI/CD), and blue-green deployments.

 

With the collaboration between the JHipster and Azure Spring Apps teams. Jhipster Azure Spring Apps is designed to streamline your full-stack Spring application development, leveraging the robust infrastructure of Azure Spring Apps to bring your projects to life with unprecedented ease and efficiency.

 

Why JHipster Azure Spring Apps?

Full-stack end-to-end Integration

In the current landscape, scaffolding tools are primarily focused on spring projects. However, the majority of spring developers are engaged in crafting more complex full-stack web applications that encompass front-end, back-end, database, and cloud deployment. JHipster Azure Spring Apps stands as a beacon in this space, offering a comprehensive solution that caters to all these facets, thereby facilitating a truly integrated end-to-end development experience.

 

Simplicity with just one-click

We understand the value of simplicity in a developer's workflow. That's why JHipster Azure Spring Apps comes in two flavors: Jhipster CLI and JHipster Online. Opt for the utmost convenience with JHipster Online, which allows you to build a project with even a single click, without the need to install JHipster on your machine. It's all about making the process as straightforward as possible, so you can focus on what matters the most.

 

Large Community

When you choose JHipster, you're not just adopting a tool, you're joining a community of over 100k monthly users, making it the most popular code generator on Yeoman. This vibrant ecosystem is a hub of knowledge, expertise, and collaborative spirit, where you can learn, share, and grow alongside fellow enthusiasts and experts.

 

Getting Started with JHipster Azure Spring Apps

To kickstart your journey, we have prepared step-by-step samples that you can find on our Git reposity. Here, we outline a simple guide to get you started:

Prerequisites

Make sure to have JAVA_HOME assigned:

Hang_Wang_0-1694339875990.png

Build a local project

Jhipster Azure Spring Apps offers two ways to build a local project: Jhipster CLI and Jhipster Online.

Option 1: Jhipster Azure Spring Apps CLI

To use Jhipster Azure Spring Apps CLI, you need to:

  1. Install the package with 
    npm install -g generator-jhipster-azure-spring-apps​
  2. Create and navigate to a directory
  3. Generate the application with
    jhipster-azure-spring-apps createtodoapp​

After finishing step 3, you will be able to see the CLI interface:

 

Hang_Wang_2-1694340027307.png

JHipster Azure Spring Apps will prompt you to the type of application to create and what technologies you'd like to include:

Hang_Wang_3-1694340068679.png

In this tutorial, I chose all with default answers by clicking enter.

Press Enter for the last question, JHipster Azure Spring Apps will create your app in the current directory.

 

Option 2: JHipster Online

If you choose to use JHipster online, the whole process will be as easy as just one click if you choose all as the default value: click on the “Download as Zip file” button:

Hang_Wang_4-1694340159493.png

Here is the diagram of the project that you have just created, It is a typical three-layer web application with the  following layers:

  • A frontend bounded React application.
  • A backend Spring web application that uses Spring Data JPA to access a relational database.
  • A relational database. For localhost, the application uses H2 Database Engine. For Azure Spring Apps, the application uses Azure Database for PostgreSQL. For more information about Azure Database for PostgreSQL, see Flexible Server documentation.

You can check more details of the project on our website:

Hang_Wang_5-1694340217011.png

To run the project on the localhost:

 

 

 

 

 

 

 

mvn clean package -DskipTests
java -jar web/target/${artifact-name}-web-0.0.1-SNAPSHOT.jar

 

 

 

 

 

 

 

You can also use Maven Wrapper with:

 

 

 

 

 

 

 

chmod +x mvnw
mvnw clean package -DskipTests
./mvnw spring-boot:run -f web/pom.xml

 

 

 

 

 

 

 

 

Deploy to Azure

Leveraging the power of Azure Developer CLI (azd), JHipster Azure Spring Apps ensures a smooth and easy deployment process to Azure with just two steps:

  1. Log in to azd. Only required once per-install.
    azd auth login​
  2. Navigate to the generated project directory and run
    azd up​

After finishing step 2, you need to answer the following prompt questions:

Hang_Wang_6-1694340396387.png

 

  • Environment name: <name-your-own>
  • Azure Subscription: You need to have a valid Azure subscription. You can try azure for free. What’s more, the first 50 vCPU hours and 100 Memory GB hours on Azure Spring Apps are free each month.
  • Region: There are multiple regions for you to choose from, in this tutorial, I chose “EAST US”

You will be able to monitor the progress of your deployment:

Hang_Wang_7-1694340396402.png

 

 Hooray! The deployment is done, you can directly hit on the link to view your application and your resources on Azure:

Hang_Wang_8-1694340396405.png

 

Hang_Wang_9-1694340396409.png

 

Join the Revolution

As we gear up for the official release, we invite you to be among the first to experience the transformative potential of JHipster Azure Spring Apps. Your feedback is invaluable to us, and we encourage you to share your experiences and insights as you explore this new frontier in Spring Boot application development:

https://github.com/Azure/generator-jhipster-azure-spring-apps/issues

 

Join the revolution and redefine what's possible with JHipster Azure Spring Apps. Stay tuned for more updates, and

 

 

 

 

 

 

 

Happy Coding_

 

 

 

 

 

 

 

End.jpg

 

 

freegrants.jpg

Additional Resources

Version history
Last update:
‎Nov 08 2023 09:45 PM
Updated by: