How to Enable Pull Request Previews with Amplify Console Hosting

Instructor: [00:00] The first thing we'll do is we'll create a new application. I'm going to be using React, but you can use Vue, Angular, Gatsby, or your framework of choice.

[00:18] After we've created the new application, we'll go to GitHub and create a new repository to hold the application.

[00:28] After we've created the GitHub project, we'll copy the location of the GitHub repo, go back to the command line and initialize a new Git repository.

[00:41] Next, we'll add and commit the files, then we'll push the code to GitHub.

[00:56] Now that the project's ready, we'll go to the AWS Console and search for AWS Amplify. In the Amplify Console, click Connect app. Here, choose GitHub as a repository and then choose continue.

[01:23] Next, we can choose the repository in the bridge that we'd like to start with.

[01:31] Now, we'll accept the default build settings and click next.

[01:46] After the project's been deployed, we should be able to click the URL to test it out.

[01:54] To enable previews, we'll click on the previews link in the left-hand menu, then choose enable previews. Here, we'll install the GitHub app.

[02:14] Back in the Amplify Console, toggle the master branch, and then click manage. Here, you can enable pull request previews and then click confirm.

[02:27] To test this out, open the project in your local text editor. Here, we'll make a change and then save the file.

[02:48] Back at the command line, we'll create a new branch, add commit the files and then push the new branch up to GitHub.

[03:19] Back in GitHub, we can now create a new pull request.

[03:46] Back in the Amplify Console, we should now be able to click on previews and see a list of all the pull requests.

[04:00] When we preview the pull requests, we'll see that the preview URL is prepended with the GitHub branch.