1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    How to Enable Pull Request Previews with Amplify Console Hosting

    nader dabitnader dabit
    reactReact
    javascriptJavaScript
    awsAWS

    Web Previews offer you and your team a way to preview changes from pull requests before merging code to a production or integration branch. In this video, I show how to integrate pull request previews using GitHub and the Amplify Console.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    After we've created the new application, we'll go to GitHub and create a new repository to hold the application.

    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.

    Next, we'll add and commit the files, then we'll push the code to GitHub.

    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.

    Next, we can choose the repository in the bridge that we'd like to start with.

    Now, we'll accept the default build settings and click next.

    After the project's been deployed, we should be able to click the URL to test it out.

    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.

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

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

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

    Back in GitHub, we can now create a new pull request.

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

    When we preview the pull requests, we'll see that the preview URL is prepended with the GitHub branch.