Chapter 9: Setting Up a Custom Domain Name and the Amplify Admin UI

Welcome to Chapter 9, Setting Up a Custom Domain Name and the Amplify Admin UI – we've made it! It is time to publish your app on a website and then tell the world about it. In this chapter, we will show you how to purchase a domain name through AWS Route 53 and then hook that up to your Amplify app. AWS Amplify can connect to the domain name that you purchase through the AWS Route 53 service seamlessly. We will also show you how to connect the Amplify app with third-party DNS services such as GoDaddy. After that, we will show you how to set up the Admin UI in order to manage the content of the app. By doing this, you will be able to invite others to help you edit the content on your website. The Admin UI is like a traditional CMS that you can create, edit, and delete the content of a website or an app with. It is especially useful when you have dedicated team members to either create or moderate the content...

Technical requirements

To complete this chapter, you will need to have completed the exercises of all the previous chapters. This will help you understand the benefits of setting up a domain name and enabling the Admin UI.

Adding a custom domain name to AWS Route 53

So far, we have built a simple app that can let people create posts with text and images. Now, it is time to tell the world about our accomplishments. The best way to do that is to set up an easy-to-remember domain name that shows the meaning of your product itself. AWS offers a wide range of products that can help you take your business and product from zero to one. This includes Route 53, which lets you buy a domain name directly through AWS, without shopping for your domain name on a different platform. The good thing about choosing a single platform that provides the entire ecosystem of your digital product is that you can keep all your bills in a single invoice, instead of on multiple invoices. Let's go to the AWS Amplify Console:

1. First, go to the Route 53 dashboard (https://console.aws.amazon.com/route53). Then, enter the domain name that you want to purchase and hit the Check button to see if the domain is still up for...

Adding a custom domain name using a third-party DNS provider

Many of us might have purchased some domain names through various DNS providers. This section will give you an idea of how to easily hook up your existing domain name to the Amplify app. The only difference between setting up a domain name through Route 53 and a third-party DNS provider is the verification steps. If you have already owned or purchased a domain name through a third-party DNS provider, follow these steps to configure it with the AWS Amplify Console:

1. Go to the Domain management dashboard via the AWS Amplify Console and enter the domain name that you have just purchased from the third-party DNS provider (GoDaddy, in our case). Then, click the Configure domain button:

   Figure 9.7 – Amplify Console – Finding a domain

   This feature works with a domain name that has been purchased through AWS Route 53 or external websites such as GoDaddy.

2. By default, the domain name you've purchased from...

Setting up the Amplify Admin UI (beta)

The Admin UI is still in beta (in early 2021), which means some of the features are still in preview version. The Admin UI is like a traditional CMS where you can maintain the content of your website. You can create a data model directly from the Admin UI, but it might crash the app if the model between the app in production and the admin are different. So, it is safer to update and create a data model when you are building the app. Try not to update the data model with the app that is in production. Apart from that, you can grant access to your system admins, content creators, content moderators, and so on so that they can maintain the content of your Amplify app. This saves you hundreds of hours building the CMS system from scratch. Let's set up the Admin UI:

1. Go to the Amplify Console of your Amplify app, select Admin UI management from the left-hand side menu, and click on the toggle for Enable admin UI (All environments) to switch...

Walking through the Amplify Admin UI

In the previous section, we enabled the Admin UI and data modeling. In this section, we will go through a few Admin UI features that are related to our Amplify app:

1. Click on the User management button from the left-hand side menu. You will see the User Management console, which is a simplified version of the Cognito service that we mentioned earlier in this book. You can manage users and groups directly from here by clicking the Set up authentication button:

   Figure 9.29 – Admin UI – User Management

2. Click on the Authentication button on the left-hand side menu. At this point, you will see the Authentication console, which is similar to the Cognito service that we mentioned earlier in this book. You can configure the login mechanism directly from here, such as email or phone only, or even multi-factor authentication (MFA):

   Figure 9.30 – Admin UI – Authentication

3. Click on the Functions button on the left-hand...

Summary

In this chapter, you learned how to set up domain names and subdomain names for your Amplify app through AWS Route 53 and third-party DNS providers. At this point, you may have realized that building a cloud-native app from scratch and making it production-ready is quite easy with AWS Amplify. We even covered the latest Admin UI as an add-on feature for our app. When your user base grows a certain amount, you can no longer handle all the support requests from users. You have to find more admins to maintain the content and users of the app for you. With AWS Amplify and the Amplify UI, you save hundreds of hours creating CMSes and user management systems for your app.

I hope you enjoy your AWS Amplify journey from here on out! You can try out other additional features from the Admin UI, such as prediction, chatbot, analytics, and more by following the appropriate instructions and adding them to your Amplify app.

Why subscribe?

• Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
• Improve your learning with Skill Plans built especially for you
• Get a free eBook or video every month
• Fully searchable for easy access to vital information
• Copy and paste, print, and bookmark content

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [e-mail] for more details.

At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.