As now you have already in the stage of going live to Internet? Have you already purchased a domain? If you are using Azure Static Web Apps or Netlify that creates subdomain url in example https://.*.subdomain.com and you would prefer to proxy that to your purchased root domain? You are at the right place to ensure this can be done!

Introducing Cloudflare

Ever thought about security, reliability & performance concerns before hosting your website live on internet? Cloudflare provides a platform to provide security, reliability and most importantly performance that caches your website and serve to the nearest Cloudflare server. As easy as the solution sound, we don't need to have a own learning curve to know how to integrate your domain to cloudflare. All you need to do is change your domain nameservers to point to Cloudflare which you can enjoy FREE fast DNS resolution which proxies your domain through Cloudflare.

Simple steps to get you started

1. Create an account with Cloudflare
2. Login to your account and you will be directed to Home page.
3. Click +Add a Site
4. Configure your site(e.g. test.com) as below and click Add Site
   
5. Select a plan which consist Free, Pro, Business & Enterprise
6. Now that you have selected the plan, it's time to set up the DNS to your website domain. There are two configurations which is required to be configured. For my example, I'm using baskaran.dev which re-routes to www.baskaran.dev because most examples in internet uses www.*.com subdomains as an example. Therefore, we will see on how to configure root domains.
   
   As you can see below, this will require two CNAME proxy settings to be configured. Click + Add record
   • baskaran.dev -> www.baskaran.dev with Proxied status.
   • www -> azure static web apps/netlify with DNS only status.
   
7. Once you have managed the DNS records, you will now need to configure your registrar account and change to below CloudFlare's nameservers as your primary DNS controller. If you don't configure the below, you won't be able to proxy your website.
   
   Here are some guides for configuring domain hosting nameservers
   
   • GoDaddy
   • NameCheap
   • BlueHost
   
   Once you have configured your domain hosting nameservers with some pointers on above guides, click Done, check nameservers to complete the nameservers upgrade.
   
8. Now, when you access to your root domain *.com, you will be able to load it successfully. However, when you access to *.com/posts or any subpaths, you will get HTTP 404 Not Found
   Warning:
   Azure Static Web Apps & Netlify requires custom files in hosting environment to ensure when application is refreshed/navigate directly to locations, it will still redirect to the right page.
   You will require to configure CloudFlare Page Rules as below to forward your root domain *.com to *.com/$1 which will perform 301 - Permanent Redirect
   
9. I'll recommend to ensure the below step is configured as we would want to protect the site on every course of security. To configure SSL/TLS, go to SSL/TLS > Edge Certificates and configure the TLS to minimum 1.2 as below:
   
10. SSL Server Test provides great help in ensuring your domain are fully graded with industry security standards. I'll strongly recommend to scan your website domain at least once a month.

In closing

As much as we would want to release our website to internet, we will need to ensure it has followed and adhered to the right security concerns. CloudFlare provide great ease of help in ensuring our websites are protected with security, reliability & performance. Now that we have seen the steps to configure root domains with CloudFlare, are you ready to go live? Good luck!