Build, Deploy, Configure CI &CD Your Static Website in 5 mins
If you have a static website that has contents like HTML, CSS and images and you would like to host them, you can do that in 5 mins with the help of Azure Static Web Apps. Some of the key benefits of static web app are globally distributed content without the need of CDN, free auto-rotated SSL certificate, API support with Azure function. Here in this post we will see how we can create, build, deploy the Azure Static Web app.
Prerequisites
- You must have a repository that has your static files
- You must have access to Azure portal
Create Azure Static Web App
Go to the Azure portal and select the static web app. Under the deployment settings, make sure you select the Azure devops repository where the static files are pushed.
For the build preset, select one that suits your project, here I am selecting HTML. The app artefact location or output location is based on the preset that you select. For HTML it is “/”, you can learn more on that here.
When you click on the Review + Create button on the portal, the build and release pipeline will be created with YAML file that you can edit later.
You may get the error below when you click the Create button.
Failed to create a Personal Access Token for this user in Azure DevOps. Please deploy your app using the ‘Other’ deployment source instead of ‘Azure DevOps’. After the app is created, open it and follow the instructions to get the token and deploy your app.
If that happens, as the error suggested, select the deployment source as Other and proceed. We will need to configure the deployment once the app is created.
You can also create the static web app using the ARM template, Bicep or Terraform. Read about that here and here.
Configure CI & CD deployment
Once the app is created, you can go to the URLs given for your app and you should see a start page as below.
Click on the Manage Deployment Token button under the overview pane and copy the deployment token. We will be setting this value as a secret in our pipeline later.
Go to your Auzre DevOps and click on the Pipelines. Click on the New pipleline and select your repository from Azure DevOps. In the configure tab, select Starter pipeline. Replace the content with the below codes.
https://gist.github.com/SibeeshVenu/1c9eeb3a54ebb4bc6a240de46e1e4f61
Click Save and run, the pipeline will fail for the first time as we have not set the deployment_token varible in the pipeline yet. Go to the created pipeline and click on Edit, click on Variables and then click New variable. Set the variable name as deployment_token and paste the deloyment token we copied as the value. Remember to set the value as secret. There are many ways to set the secret for your pipelines, you can read about those here and here.
Run your pipeline again. This time, the pipeline should be successful and you should be able to load your Static web app with your contents now.
Configure Custom Domain
Goto your Static web app and then click on the Add a custom domain tile.
Select the appropriate option as per your needs. I am selecting Custom domain on other DNS.
Enter the domain and select the Hostname record type, here I am selecting CNAME.
If you give the domain without www in it, you may get the below error.
Request Envelope is invalid. Apex Domains must use dns-txt-token as the ValidationMethod.
You can learn more about the custom domain here. Copy the CNAME hostname record and add it to your DNS provider to confirm your domain ownership. It can take up to 48 or 72 hours for DNS entry changes to take effect. Once that period is over, you can come here and try to add the custom domain again. Once it is added you should see a Status as “Validated”.
If you want to add the custom domain without “www” in it, then you must add a TXT record with the host as “@” and value as the code generated in the static web app’s custom domain section in your domains DNS configuration. You can learn more here.
Learn More
You can learn more about the Static Web App from the tutorials below.
- Comparing Azure Static Web Apps vs Azure WebApps vs Azure Blob Storage Static Sites
- Quickstart: Build your first static web app
- Static Web Apps pricing
Conclusion
In this post we have seen how easily we can creat an Azure static web app, how to deploy or configure CI & CD with your new static web app, and how to configure the custom domain name to your static web app.
About the Author
I am yet another developer who is passionate about writing and sharing knowledge. I have written more than 500 blogs on my blog. If you like this content, consider following me here,
Your turn. What do you think?
Thanks a lot for reading. Did I miss anything that you may think is needed in this article? Could you find this post useful? Kindly do not forget to share your feedback.
