Front End Application Deployment & Authenticate the Front End with Azure Active Directory
In this article we will deploy our front end application. I have developed a front end application using angular and you can see in my Github repository. Link.
We are deploying the front end application using Visual Studio Code which is a code editor, into an Azure WebApp. So make sure to setup visual studio in your machine and then open the angular application from the VS Code.
First we create a Web App in Azure portal and then we will deploy our application into that. So first open WebApp from Azure portal.
Next add the following configuration in order to create a Web App.
Select/Create a resource group and then select .NET Core 3.1 as the runtime stack and select the region and then select as size as per your requirement and also consider about cost when selecting the size as well.
Next we will build the Angular project.Execute this command in the VS Code Terminal from the root directory of the project.
ng build
Next You need to install the Azure Tools and Azure App Service extension for VS Code.
Then select your subscription and the select your Web App that we have created.
Right click on the selected app and click deploy to Web App. So it will So give the directory /dist/. So then the application will start to deploy. You can watch the deployment results in the output console.
we have deployed our front end application as well. So in the next article we will see how to authenticate our front end application using Azure Active Directory.
We will see how to add authentication for our front end using Azure Active Directory,so only the authenticated users are allowed to view our application.
Azure Active Directory is Microsoft’s multi-tenant, cloud-based directory and identity management service.
The steps to add an Azure Active Directory for our front end application.
Go to Azure Active Directory and then click on App registrations to register our front end application.
- Then click on + New Registration and add the following properties.
- Name- Provide a display name
- Select the account types which can access our application
- Then specify out front end endpoint and click on Register.
In the dashboard we can view the properties like client id, ternant id and object id.
After that through the link commends. We can prompted for an authentication to view the application.
Application Preview
Thank You.
References: