Exercise 1 - Deployment of a sample custom website
In this exercise, you'll deploy a multipage ASP.NET website to a free tier Azure App Service on Microsoft Azure by using Visual Studio Code and its extensions.
Important
Make sure that all prerequisites from the previous unit are met before you start the exercise.
Task 1: Open and inspect the provided website code with Visual Studio Code
In this task, you’ll open the provided website code and inspect its CSS and HTML code. Additionally, you’ll find where the <HEAD></HEAD> and the <HEADER></HEADER> blocks of the HTML code are stored.
Download the code for the sample Fabrikam Application website.
Create a directory called MC4R-Clarity under your C:\ drive and then extract the project zip file to that path. The following folder structure should display when you expand the folder in your File Explorer navigation pane tree view.
Open the Fabrikam directory under your C:\MC4R-Clarity directory with Visual Studio Code, for which you’ve already installed the required extensions and .NET SDK, as listed in the previous prerequisites section. To accomplish this task:
Launch Visual Studio Code.
Select the File menu.
Select the Open Folder menu item.
Select C:\MC4R-Clarity\Fabrikam from the file browser and then select the Select Folder button.
Select the Yes, I trust the authors button on the trust notification pop-up window.
Your Visual Studio Code screen should resemble the following screenshot.
From the Explorer pane of Visual Studio Code, expand the >Pages > >Shared sub directory and then select _Layout.cshtml. The <HEAD></HEAD> section should display, where you’ll change to integrate any website with Microsoft Clarity.
The <HEAD> section is the Document Metadata (Header) element of HTML web development language, and it contains machine-readable information (metadata) about the document, such as its title, scripts, and style sheets. It shouldn't be confused with the <HEADER> section, which is a sub section of the <BODY> section.
Task 2: Deploy the web application to Azure App Service
In this task, you'll deploy the sample application to Azure App Service by using the Visual Studio Code Azure App Service extension. To complete the deployment, follow these steps:
From the Explorer window, find and then right-click the publish folder, and then select the Deploy to Web App menu item.
The Command Palette will open in the upper section of Visual Studio Code and will ask you to sign in to your Azure account.
After signing in, from the Command Palette, you'll be asked to select a subscription from a list of subscriptions. Select the subscription that you want to use for this exercise.
The next prompt will ask you to select a web app. In the Select Web App menu, select Create new Web App... Advanced. If you select Create new Web App, you won't be able to specify in which Azure region that you want to create the service.
Enter a unique name for your web app (such as your username). This name will be part of the URL that you’ll use to access your website; therefore, it must be unique. The name can only contain letters, numbers, or hyphens.
Select your choice of Azure resource group that will contain the app service.
Select the runtime stack. Because your application is a .NET 6 application, as stated in the previous prerequisites section, select .NET 6(LTS).
Choose your operating system. For this application, in the Select an OS menu, select Windows.
Select an Azure region that will host the Azure App Service. Choose a region that’s geographically closest to you to have the maximum network performance.
Select + Create new App Service plan to create the app service plan for your app hosting.
Choose a name for your Azure App Service plan, type it into the field, and then press the Enter key.
For this lab, you don't need a powerful hosting, so you can select Free (F1).
Skip the Create new Application Insights resource step by selecting Skip for now.
When setup is complete, a notification will appear (resembling the one that’s shown in the following screenshot) in the lower-right corner of Visual Studio Code to monitor the process of your website's deployment.
When the deployment has finished, you can select Browse Website to access your deployment. Don't forget to save the URL information of the website.
If another pop-up window appears (similar to the one shown in the following image), asking whether you'll deploy this project always to the same web app, select Yes. This setting will help make it easier for you to deploy when you’re completing the necessary changes for the Clarity integration on the web app.
Congratulations, you’ve deployed your website. Make sure that you save the URL information of the website because you’ll need it in subsequent exercises.