Code Monkey home page Code Monkey logo

surge-preview's Introduction

Surge PR Preview

CI status

A GitHub action that preview website in surge.sh for your pull requests.

image

image

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
    permissions:
      pull-requests: write # allow surge-preview to create/update PR comments
    steps:
      - uses: actions/checkout@v2
      - uses: afc163/surge-preview@v1
        id: preview_step
        with:
          surge_token: ${{ secrets.SURGE_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]

permissions:
  pull-requests: write # allow surge-preview to create/update PR comments

jobs:
  preview-job-1:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: afc163/surge-preview@v1
        with:
          surge_token: ${{ secrets.SURGE_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 }}
          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
    permissions:
      pull-requests: write # allow surge-preview to create/update PR comments
    steps:
      - uses: actions/checkout@v2
      - uses: afc163/surge-preview@v1
        with:
          surge_token: ${{ secrets.SURGE_TOKEN }}
          dist: public
          teardown: 'true'
          build: |
            npm install
            npm run build

Inputs

  • surge_token: Getting your Surge token.
  • github_token: Defaults: github.token. It is used to create Pull Request comment, so it requires the pull-requests permission set to write permission. Possible value: secrets.GITHUB_TOKEN.
  • build: build scripts to run before deploy.
  • dist: dist folder deployed to surge.sh.
  • failOnError: Set failed if a deployment throws error, defaults to false.
  • teardown: Determines if the preview instance will be torn down on PR close, defaults to false.

Outputs

  • preview_url: The url for the related PR preview

Who are using it?

Thanks to

surge-preview's People

Contributors

afc163 avatar bbsqq avatar benjaminparisel avatar dependabot[bot] avatar educhastenier avatar lessmost avatar lwhiteley avatar scottyhq avatar shaodahong avatar tbouffard avatar xiaohuoni avatar xrkffgg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

surge-preview's Issues

[question] maintenance status

There hasn't been a release in ~2 years and the repository owner hasn't answered in the issues for a while.

I was wondering if this action is still maintained?

关于部署的不是 PR 当前分支而是基础分支的问题

Preview comment not being added + CI failing

Description

Hi,

Through this PR, I added PR preview for Devfiles using Surge: devfile/docs#106

However, right here devfile/docs#116, the CI fails and the preview comment is not being generated. Here are the CI logs:

   Running as [email protected] (Student)

        project: ./out/docs
         domain: devfile-docs-preview-pr-116.surge.sh


     encryption: *.surge.sh, surge.sh (136 days)
             IP: 138.197.235.123

   Success! - Published to devfile-docs-preview-pr-116.surge.sh

Error: Resource not accessible by integration

While browsing through the GitHub community, I discovered this: https://github.community/t/github-actions-are-severely-limited-on-prs/18179

However, I did not find such problems on other projects using the same action. Can I get a better direction on how I can solve this problem? Thanks a lot!

remove redundant build default script

one of the action parameters is build, which has a default script.
if not provided by the consuming action, it will run a redundant script npm install etc'.

I had to just set some random command to override it. maybe it's redundant?

jobs:
  preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
          cache: 'npm'

      - name: Install Dependencies
        run: npm ci

      - name: Build Site
        run: npm run nx build docs

      - name: Deploy
        uses: afc163/surge-preview@v1
        id: preview_step
        with:
          surge_token: ${{ secrets.SURGE_TOKEN }}
          github_token: ${{ secrets.GITHUB_TOKEN }}
          dist: dist/apps/docs
          teardown: 'true'
          build: echo # required to override default script that may damage the setup

      - name: Get the preview_url
        run: echo "url => ${{ steps.preview_step.outputs.preview_url }}"

Resolve GitHub Action Permissions -- Error: Resource not accessible by integration

Warning: For workflows that are triggered by the pull_request_target event, the GITHUB_TOKEN is granted read/write repository permission unless the permissions key is specified and the workflow can access secrets, even when it is triggered from a fork. Although the workflow runs in the context of the base of the pull request, you should make sure that you do not check out, build, or run untrusted code from the pull request with this event. Additionally, any caches share the same scope as the base branch. To help prevent cache poisoning, you should not save the cache if there is a possibility that the cache contents were altered. For more information, see "Keeping your GitHub Actions and workflows secure: Preventing pwn requests" on the GitHub Security Lab website.
pull_request_target

  1. pull_request change to pull_request_target
  2. Change checkout ref and repo
- uses: actions/checkout@v2
        with:
          ref: ${{github.event.pull_request.head.ref}}
          repository: ${{github.event.pull_request.head.repo.full_name}}

Example:

https://github.com/gocrane/crane/blob/main/.github/workflows/preview.yml

name: 🔂 Crane PR Docs Preview

on:
  pull_request_target:
    # when using teardown: 'true', add default event types + closed event type
    types: [opened, synchronize, reopened, closed]

jobs:
  preview:
    runs-on: ubuntu-latest
    permissions:
      issues: write
      pull-requests: write
      contents: write
    steps:
      - uses: actions/checkout@v2
        with:
          ref: ${{github.event.pull_request.head.ref}}
          repository: ${{github.event.pull_request.head.repo.full_name}}

      - uses: actions/setup-python@v2
        with:
          python-version: "3.9"

      - run: pip install mkdocs-material mkdocs-static-i18n mike

      - run: git log --oneline --decorate --max-count=10 && ls -la

      - uses: afc163/surge-preview@v1
        with:
          surge_token: ${{ secrets.SURGE_TOKEN }}
          github_token: ${{ secrets.GITHUB_TOKEN }}
          dist: site
          teardown: 'true'
          build: |
           mkdocs build

It works fine.

gocrane/crane#248

https://github.com/gocrane/crane/actions/runs/2102551351/workflow

Deployments fail

We are currently getting an error on deployments:

/home/runner/.npm/_npx/4089/lib/node_modules/surge/lib/middleware/util/helpers.js:109
      if (e) throw e
             ^

Error: connect ETIMEDOUT 192.241.214.148:443
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1141:16) {
  errno: 'ETIMEDOUT',
  code: 'ETIMEDOUT',
  syscall: 'connect',
  address: '192.241.214.148',
  port: 443
}
Error: The process '/opt/hostedtoolcache/node/12.18.0/x64/bin/npx' failed with exit code 1

