|
| 1 | +--- |
| 2 | +sidebar_label: GitHub |
| 3 | +--- |
| 4 | + |
| 5 | +# Pull request previews for GitHub |
| 6 | + |
| 7 | +Integrating PushPreview with GitHub empowers efficient collaboration and code quality through automated preview generation directly within your workflow. This documentation details the installation, authentication, and configuration specifics of PushPreview integration with GitHub. |
| 8 | + |
| 9 | +## Quickstart |
| 10 | + |
| 11 | +Enable pull request previews on GitHub with PushPreview by following the [Quickstart](/quickstart.md). |
| 12 | + |
| 13 | +This step-by-step guide explains how to integrate automated preview generation into your GitHub workflow, streamlining review processes for web projects and applications |
| 14 | + |
| 15 | +## Authentication |
| 16 | + |
| 17 | +Previews generated through PushPreview are public by default. However, for added security or confidentiality, PushPreview offers private previews. For more information, see [Private previews](/configuration/private-previews.md). |
| 18 | + |
| 19 | +When accessing a private preview, PushPreview prompts for a GitHub login to ensure secure access: |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +Only users with permission to see the repository can access the preview. |
| 24 | + |
| 25 | +PushPreview uses OAuth 2.0 authentication to maintain a secure connection with GitHub. |
| 26 | + |
| 27 | +## GitHub Action |
| 28 | + |
| 29 | +The [PushLabsHQ/pushpreview-action](https://github.com/PushLabsHQ/pushpreview-action) facilitates the connection between GitHub and PushPreview, integrating it into your GitHub workflow. |
| 30 | + |
| 31 | +### Example usage |
| 32 | + |
| 33 | +Below is an example of how to use the `push-preview-action` in a workflow: |
| 34 | + |
| 35 | +```yaml |
| 36 | + name: PushPreview |
| 37 | + |
| 38 | + on: |
| 39 | + pull_request_target: |
| 40 | + types: |
| 41 | + - labeled |
| 42 | + |
| 43 | + jobs: |
| 44 | + preview: |
| 45 | + runs-on: ubuntu-latest |
| 46 | + if: github.event.label.name == 'preview' |
| 47 | + steps: |
| 48 | + - uses: actions/checkout@v3 |
| 49 | + - name: Comment |
| 50 | + run: | |
| 51 | + gh pr comment ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --body "⚙️ Hang tight! PushPreview is currently building your preview. We'll share the URL as soon as it's ready." |
| 52 | + env: |
| 53 | + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} |
| 54 | + |
| 55 | + - uses: actions/setup-node@v3 |
| 56 | + with: |
| 57 | + node-version: 18 |
| 58 | + |
| 59 | + - name: Set BASE_URL |
| 60 | + run: echo "BASE_URL=/github/${{ github.repository }}/${{ github.event.number }}/" >> $GITHUB_ENV |
| 61 | + |
| 62 | + # Replace with your docs build commands |
| 63 | + - name: Build site |
| 64 | + run: | |
| 65 | + cd docs |
| 66 | + yarn install --frozen-lockfile |
| 67 | + yarn build |
| 68 | +
|
| 69 | + - name: Generate preview |
| 70 | + uses: PushLabsHQ/[email protected] |
| 71 | + with: |
| 72 | + # Replace with your docs output directory |
| 73 | + source-directory: ./docs/build |
| 74 | + github-token: ${{ secrets.GITHUB_TOKEN }} |
| 75 | + pushpreview-token: ${{ secrets.PUSHPREVIEW_TOKEN }} |
| 76 | +``` |
| 77 | +
|
| 78 | +For more information on customizing the workflow to your build process, refer to the [Installation](/category/installation) section for CMS-specific guides. |
0 commit comments