Deploying a 3-tier application to Azure App Service with Azure SQL Database

Prerequisites

First, you will need to install Node.js and npm on your local computer.
You can get these tools from the official Node.js website if you do not already have them.
Additionally, an Azure account is required. By registering on the Azure website, you can create an Azure account if you do not already have one. Azure.
You will be prepared to move on with hosting your React app in Azure after these conditions are met.

I will be showing you two methods to get your react App

1. creating and building react app
2. cloning a react app

1. Create and Build React App

As the first step, you need to create a React app. Open a terminal or command prompt and navigate to the directory where you want to create your project. Then, run the following command:

npx create-react-app my-app

This will create a new React project called “my-app” in the current directory. After creating a new React project. Navigate to the project directory by running the following command:

cd my-app

npm start

This will start the development server and open your React app in a web browser at

http://localhost:3000

Then you can see the initial view of your react app like this.

Default React application browser view

You can make changes to your app and see the changes in real-time. because this post is about hosting a React application.

Once you’re happy with your React app. you can build it for production by running the following command:

npm run build

This will create a build folder containing all the necessary files for deployment.
Now that you have created and built your React app, you’re ready to move on to hosting it in Azure.

2. cloning a react app

copy the url to the git you want to use.

open your vs-code terminal and run this command

git clone <your-git-url>

then cd in to folder of the new repo you cloned

cd <name-of-repo>

afterwards download gitbash, open your gitbash, make sure you are using gitbash from your vscode terminal or directly from the gitbash app.
check the picture to find your gitbash using vscode:

we have to install Node.js because git ignores node modules, if you run:

npm run start

you will get an error saying sh: 1: react-scripts: not found, to solve this problem run the following command

npm install

if you run npm run start and you fid this error 'react-scripts' is not recognized as an internal or external command
run the following to fix it

npm install react-scripts --save

afterwards run npm run start to run the react app on your localhost.

you should see whatever you coded on your react-app, it might give you a link like https://localhost:3000 copy that and paste on your browser or it opens it on your browser for you automatically after its successful

Once you’re happy with your React app. you can build it for production by running the following command:

npm run build

This will create a build folder containing all the necessary files for deployment. Now that you have created and built your React app, you’re ready to move on to hosting it in Azure.

Deploy React app In Azure App Service

The next step is to sign in to your Azure account. If you don’t already have an Azure account, you can get one by signing up on the Azure website. After that, activate the free tier by following the instructions. Once you signed in, you will be able to see the Azure dashboard like this.

On the Azure dashboard, click on the App Service, and then click on Create. Then you will be able to see the following form for creating the web app.

Fill out the above form following the following instructions.

1. Subscription — If you are running with a free tier plan, select your free subscription.
2. Resource Group — Create a new Resource Group for this app and select that resource group for this field.

1. Name — Add the name for this app service after deployment has to use this name in the link to access this service. the link is in this type {yourAppServiceName}.azurewebsites.net
2. Publish — Select the code radio button for this because we are going to host our application as a code.
3. Runtime Stack — Select the node environment in the dropdown list. to check the node verse of your react, go to your vscode terminal of your react folder, run this code to view the version:

node --version

1. Operating System — Choose the operating system as Windows.
2. Region — Select the closest region to you or leave it at default.

1. App Service Plan — Leave App Service Plan as default. Or you can select the resources according to your requirements and specifications for the service.
2. Then click on “Review + Create”, and when your review is complete, click on “Create”

After clicking on “Create” it brings a few minutes to complete the deployment. After that, you will able to a view like this with the message “Your deployment is complete”.

Then go to the resource by clicking “Go to Resource”. By clicking go to resource, it will redirect to the following window.

By opening the URL in a new tab, you will able to see a view like the following. Because until now, we not host our web application. It shows the initial view of the App service.

Let us upload our React application to this service now. Within the app service, We must first navigate to the "Advance Tools" section of the newly built app service. Click on "Advanced Tools" in the side menu search bar to find it. Once you select "Go," you will see a view similar to the one below.

As the next step, you can see this window. After that go to “CMD” in the navigation bar under Debug console.

Then you can see a view like this. After that go to the directory “site” and then go to the “wwwroot” folder.

also

Then you have to directly upload the files inside the build folder of your React application to the “wwwroot” folder. It will take some time to upload.

you can locate the "build" folder from your file explorer then just drag it to the "wwwroot" folder.

here

here

After uploading the files inside the build folder, go to the overview, URL on your resource page or App service. You will able to see deployed react application. The link is in this type {yourAppServiceName}.azurewebsites.net or you click on the "Browse".

after the url opens you should see what was in your localhost:3000 earlier.

Azure offers a simple and effective platform for hosting React apps. You may quickly deploy your React application to Microsoft Azure by performing this step.

Now connecting your Azure SQL Database to your App service

Create a new Azure SQL Database:
In the Azure Portal, search for "Azure SQL Database."

Click on "Azure SQL Database" from the search results and then click on the "Create" button.

select the same resource group with your app service

(I HOPE YOU REMEMBER), if you don't, navigate back to home, you will see the resource you created check the name and follow this azure sql steps again

Provide a name for your database, create a new server,

provide a name for your server and a location.

for the authentication session select "SQL Authentication", then input your server admin login and password. Then click "ok"

for the compute + storage click on "configure database" to edit it based on what you want and cost.

for me i selected basic for the cheapest:

for backup storage redundancy, select Geo-redundancy backup storage.

click on Next:Networking, connectivity method click on "public access"

also

Click "Review + create" and then "Create" to create the Azure SQL Database.

Obtain connection string:
In the Azure Portal, navigate to your Azure SQL Database.

Under the "Connection strings" section, copy the connection string for ADO.NET, JDBC, ODBC, PHP or GO, depending on your preferred programming language and database driver for me I use ODBC for Node.js.

Connect your app service with the database
In the Azure Portal, navigate to your app service.

Under the "Settings" section, click on "Configuration" and then on "Application settings."

Add a new application setting with the name "ConnectionStrings:DefaultConnection" (or any name you prefer) and paste the connection string you obtained in the previous step as the value.

you can test your app by accessing the URL of your app service. It should now be connected to the Azure SQL Database.

That's it! You have successfully built an app service and connected it with a database using Azure. Remember to properly secure your database and implement appropriate access controls for your app service and database.