PR Preview
A GitHub action that preview website in surge.sh for your pull requests.
Pros
Compare to Netlify/Vercel?
- It is free.
- It supports multiple preview jobs.
Usage
Add a workflow (.github/workflows/preview.yml
):
name: π Surge PR Preview
on: [pull_request]
jobs:
preview:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: afc163/surge-preview@v1
id: preview_step
with:
surge_token: ${{ secrets.SURGE_TOKEN }}
github_token: ${{ secrets.GITHUB_TOKEN }}
dist: public
build: |
npm install
npm run build
- name: Get the preview_url
run: echo "url => ${{ steps.preview_step.outputs.preview_url }}"
The preview website url will be https://{{repository.owner}}-{{repository.name}}-{{job.name}}-pr-{{pr.number}}.surge.sh
.
Multiple Jobs
name: π Surge PR Preview
on: [pull_request]
jobs:
preview-job-1:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: afc163/surge-preview@v1
with:
surge_token: ${{ secrets.SURGE_TOKEN }}
github_token: ${{ secrets.GITHUB_TOKEN }}
dist: public
build: |
npm install
npm run build
preview-job-2:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: afc163/surge-preview@v1
with:
surge_token: ${{ secrets.SURGE_TOKEN }}
github_token: ${{ secrets.GITHUB_TOKEN }}
dist: public
build: |
npm install
npm run build
The preview website urls will be:
https://{{repository.owner}}-{{repository.name}}-preview-job-1-pr-{{pr.number}}.surge.sh
https://{{repository.owner}}-{{repository.name}}-preview-job-2-pr-{{pr.number}}.surge.sh
Teardown
When a pull request is closed and teardown is set to 'true', then the surge instance will be destroyed.
name: π Surge PR Preview
on:
pull_request:
# when using teardown: 'true', add default event types + closed event type
types: [opened, synchronize, reopened, closed]
push:
jobs:
preview:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: afc163/surge-preview@v1
with:
surge_token: ${{ secrets.SURGE_TOKEN }}
github_token: ${{ secrets.GITHUB_TOKEN }}
dist: public
teardown: 'true'
build: |
npm install
npm run build
Inputs
surge_token
: Getting your Surge tokenvercel_token
: Getting your Vercel token, it's optionalgithub_token
:secrets.GITHUB_TOKEN
preview_url
: Ex:dev-{{repoName}}-pr{{prNumber}}
, defaults to{{repoOwner}}-{{repoName}}-{{job}}-pr-{{prNumber}}
preview_path
: Ex:/my/path/
, defaults to/
build
: build scripts to run before deploydist
: Dist folder to be deployedfailOnError
: Setfailed
if a deployment throws error, defaults tofalse
teardown
: Determines if the preview instance will be torn down on PR close, defaults tofalse
Outputs
preview_url
: The url for the related PR preview