Building complex development flows #2

Hosting pull requests

Amplify Console has Preview feature that provides automatic hosting functionality for not only branches but also pull request. This feature makes reviewers able to review source code while seeing actual screen. For this time, configure automatic hosting setting against pull requests published to “develop” branch.

You can use Preview feature for private repositories only from perspective of security. Also, only GitHub supports the feature as of April 2020.

Please click “Preview” > “Enable Preview” on Amplify Console screen.

Then click “Install GitHub app”.

You move to GitHub. Then choose a repository you want to install Preview feature and press “Save”.

Once get back to Amplify Console, you can see a list of branches in the repository you selected. For this moment, let’s choose “develop” branch and press “Manage” button.

Enable “Pull Request Preview” and choose “staging” for “Pull Request Previews - backend environment”.

If you choose “Create new backend environment for every Pull Request” for “Pull Request Preview - backend environment”, you also can build dedicated backend for each pull request.

Then configuration on Amplify Console is completed. Let’s send pull request to develop branch. Create a new branch and edit something for test. As a simple example for this time, please change the text on logout button from “Logout” to “Log out” in Sidebar.js.

git checkout -b chore/edit-logout-button-text
<ListItem key='logout'>
    <ListItemText primary={
    <Button
        variant="outlined"
        onClick={signOut}
        fullWidth
    >
        Log out // <-- Changed from "Logout" to "Log out"
    </Button>
} />
git add .
git commit -m "Edit Logout Button text"
git push --set-upstream origin chore/edit-logout-button-text

Then open a pull request for the develop branch.

After the pull request completion, you can see “AWS Amplify Console Web Preview”. Just after pull request submitted, the status is “In Progress” because the hosting process is not completed.

Once the deployment is completed, the status is changed to “Success”.

Click on the “Detail” link and move to summary screen. You can move to the screen of the hosted app by clicking “View more details on AWS Amplify (us-east-1)”.

You can also see a list of pull requests for the branches on the Previews screen on Amplify Console. Once a pull request is merged, the one is removed from the list as well.