Trying Various Settings for AWS Amplify Gen2 Hosting
Tags: awsamplify, amplify, gen2, aws
Published: 2024-06-27 13:07:48

In 2024, [AWS Amplify](https://aws.amazon.com/amplify) has evolved into Gen2.

Gen2 has evolved in many ways compared to Gen1, including TypeScript-first development, development in a separate per-developer sandbox environment, Git branch-based automated deployment, and AWS CDK-based integration of non-native Amplify features. Code-driven, full-stack development allows for seamless front-end and back-end integration and increased productivity.

I wrote an article on [Hosting configuration for AWS Amplify Gen1](https://dev.to/aws-builders/trying-out-various-settings-for-aws-amplify-publishing-39i4) two years ago. This time, I will introduce Hosting settings for Amplify now in Gen2. I plan to try other features in the future.

## Advance Preparation

Create a repository on GitHub and reflect your code.
![img](https://memo.dayjournal.dev/images/aws-amplify-016_00.png)

## Hosting Using GitHub with Amplify Console (Gen2)

This is how to publish using GitHub with the Amplify Console (Gen2).

Click AWS Management Console → AWS Amplify.
![img](https://memo.dayjournal.dev/images/try-111_01_en.png)

Click "Create new app."
![img](https://memo.dayjournal.dev/images/try-111_02_en.png)

Click "GitHub" → Click "Next."
![img](https://memo.dayjournal.dev/images/try-111_03_en.png)

Click "Authorize" when the GitHub authorization screen appears.
![img](https://memo.dayjournal.dev/images/try-111_04_en.png)

Select the repository and branch you have prepared in advance. → Click "Next."
![img](https://memo.dayjournal.dev/images/try-111_05_en.png)

Click "Next."
![img](https://memo.dayjournal.dev/images/try-111_06_en.png)

Click "Save and deploy."
![img](https://memo.dayjournal.dev/images/try-111_07_en.png)

After deployment is complete, click "Visit deployed URL."
![img](https://memo.dayjournal.dev/images/try-111_08_en.png)

The deployed website will be displayed.
![img](https://memo.dayjournal.dev/images/try-111_09_en.png)

## Publish Basic Authentication in Amplify Console (Gen2)

This is how to publish Basic Authentication in Amplify Console (Gen2).

Click Access control → Click "Manage access."
![img](https://memo.dayjournal.dev/images/try-111_10_en.png)

Set the access setting to Restricted. Set the username and password → Click "Save."
![img](https://memo.dayjournal.dev/images/try-111_11_en.png)

Confirm the settings.
![img](https://memo.dayjournal.dev/images/try-111_12_en.png)

When you access the URL, you will be prompted to enter the username and password.
![img](https://memo.dayjournal.dev/images/try-111_13_en.png)

Enter the user and password you set, and then the website will appear.
![img](https://memo.dayjournal.dev/images/try-111_09_en.png)

## Amplify Console (Gen2) adds preview functionality

This is how to add a preview function in Amplify Console (Gen2).

Click Previews → Select a branch → Click "Edit settings."
![img](https://memo.dayjournal.dev/images/try-111_14_en.png)

Enable pull request preview → Click "Confirm."
![img](https://memo.dayjournal.dev/images/try-111_15_en.png)

Create a pull request with some changes to the file.
![img](https://memo.dayjournal.dev/images/try-111_17_en.png)

After creation, a preview link will be displayed.
![img](https://memo.dayjournal.dev/images/try-111_16_en.png)

You can also check the deployment environment for the preview in the Amplify Console.
![img](https://memo.dayjournal.dev/images/try-111_18_en.png)

## Redeploy

The environment will be redeployed when the pull request is merged.

Click "Visit deployed URL" after deployment is complete.
![img](https://memo.dayjournal.dev/images/try-111_19_en.png)

The updated website will be displayed.
![img](https://memo.dayjournal.dev/images/try-111_20.png)


<br>

Related Articles
{% link https://dev.to/aws-heroes/a-summary-of-my-activities-in-the-5-years-since-discovering-aws-amplify-2be5 %}
{% link https://dev.to/aws-heroes/contribute-to-aws-amplify-43o2 %}
{% link https://dev.to/aws-heroes/building-a-map-application-with-amazon-location-service-leaflet-and-aws-amplify-5gbe %}

<br>

References
[AWS Amplify](https://aws.amazon.com/amplify)