>> Hey folks, my name is
Burke and in this video we're going to take a look at how
to set up a custom domain with Azure Static Web Apps.
It's pretty straightforward, but
there's a few things that you got to know.
Let's check it out.
In this video, we'll set up
a custom domain for an Azure Static Web App.
First, we'll configure the www sub-domain.
Then we'll configure the root domain.
A root domain is just the domain without
any www or any other sub-domain.
First, navigate to your Static Web App in the Azure portal.
Select the custom domains item in the sidebar.
Next, click the "Add' button,
input the domain into
the Domain Name field with the desired sub-domain,
in this case, www.
Click "Next". The next step
is to validate this sub-domain by creating
a CNAME record with
my domain provider that points to this Static Web App.
To do that, copy this value using the clipboard icon.
Now log in to your domain provider and
find the domain configuration settings.
Add a new CNAME record,
enter www for the host field,
and paste in the URL you copied from
the Azure portal for the value field.
Back in the Azure portal,
click the "Add" button.
Azure will now add the sub-domain to your static web app.
This can take awhile depending on how long it takes for the DNS
changes that you just made to propagate from your provider.
Then Azure will take care of setting
up an SSL certificate for you,
which takes some additional time.
You can refresh this main page to see
the current status of your sub-domain.
Azure reports that the sub-domain is now ready and you can
test it by navigating to www dot your domain.com.
Now, we'll configure the root domain.
Click on the "Add" button on the custom domain screen,
enter the domain without the www portion.
The next step is to validate that I own this domain by creating
a TXT record with
the domain provider with a code given to me by Azure.
Click on "Generate code" to get
that code that you'll need for validation.
This can take several minutes.
When the code has been generated.
Click the copy icon to copy the value to your clipboard.
You'll see that it says validating out here to the side.
This means that Azure is waiting
for you to create the TXT record with
your domain provider so that it can validate
that you own this domain. Let's do that.
Login to the domain provider
and find the DNS configuration screen.
On the DNS configuration screen,
add a new TXT record type,
set the name to the add sign,
and paste in the generated code value
from your clipboard for the value field,
make sure you save the record so that it is created.
Now Azure will validate this TXT record.
You don't have to do anything to start
that process because it's already running.
You can check on the progress by returning to your static site
in the Azure portal and looking under custom domains.
This can take awhile.
You can close the configuration fly out if you like,
and just refresh the main section to see progress.
Once the TXT record validation is complete,
a green check mark will appear next to it with the text ready.
Now you can complete
the root domain setup by adding an alias record.
First, you'll need the auto-generated URL for your static web app.
You can copy the URL value right here in
the Azure portal where it says auto-generated as the type.
Back in your DNS providers configuration screen,
add an alias record.
If your domain provider does not have an alias as an option,
try using a CNAME instead.
Some domain providers support
the same functionality that you'll get with
an alias record through something called CNAME flattening.
For the name, enter the
@ for the value paste in the URL that is on your clipboard.
Click "Save" to save the alias record.
If you get an error,
when you try and save,
make sure that you didn't accidentally include http or https on
the front of the URL as alias and
CNAME records don't allow the protocol to be included.
That's it. Your root domain is now configured,
test it out by typing the root domain in
your browser and it should return your Static Web App,
if it doesn't, it maybe because
domain changes haven't fully propagated yet,
depending on where you are, this can take some time,
so wait and check back a little later.
[MUSIC].