Deploying an App Service in Azure and Connecting to SQL Database
Tags: appservice, azure, database, sql
Published: 2023-05-21 22:12:23



Mama, i made it..lol
I have finally completed the 8-week intensive cloud computing class with She Code Africa! And this happens to be so insightful and educating.
In this blog post,i will walk through the process of deploying an App Service in Azure and connecting it to a SQL database.
 By following these steps, you'll be able to deploy your application and ensure seamless data connectivity. 
Let's get started!

##Step 1: Cloning the Git Repository and Installing Dependencies

Open your terminal and navigate to the desired location for your project.
Run the following command to clone the Git repository: git clone <repository-url>.
Change into the project directory using cd <project-directory>.
Install the project dependencies by running npm install.
Start the application locally with npm run start to verify that everything is working as expected.
Build the application using npm run build. This will generate a build folder containing your production-ready code.

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

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

##Step 2: Creating an App Service in Azure

Log in to the Azure portal (portal.azure.com) using your credentials.
Click on "Create a resource" and search for "App Service" in the search bar.
Select "App Service" from the results and click on "Create" to begin the deployment process.
Fill in the required information, such as the subscription, resource group, and app name.
Choose the appropriate runtime stack and version for your application.
Select your preferred region and pricing tier (e.g., free, basic, standard).
Click on "Review + create" and then "Create" to deploy the App Service.

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

##Step 3: Deploying Your Application to the App Service

Once the App Service is deployed, navigate to your resource in the Azure portal.
In the app overview, click on "Advanced tools" and then select "Go" under the "Development Tools" section.
This will open the Kudu console for your App Service.
In your local file explorer, locate the "build" folder generated in Step 1.
Drag and drop the contents of the "build" folder into the Kudu console.
Wait for the files to be uploaded and deployed to your App Service.

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

##Step 4: Configuring App Service Settings

Go back to your App Service resource in the Azure portal.
Under the "Settings" section, click on "Configuration".
Configure any necessary environment variables or application settings required for your application.
Ensure that the necessary connection string settings for your SQL database are properly configured.

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

##Step 5: Creating an Azure SQL Database

In the Azure portal, navigate to your resource group or click on "Create a resource" and search for "Azure SQL Database".
Select "Azure SQL Database" and click on "Create".
Provide the required information, such as the subscription, resource group, and database name.
Choose the appropriate pricing tier and configure the necessary settings.
Click on "Review + create" and then "Create" to create the SQL database.



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

##Step 6: Connecting the App Service to the SQL Database

Once the SQL database is created, go back to your App Service resource in the Azure portal.
Under the "Settings" section, click on "Configuration".
Locate the connection string settings and click on "New Connection String".
Provide a name for the connection string and paste the copied ODBC connection string value into the "Value" field.
Save the configuration settings.


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


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

Here is our Wordle Clone app looks great doesn't it?


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

Please remember to like, share and follow me for more, i am so inspired by your immense support , Thank you to ShecodeAfrica for such much knowledge transfer within the space of 8 weeks, God bless you all.