reactjsazureazure-devopsazure-static-web-appazure-static-website-hosting

Deploy ReactJs Azure Static Web App based on Azure DevOps git repo via Azure CLI


I'm actually working on the Continuous Delivery pipeline for the UI project made in ReactJs with the use of the Azure Static Web App. I want to create and deploy the static web app to Azure based on the git repo located in Azure DevOps. The reason behind this is I see a huge opportunity to create a Pull Request Environment pipeline for the system I work on every day with the usage of static web apps which seem to be a super cheap and fast solution! Then the pipeline would allow testing the Pull Request changes in isolation before releasing to DEV, QA,... Prod environments.

Anyway, straight to the point. The official Microsoft documentation provides only an example of how to do this for GitHub repo but I cannot find any info on how this can be achieved when using Azure DevOps git repo:

az staticwebapp create \
    -n my-first-static-web-app \
    -g <RESOURCE_GROUP_NAME> \
    -s https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app \
    -l <LOCATION> \
    -b main \
    --app-artifact-location "build" \
    --token <YOUR_GITHUB_PERSONAL_ACCESS_TOKEN>

I thought that the way the az staticwebapp create works in the provided example should be analogical with the Azure DevOps. I thought that equivalent of YOUR_GITHUB_PERSONAL_ACCESS_TOKEN in Azure DevOps would be an access token that can be generated: enter image description here

When I try to run the following code:

az staticwebapp create -l westus2 -n appNameTest1 -g TestPrEnvResourceGroup -s "https://dev.azure.com/myOrganisationName/myProjectName/_git/myRepoName -b "main" --token "generatedTokenValuefwfsdgsgsd"

I'm getting the following exception;

Command group 'staticwebapp' is in preview and under development. Reference and support levels: https://aka.ms/CLI_refstatus Operation returned an invalid status 'Bad Request'

enter image description here

Also, I don't think it can matter but the TestPrEnvResourceGroup is created under the UK West location. It doesn't tell me much, like if the token or some other parameter is wrong...

Any ideas? Cheers


Solution

  • Have you tried this way?

    You need to generate a deployment token from the Azure Static Web App and have it in the YAML

    I tried the same for Angular app and it worked pretty well

     azure_static_web_apps_api_token: $(deployment_token)
    

    UPDATE : As per the Github issue , currently this is not supported.

    We currently don’t support automatically creating Azure DevOps pipelines. This is the supported path for using Azure DevOps: https://learn.microsoft.com/en-us/azure/static-web-apps/publish-devops

    You can vote for the feature here