page_type	languages	products	urlFragment	name	description
sample	azdeveloper java bicep typescript html	azure azure-spring-apps azure-database-postgresql azure-key-vault azure-pipelines ms-build-openjdk	ASA-Samples-Web-Application	React Web App with Java API and PostgreSQL - Flexible Server on Azure Spring Apps	A complete ToDo app on Azure Spring Apps with Java API and Azure Database for PostgreSQL flexible server for storage. Uses Azure Developer CLI (azd) to build, deploy, and run

React Web App with Java API and PostgreSQL - Flexible Server on Azure Spring Apps

A blueprint for getting a React web app with a Java API and a PostgreSQL - Flexible Server on Azure. The blueprint includes sample application code (a ToDo web app) which can be removed and replaced with your own application code. Add your own source code and leverage the Infrastructure as Code assets (written in Bicep) to get up and running quickly. This architecture is for running containerized apps or microservices on a serverless platform.

Let's jump in and get this up and running in Azure. When you are finished, you will have a fully functional web app deployed to the cloud. In later steps, you'll see how to setup a pipeline and run the application.

^{Screenshot of the deployed ToDo app}

Before delving into the step-by-step execution of the application, you can simply click the Deploy to Azure button. This will instantly deploy the app to Azure Spring Apps.

Deploy to Azure Spring Apps
Consumption plan
Basic/Standard plan
Enterprise plan

Prerequisites

The following prerequisites are required to use this application. Please ensure that you have them all installed locally.

• Azure Developer CLI 1.2.0 or later
• Java 17 or later - for API backend
• Node.js with npm (16.13.1+) - for the Web frontend
• Docker
• Powershell 7 if you use windows

If you are using Azure Developer CLI with the version lower than 1.2.0, then you will need to enable the feature for Azure Spring Apps support manually by the following command:

azd config set alpha.springapp on

Quickstart

To learn how to get started with any template, follow the steps in this quickstart with this template(Azure-Samples/ASA-Samples-Web-Application).

This quickstart will show you how to authenticate on Azure, initialize using a template, provision infrastructure and deploy code on Azure via the following commands:

# Log in to azd. Only required once per-install.
azd auth login

# First-time project setup. Initialize a project in the current directory, using this template. 
azd init --template Azure-Samples/ASA-Samples-Web-Application

# Provision and deploy to Azure
azd up

The template uses Azure Spring Apps Standard consumption and dedicated plan by default. If you want to switch to Standard plan, you can use the following command before running azd up.

azd env set PLAN standard

If you have already provisioned the resources with the Standard consumption and dedicated plan and want to try the Standard plan, you need to run azd down first to delete the resources, and then run the above command and azd up again to provision and deploy.

Application Architecture

This application utilizes the following Azure resources:

• Azure Spring Apps to host the application
• Azure PostgreSQL - Flexible Server for storage

Here's a high level architecture diagram that illustrates these components. Notice that these are all contained within a single resource group, that will be created for you when you create the resources.

This template provisions resources to an Azure subscription that you will select upon provisioning them. Please refer to the Pricing calculator for Microsoft Azure and, if needed, update the included Azure resource definitions found in infra/main.bicep to suit your needs.

Application Code

This template is structured to follow the Azure Developer CLI. You can learn more about azd architecture in the official documentation.

Next Steps

At this point, you have a complete application deployed on Azure. But there is much more that the Azure Developer CLI can do. These next steps will introduce you to additional commands that will make creating applications on Azure much easier. Using the Azure Developer CLI, you can delete the resources easily.

• azd down - to delete all the Azure resources created with this template

Additional azd commands

The Azure Developer CLI includes many other commands to help with your Azure development experience. You can view these commands at the terminal by running azd help. You can also view the full list of commands on our Azure Developer CLI command page.

Reporting Issues and Feedback

If you have any feature requests, issues, or areas for improvement, please file an issue. To keep up-to-date, ask questions, or share suggestions, join our GitHub Discussions. You may also contact us via AzDevTeam@microsoft.com.