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
- Java 17 or later - for API backend
- Node.js with npm (16.13.1+) - for the Web frontend
- Maven - for local build
- Azure Subscription:
- Try Azure for free, you can start with $200 Azure credit.
- To help you get started, Azure Spring Apps have monthly FREE grants on all plans – 50 vCPU Hours and 100 memory GB Hours per plan.
- Azure Developer CLI 1.3.0 or later
Make sure to have JAVA_HOME assigned:
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:
- Install the package with
npm install -g generator-jhipster-azure-spring-apps - Create and navigate to a directory
- Generate the application with
jhipster-azure-spring-apps createtodoapp
After finishing step 3, you will be able to see the CLI interface:
JHipster Azure Spring Apps will prompt you to the type of application to create and what technologies you'd like to include:
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:
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:
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:
- Log in to azd. Only required once per-install.
azd auth login - If you are on Windows, install powershell
- Navigate to the generated project directory and run
azd up
After finishing step 2, you need to answer the following prompt questions:
- 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:
Hooray! The deployment is done, you can directly hit on the link to view your application and your resources on Azure:
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_
Additional Resources
- Learn using an MS Learn module or self-paced workshop on GitHub.
- Deploy your first Spring app to Azure!
- Deploy the demo Fitness Store Spring Boot app to Azure.
- Deploy the demo Animal Rescue Spring Boot app to Azure.
- Learn more about implementing solutions on Azure Spring Apps.
- Deploy Spring Boot apps by leveraging enterprise best practices – Azure Spring Apps Reference Architecture.
- Migrate your Spring Boot, Spring Cloud, and Tomcat applications to Azure Spring Apps.
- Wire Spring applications to interact with Azure services.
- For feedback and questions, please raise your issues on our GitHub.
Microsoft