TODO

  • 第一次 push 有时会拿不到 PR number #13
  • 取 check_run_id #14

Add option to get pull_request state from API when using workflow_run

Thanks for this useful action!

I was interested to try out this with @tbouffard's new addition (#294) to use this action in combination with workflow_run: and teardown: true

However, the current action still assumes it can get the pull_request "state" (open or closed) from the payload

if (teardown && payload.action === 'closed') {

I made a small change to alternatively get the status from the API as well, which seems to work! (relativeorbit/sarbook#7).

Can't use surge-preview for pull-request

In order to use surge-preview for pull-request, we have to have 2 workflows:

  • one that is bound to pull-request and that will check the PR but not publish to Surge
  • another one that is bound to workflow_run thus will be launched when the previous one is completed.

But surge-preview is complaining that it can't find a PR corresponding to the commit id.

Please note that pull_request_target is not an option for us for security reasons

Feature request: Add option to auto teardown a preview after merge/close

Add an option that will teardown a preview preview when a pull request is closed

This can be configurable, maybe: teardown: "true" or "false"?
When the event action is closed then run the surge teardown <pr-preview-url>

it makes sense for this action to take care of it to ensure the url is generated by one utility

name: teardown

on:
  pull_request:
    types: [closed]

jobs:
  teardown-preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: afc163/surge-preview@{version}
        with:
          surge_token: ${{ secrets.SURGE_TOKEN }}
          github_token: ${{ secrets.GITHUB_TOKEN }}
          teardown: 'true'

After deploying preview, the website makes an error while downloading resources

Hello,
Thank you for providing surge-preview!

I've been using the package well for many months till getting an error recently as of about 2-3 weeks ago.

As you see, the git action process is completed successfully as before.
Screen Shot 2023-06-22 at 12 25 11 PM

However, when getting into the preview website by url, I found that the resources are not downloaded properly showing empty page as below:
In this case, I'm using a specific wifi supplied by a telecom company.

Screen Shot 2023-06-22 at 12 28 14 PM image

But, in case that I use hotspot from my phone, It's downloading resources and opening website properly as below:

image

I think it's related to the wifi, but It was working well before even with the wifi. Thus, I wonder if there are any changes in surge-preview for the updates.

Please refer to the above and hope to get any valuable answers or solutions.

Thank you!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.