Wanted: Help understanding Sample code in Azure Samples for Azure Static Web Site Deployment

Siegfried Heintze 1,906 Reputation points
2023-12-12T16:39:42.8666667+00:00

So far, I've been trying to reverse engineer the process by which the Azure Static Web Site Extension for VS code creates an azure static web site and this is proving to be very difficult (see https://learn.microsoft.com/en-us/answers/questions/1403355/how-to-automate-azure-static-web-app-deployment-to). In this approach, my github workflow needs to create an azure static web site (perhaps with bicep), grab the deployment token, encrypt it with libsodium and update the secret in my github repo and trigger the github workflow created by the VS code extension to deploy the angular code in the github repo.

I just discovered https://github.com/Azure-Samples/todo-csharp-sql-swa-func and it works (yahoo!) with azd. (I just love code that works!) I see they even use azd in the github workflow! Very interesting! It does not seem to be using secrets in the github repo like the VS Code approach. Is there any documentation or tutorials on the approach used in this sample from https://github.com/Azure-Samples? I'm having trouble understanding how they get the react source code out of the github repo into the static web site (server).

Thanks

Siegfried

Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
{count} votes

Answer accepted by question author
  1. Ajay Kumar N 28,161 Reputation points Microsoft Employee Moderator
    2023-12-22T10:23:38.4633333+00:00

    Where do I find the values for vars. AZURE_CLIENT_ID, vars.AZURE_TENANT_ID and secrets.AZURE_CREDENTIALS?

    AZURE_CLIENT_ID and AZURE_TENANT_ID are related to your Azure Active Directory (Microsoft Entra ID) application. You can find these values in the Azure portal:

    1. Sign in to the Azure portal.
    2. Go to Azure Active Directory (Microsoft Entra ID).
    3. Select App registrations.
    4. Find your App that you want the Client ID for.

    User's image

    Once you find your concerned Service Principal , you can get its ClientID, TenantID and Secret ID as shown below:

    User's image

     
    If you don't have an app created, you can create an AAD app from here: Quickstart: Register an app in the Microsoft identity platform - Microsoft identity platform | Microsoft Learn

    Why is there a CLIENT_ID and TENANT_ID? Should I be able to look at a new Azure AD app registration somewhere?

    CLIENT_ID and TENANT_ID are used for authentication with Azure AD. The CLIENT_ID is the unique identifier of your application within your directory, and the TENANT_ID is the unique identifier of your Azure Active Directory instance. You may view these details in the Azure portal under Azure Active Directory (Microsoft Entra ID) > App registrations as shown in above screenshot.

     

    What does “azd provision” do? Where is the documentation for “azd provision” and “azd deploy”?

    azd provision is a command that provisions the necessary Azure resources for your application.The documentation for these commands can be found on the Azure Developer CLI reference page. More info here.

     

    Which one of these commands copies the javascript code to the static web site?

    The azd deploy command is responsible for deploying your application’s code, which includes copying the JavaScript code to the static website.

     

    Where is the resource group and name for the static web site stored?

    The resource group and name for the static web app are not explicitly stored but are part of the Azure resources provisioned for your application.

    When you create a Static Web App, you specify the resource group and name for the Static Web App. To fetch this, you Sign in to the Azure portal.

    Navigate to the Static Web Apps service.

    Select your Static Web App.

    The Overview page will display the details of your Static Web App, including the resource group and name. Refer this doc

    Apologies you faced issues while posting a comment/leveraging Q&A, I'll relay the feedback to our platform team.

    (I'll convert comment to answer)

    ----- 

    If the answer helped (pointed, you in the right direction) > please click Accept Answer

    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.