Enabling Previews
1. Navigate to Previews under App settings
![](/wp-content/uploads/2024/03/216692308-3ba35440ccc3ba08bf2d1197.png)
2. Click [Enable preview] button
![](/wp-content/uploads/2024/03/216692565-8831c19c0c87dc41f9ff22db.png)
3. Click [Install GitHub app]
GitHub app is required for enabling this feature
![](/wp-content/uploads/2024/03/216692773-66bc268587995f3aaa905663.png)
4. Choose target All repository or specified and click [Install] button
We install a specified repository: Shifter-Headless-Amazon-Amplify-Console
![](/wp-content/uploads/2024/03/216693798-6815c5c09a1b4582d998dd0e.png)
5. Now, the app is installed
![](/wp-content/uploads/2024/03/216693701-b2f84cfa0e0fe2da67839abd.png)
6. Back to “App settings: Previews”
![](/wp-content/uploads/2024/03/216693879-6ea1b74b4f6298b8a96187f4.png)
7. Choose branch enabling Preview, then click [Manage] button
We want to enable the feature on master branch
![](/wp-content/uploads/2024/03/216694313-6701624e1bf38a35c012423e.png)
8. Modal will be appeared
![](/wp-content/uploads/2024/03/216694450-fa73943757babb9fd82ef5f7.png)
19. Click toggle switch to enable it, then click [Confirm] button
![](/wp-content/uploads/2024/03/216694841-932f048c49cdca8fa22695ba.png)
10. Make sure the Preview feature is enabled
![](/wp-content/uploads/2024/03/216694993-1a57b81faf06525e29031213.png)
Now, we’re ready to Preview the pull request
Create PullRequest
1. Create new branch for pull request
$ git checkout -b my-first-branch origin/master
Make some changes, then push them.
$ git add .
$ git commit -m "some changes"
$ git push origin my-first-branch
2. Make sure branch is created on GitHub
![](/wp-content/uploads/2024/03/216701835-65b1ebb6c154a83420f28feb.png)
3. Click [Compare & pull request] button
![](/wp-content/uploads/2024/03/216701982-da9a9640f53d9171bde4feb9.png)
4. Click [Create pull request] button
![](/wp-content/uploads/2024/03/216702117-98c5c74736639513b527ba72.png)
5. Now, ready for merge
![](/wp-content/uploads/2024/03/216702357-d30a6ea6a6ce7a22aaef508c.png)
6. Connect new branch to your app
After pushing new branch to GitHub, click [Connect branch]
![](/wp-content/uploads/2024/03/216701193-e078c3ee4d297a08e1f456d8.png)
8. Choose branch and click [Next] button
my-first-branch is the newly added
![](/wp-content/uploads/2024/03/216702481-e0b948dab7e2b4803b7005b8.png)
79. Click [Save and deploy] button
![](/wp-content/uploads/2024/03/216702671-a792bbe67cca2e920ace21e1.png)
10. Now Amplify is working
![](/wp-content/uploads/2024/03/216702800-7640bfccfb54de8f702ed463.png)
11. …… and deployed
![](/wp-content/uploads/2024/03/216704424-e730bd1f22646f71d1bde8c6.png)
12. Navigate to Previews
![](/wp-content/uploads/2024/03/216704545-47ab33a93872fd0fc6c75472.png)
13. Now Preview URL for created pull request is available
Click provided Preview URL and make sure changes are applied for your app.
![](/wp-content/uploads/2024/03/216704812-f4b668a85c9c316718265ca1.png)
Merge pull request and deploy changes
1. Back to GitHub and click [Merge pull request] button
![](/wp-content/uploads/2024/03/216705881-b18ec930187dab5ea9361649.png)
2. … and confirm it
![](/wp-content/uploads/2024/03/216705832-c63cb0f1bb3b888e628b0a87.png)
3. Merging
![](/wp-content/uploads/2024/03/216705961-543701c060132ecf10de4d12.png)
4. Back to Amplify Console and confirm merging
Now building changes on master
![](/wp-content/uploads/2024/03/216706045-a5444dc39c6b7e98baa68e04.png)
5. Now deployed!
![](/wp-content/uploads/2024/03/216707029-6c0836650244b1529fb71d0d.png)
Tips
You can preview some automated generated screenshots of your app home page with headless Chrome by clicking [Verify] tab on your app.
![](/wp-content/uploads/2024/03/216708356-45eb15a02605aecce7681e8d.png)
![](/wp-content/uploads/2024/03/216708221-db29d5f1eee710225e678e20.png)
![](/wp-content/uploads/2024/03/216708270-c61787d50d1ca1adb2f156b8.png)