Deploying a 3-tier application to Azure App Service with Azure SQL Database
Published: 2023-05-21 20:20:37

#### 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](https://azure.microsoft.com/en-us/). 
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.

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

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:

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


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

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.

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

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. 


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

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

<u>Fill out the above form following the following instructions.
</u>
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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vl8wafetqd6xvzs2ak2s.png)
3. 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
4. Publish — Select the code radio button for this because we are going to host our application as a code.
5. 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
```
6. Operating System — Choose the operating system as Windows.
7. Region — Select the closest region to you or leave it at default.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tu7d372rqnupym61ll6k.png)
8. App Service Plan — Leave App Service Plan as default. Or you can select the resources according to your requirements and specifications for the service.
9. Then click on “Review + Create”, and when your review is complete, click on “Create”

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

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

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”.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtodct4shxqj2q7j5xh5.png)
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.


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

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.

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

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

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

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

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

also

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

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.

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

here

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

here

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

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".


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/veuqi01sbs2q9oxm618a.png)
after the url opens you should see what was in your localhost:3000 earlier.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2brddy4kdqni945t3nv.png)
**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.**

## <u>Now connecting your Azure SQL Database to your App service</u>
**Create a new Azure SQL Database:** 
In the Azure Portal, search for "Azure SQL Database."

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

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

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

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,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxnvbgdipic14zuhz1ek.png)
provide a name for your server and a location.

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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5bq9s6onxuy3agg4xt7.png)
for me i selected basic for the cheapest:

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

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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no852vt5bgzqhh0w0vbz.png)
Click "Review + create" and then "Create" to create the Azure SQL Database.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fewzcm1ufkosz69w8k4.png)

**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.

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

**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." 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4lftewzvysdmvnf037y.png)
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.


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

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.