Live Preview

My Workflow

This project aims to provide temporary validation deployments that make the process of reviewing a PR easier by providing an environment in which the reviewer can verify if the changes are good-to-go from a user perspective. Its …


This content originally appeared on DEV Community and was authored by Arthur Diniz

My Workflow

This project aims to provide temporary validation deployments that make the process of reviewing a PR easier by providing an environment in which the reviewer can verify if the changes are good-to-go from a user perspective. Its main advantage is to remove the requirement for pulling the branch code, building and running it locally.

Whenever the action is triggered, it will pull the application's Docker image (or images, if the project requires a docker-compose with multiple services), run it and magically expose it to the reviewers, posting the link to the application in a comment. The magic can be handled either by Ngrok, a freemium tunneling service, or an open-source, self-hosted, FRP (Fast Reverse Proxy) server that works as a reverse proxy and tunneling platform.

As a demo we created a simple Dockerfile with nginx and a static html page: https://github.com/overhead-actions/live-preview-demos/pull/1

Live Preview Demo

This is a demo for the Live Preview project:

The Live Preview project aims to provide temporary validation deployments that make the process of reviewing a PR easier, by providing an environment in which the reviewer can verify if the changes are good-to-go from a user perspective. Its main advantage is to remove the requirement for pulling the branch code, building and running it locally.

Whenever the action is triggered, it will pull the application's Docker image (or images, if the project requires a docker-compose with multiple services), run it and magically expose it to the reviewers, posting the link to the application in a Pull Request comment. The magic can be handled either by Ngrok, a freemium tunneling service, or an open-source, self-hosted, FRP (Fast Reverse Proxy) server that works as a reverse proxy and tunneling…

comment-pr

pipeline

Submission Category:

Maintainer Must-Haves

Yaml Files

FRP (Fast Reverse Proxy)

name: Live Preview FRP

on: pull_request

jobs:
  default:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Start services
        run: docker-compose up -d

      - name: Start tunnel
        uses: overhead-actions/live-preview-frp@main
        with:
          domain: ${{ github.head_ref }}.arthurbdiniz.com

      - name: Comment PR
        uses: unsplash/comment-on-pr@v1.3.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          msg: 'Here is your live preview URL 🚀: http://${{ github.head_ref }}.arthurbdiniz.com'
          check_for_duplicate_msg: false

      - name: Wait
        run: sleep 300

Ngrok

name: Live Preview NGROK

on: pull_request

jobs:
  default:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Start services
        run: docker-compose up -d

      - name: Start tunnel
        uses: overhead-actions/live-preview@main
        with:
          protocol: http
          port: 4000
          ngrok_auth_token: ${{ secrets.NGROK_AUTH_TOKEN }}

      - name: Get URL
        id: vars
        run: echo "::set-output name=url::$(curl -s localhost:4040/api/tunnels | jq -r .tunnels[0].public_url)"

      - name: Comment PR
        uses: unsplash/comment-on-pr@v1.3.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          msg: 'Here is your live preview URL 🚀: ${{ steps.vars.outputs.url }}'
          check_for_duplicate_msg: false

      - name: Wait
        run: sleep 300

Collaborators


This content originally appeared on DEV Community and was authored by Arthur Diniz


Print Share Comment Cite Upload Translate Updates
APA

Arthur Diniz | Sciencx (2021-11-26T02:47:17+00:00) Live Preview. Retrieved from https://www.scien.cx/2021/11/26/live-preview/

MLA
" » Live Preview." Arthur Diniz | Sciencx - Friday November 26, 2021, https://www.scien.cx/2021/11/26/live-preview/
HARVARD
Arthur Diniz | Sciencx Friday November 26, 2021 » Live Preview., viewed ,<https://www.scien.cx/2021/11/26/live-preview/>
VANCOUVER
Arthur Diniz | Sciencx - » Live Preview. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/26/live-preview/
CHICAGO
" » Live Preview." Arthur Diniz | Sciencx - Accessed . https://www.scien.cx/2021/11/26/live-preview/
IEEE
" » Live Preview." Arthur Diniz | Sciencx [Online]. Available: https://www.scien.cx/2021/11/26/live-preview/. [Accessed: ]
rf:citation
» Live Preview | Arthur Diniz | Sciencx | https://www.scien.cx/2021/11/26/live-preview/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.