Creating a Node.js web app service and SQL Database in Azure

Hello everyone.
Today I will show you how to create a web app service and SQL Database in Azure. We will use a node.js web app for this practical.

1. Login to Azure Portal
To be able to access these services in azure, make sure to log in to your azure portal using your credentials
2. Create an App Service
Once you are logged in to your portal, navigate to the search bar and search for app service.
Create a resource group for the services you are about to deploy as shown below

Specify the instance details by filling in the name, choosing what to publish, in this case will be the code, the runtime stack which in this case will be NODE 16 LTS, operating system to be linux and region being East US.

The pricing plans and zone redundancy has already been predetermined by Azure. So you can leave it as is.

Next will be configuring your deployment by clicking on 'Next: Deployment' button

To be able to continuously deploy your app you will have to enable Github Actions.
You have to select Github details so that Azure can be able to access your repositories.

After that, we will click on "Next: Networking" to configure the networking details.
Make sure to enable public access to the internet and disable network injections
You have to make sure that the project you are deploying is a Nodejs project before deploying. I used this repository and you can fork it to your github in order to test it out.

The rest you can leave to default and proceed to review + create
Click on create and wait for it to deploy. After deployment you can go to resources and check out your app service details.

3. Create a database
Navigate to search bar and search for SQL Database and click on create.
Fill in your project details by filling in a resource group. It is advisable to use the same one as your app service for easy management.

Click on create server and fill in your details as follows

To avoid high costs of using a database, click on configure and choose a basic service tier because it fits your workload and in this case is a simple web app.

You can also choose how your database is replicated by using backup storage redundancy. In this case I went with the default which is geo-redundant back-up storage. Then we click on "Next: Networking"

The networking part is the most important part as it will be the determinant of whether your web app can access the database or not.

Choose the public endpoint for your connectivity method as it allows connectivity to the server. Also make sure to click yes on the firewall rules that allow Azure services and resources to access this server. This allows communications from all resources inside the Azure boundary, that may or may not be part of your subscription.

For the connection policy and encrypted connections, you can leave it to the default setting.

For security settings, additional settings and tag settings, you can leave it as it is and click on "Review + Create"

Confirm all your details and click on create. It will take a few minutes and once it is done deploying you can go to resources to check out your database.

4. Connect your app service to database using connection string
To connect your web app to the database you created, head over to your database and on the side navigation, click on connection strings. Click on ODBC and copy the string provided below it.

Then head over to your app service, and on the side navigation select configuration which is under settings.
On application settings, click on new application setting and choose whatever name you want to give it and in the value field, paste the string that we copied from the database ODBC tab and click ok to save it. This will allow connection to the database.

5. View your deployed web app
To view your deployed app, you go back to the overview page of your app service and click on the url that has been provided under 'default domain' tag.

There you have it. You can now deploy your own Node.js web app in Azure which is connected to a database.
Here is the final link to the deployed web app
Make sure to sign up and log in in order to get the full experience of the web app.

Happy Learning!!!