SpringBoot + ReactJs Web Application Deploy on Azure
Tags: azure, springboot, react, deploy
Published: 2023-01-08 13:14:28

Greetings to everyone,
I am Shashank Today I want to tell you how you can deploy Springboot and Reactjs application in Azure. So without worrying about this how to do it. Follow these following steps.
I will deploy springboot and recatjs application in azure appservice. So before going to azure appservice let's have a look what is azure appservice.

## **Azure AppService**
Azure App Service is an HTTP-based service for hosting web applications, REST APIs, and mobile back ends. You can develop in your favorite language, be it .NET, .NET Core, Java, Ruby, Node.js, PHP, or Python. Applications run and scale with ease on both Windows and Linux-based environments.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhhvwwr4dauvbibemx4x.jpg)
App Service not only adds the power of Microsoft Azure to your application, such as security, load balancing, autoscaling, and automated management. You can also take advantage of its DevOps capabilities, such as continuous deployment from Azure DevOps, GitHub, Docker Hub, and other sources, package management, staging environments, custom domain, and TLS/SSL certificates.





## Follow the Following Steps to deploy the Application in Azure
     
     
     
   

## 1.) Start the SpringBoot Application in localhost
Before deploying the Application in azure check the Application is perfectly running on localhost or not. If the application running on localhost perfectly then deploying the application on azure.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8i90lpfk8wji4rclrij.png)



## 2.) Download the Filezila File Transfer Application
The next step of the deploying the application on azure is download the latest version of the FileZila software. After download the application open this application and configure all the access.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdydxv574awa09rtxlo2.png)

## 3.) Add the below dependancy in pom.xml file
`<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>`

above dependancy code add on the
`<dependencies></dependencies>`
section.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6dpd9zkgrwjr471lurt.png)

## 4.) Run the following Maven Command
First command is
`mvn clean`
Second command is 
`mvn install`
You can run this command go to the maven section in InteliJ IDEA.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyedfl4dqiuug7jurusz.png)

## 5.) Genrate war file
after mvn install command a war file is generated.
if war file is not generated then add this code in pom.xml after the artifact id and version of the project. and again run maven install command
`<packaging>war</packaging>`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkjy85xf409du3m8wzg2.png)

## 6.) Create App Service in Azure
For Creating app service in Azure follow following steps.


**a.) Go to Azure and select the _<u>Create a Resourse</u>_ option**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrbhn118wbwsmj787ivp.png)



**b.) Choose the _<u>Create Web App</u>_ option**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3wlb1zthebv1bnrqk0g.png)


**c.) Write the name of the project and select the _<u>Java & Tomcat version</u>_ which is used in the project** 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qya0zm68bvbt13ba0v10.png)



**d.) Click the _<u>Create</u>_ option**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf9h9u8ss1a8m42g8gv7.png)

**e.) Click the _<u>Go to Resourse</u>_ option**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3uugke650hcwep72qooy.png)

**f.) _<u>Stop</u>_ the web App**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psbq4wntpq8n8fz5a4gt.png)


## 7.) Copy the Username, Password & FTPS endpoints in App Service 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0y0ci8iy24waw39v4m5.png)

## 8.) Paste these details in FileZila
Ftps end point address paste in the host section then paste the username and password then click on quick connect option. after seccuessflly connected show the details in right section.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irh4uh9hjnqpkcxugnue.png)

## 9.) Create the webapps folder in wwwroot folder using right click create directory option and delete the hostingstart.html


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9e9zl6xfmmm6nqy5awa.png)

## 10.) Deploy the war file in webapps folder using right click upload option.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4n2y27mnf25pozj21q1.png)

## 11.) Start the Azure Web App

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkrvts5ikofloy8de2qs.png)


## 12.) Final Result

finally Springboot + RecatJs application running on the azure server.




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uy90n6fz1xtbx1ziecja.png)