# Az-204 - Lab 1 to Lab 10

## **Lab 01 -** Build a web application on Azure platform as a service offering

For complete instruction please visit [microsoft learn github](https://github.com/MicrosoftLearning/AZ-204-DevelopingSolutionsforMicrosoftAzure) here we will do the following:

* Creating a web application on Azure by using the PaaS model.
    
* Uploading existing web app files by using the Apache Kudu zip deployment option.
    
* Viewing and testing the newly deployed web application.
    

## Lab Scenario

%[https://www.youtube.com/watch?v=EiSEcU9qjfo&ab_channel=MicrosoftTrainerCommunityChannel] 

![Architecture diagram depicting a user building a web application on Azure platform as a service offering.](https://raw.githubusercontent.com/MicrosoftLearning/AZ-204-DevelopingSolutionsforMicrosoftAzure/master/Instructions/Labs/media/Lab01-Diagram.png align="left")

1. Create a storage account of imgstor50403225 and go to the resource > **Access keys** > copy a **Connection string** to Notepad then
    
2. Go to the Storage Account > **Containers** > **\+ Container** > name it imagesupload blob
    
3. Create a web App (API) of imgapi50403225 with runtime of .net 8 LTS
    
4. Configure the web app to storage account using the connection string from notepad
    
5. Deploy the API with openning vs code and the folder downloaded from this location: [https://github.com/MicrosoftLearning/AZ-204-DevelopingSolutionsforMicrosoftAzure/tree/master/Allfiles/Labs/01/Starter/API](https://github.com/MicrosoftLearning/AZ-204-DevelopingSolutionsforMicrosoftAzure/tree/master/Allfiles/Labs/01/Starter/API)
    
6. Enter the following CLI command:
    

```powershell
az login
az webapp list --resource-group ManagedPlatform-lod50403225 --query "[?starts_with(name, 'imgapi')].{Name:name}" --output tsv
cd C:\Allfiles\Labs\01\Starter\API
az webapp deployment source config-zip --resource-group ManagedPlatform-lod50403225 --src api.zip --name <your-api-name>
```

7. To create Front-End Web App Repeat Web App creation:
    

* **Name**: imgweb50403225
    
* **Use existing plan**: ManagedPlan
    
* Same stack/region/OS
    
* Disable Insights, then **Review + create** &gt; **Create**.
    

8. To configure Front-End Go to app &gt; **Configuration** &gt; **\+ New application setting**:
    

* * **Name**: ApiUrl
        
    * **Value**: Your previously copied API URL (with https://)
        
    * Click **Save**.
        

9. To deploy Front-End, In VS Code &gt; Open Folder: C:\\Allfiles\\Labs\\01\\Starter\\Web.
    
10. In terminal:
    

```powershell
az login
az webapp list --resource-group ManagedPlatform-lod50403225 --query "[?starts_with(name, 'imgweb')].{Name:name}" --output tsv
cd C:\Allfiles\Labs\01\Starter\Web
az webapp deployment source config-zip --resource-group ManagedPlatform-lod50403225 --src web.zip --name <your-web-name>
```

11. To test the App, Browse to your front-end app, You should see grilledcheese.jpg in the gallery. Upload banhmi.jpg using the UI. Refresh if needed.
    
    ---