Deploying an Angular Build on AWS Amplify for Static Hosting

Hello Developers,

In an earlier post, Host Angular 2 or 4 or 5 version on AWS S3 using CloudFront, we covered hosting via AWS S3 and CloudFront. This time, we’ll walk through static hosting for Angular using AWS Amplify. AWS also provides an official guide for deploying Angular apps directly on Amplify — https://docs.amplify.aws/start/q/integration/angular.

AWS Amplify offers a range of tools for front-end development and deployment. With Amplify, you can set up app backends, connect your front-end in minutes, and deploy static web apps with just a few clicks.

list of Amplify tools

Among the options listed above, we’ll focus on the Manage hosting feature, which enables static site hosting by connecting to various version control platforms like GitHub, Bitbucket, GitLab, and CodeCommit. You grant access via OAuth to fetch the list of repositories and their contents.
list of ways to upload code

Here’s how the process works:
how its works

  1. Authenticate with your Git provider.
  2. Once authenticated, Amplify lists all repositories from your Git account. Choose the repository whose content you want to host. list of repositories
  3. Configure build settings (optional).
  4. Review the settings and deploy. After clicking "Start Deploy," a message like "Creating app: angular-hosting-amplify-example in progress..." appears. Deployment review page
  5. Track the progress on the app status page shown below 👇🏻. Once deployment is complete, all stages turn green. status page
  6. Amplify provides a public URL for your app, for example: https://main.d26gqyfusfkmyj.amplifyapp.com. Webpage At this point, we’ve uploaded the code and deployed it to a URL — that’s the first half of the work to host an Angular app’s generated build.

move-it.gif

Note: Unlike AWS S3 hosting, Amplify’s front-end hosting does not require any special routing configuration.

The final step is to map this app URL to a custom domain, such as amplifydemo.avinashdalvi.com. Here’s what you need to do:

  1. In the Amplify app console, navigate to Domain management.
  2. Click on "Add Domain." Screenshot 2020-12-27 at 11.32.01 PM.png
  3. Enter the root domain name. For example, if you want to use www.example.com, the root domain is example.com. In this demo, I’ve chosen avinashdalvi.com as the root domain because the app’s subdomain is amplifydemo.avinashdalvi.com.
  4. Click "Configure Domain."
  5. Exclude the root domain if you don’t need it. The subdomain here is amplifydemo. Once configured, a status page appears as shown below 👇🏻. status page of domain

Note: Certificate and DNS validation for the domain can occasionally take longer than 8 hours. If it exceeds that timeframe, you can file a GitHub issue here.

That completes the final step.
completed-status.gif

Thanks for reading. If you have any questions, feel free to reach out on Twitter — @aviboy2006.

Note: The sample demo app mentioned may or may not be functional; it’s provided for reference only. The process assumes you already have an Angular build ready after running ng build.

References: