Table of contents
No headings in the article.
Recently I finished my university degree and thought of creating a portfolio website for myself. I looked into the GitHub Student Developer Pack, and saw Azure giving free credits and also Namecheap giving 1 year of free registration of the .me TLD. In this short article, I am gonna show how you can easily use a domain bought from Namecheap with the Azure static web app.
I used Azure Pack extension for VS Code to scaffold the project. I won't be going much deeper into how to deploy a web app with Azure in this article as it is out of scope but it was really easy to set it up with the extensions as they took care of the CI/CD automatically (Maybe in another article if anyone is interested 🙂).
Okay, I am now assuming, you have already deployed your web app and you got a ***.azurestaticapps.net domain. Now you want to use the custom domain you brought from Namecheap (or any other seller). Let's click on the Custom domains tab on the sidebar in your Azure Web app settings.
Clicking on the + Add button will give you two options. Choose Custom domain on other DNS. Add custom domain pane will open up and there you put the domain you own.
Considering your domain is valid and you click Next, it will ask you to generate a code to Validate domain ownership
It will take some time to generate the code, once it gets generated, go to Advance DNS settings of your domain inside Namecheap (or any other provider) and enter the information the way Azure has asked to.
It takes a good amount of time to get the domain validated so you should now go eat a sandwich or maybe exercise for a while and then come back to the screen.
Okay, I am back after 15 minutes. Azure tells me that my domain has been validated. Time to set up apex domain and www subdomain. What I mean by those terms is that now I need to tell Namecheap, where to point if someone visits anindyac.me or www.anindyac.me.
Fill up the Host Records as shown in the pictures with your ***.azurestaticapps.net domain inside the value option. Make sure you don't have http:// or https:// prefix in that azurestaticapps.net URL.
The ALIAS record lets you access your web app through your custom domain and the CNAME record will let people access it even if they use www subdomain before the domain name.
Now to make your www.yourdomain.com work alongside yourdomain.com, you need to go back to Custom domains settings inside Azure once again. Create a custom domain again like before. But this time add www to the domain name.
Since we have already added the CNAME record in Namecheap like it is showing in the below screenshot, we can just click on Add now.
Now if everything went fine, the Custom domains page will show up like this after a few minutes and your domains will work. 😊
Let me know in the comments if you have any queries or if you have any feedbacks to give to me. Thank you for reading and have a good day or night!
References -