Live Preview 😲 (From workflow without deploying): Github Action

Publish Date: Sep 14 '20

My Workflow

My action live-preview-action makes live preview of your app dead simple from your CI/CD pipeline.

You can live preview without deploying by exposing the local web server PORT inside of the workflow to the internet.
The url will be printed in the console as well as will be send on discord server via webhook .... Yay :)

Submission Category:

Yuss! 🤓 So here it is, I think you all will love this DIY Deployments entry.

Yaml File or Link to Code

sharadcodes / live-preview-action

An action that enables you to live preview your app from github action without deploying.

Live Preview Github Action

An action that enables you to live preview your app from your github workflow without deploying by exposing local web server to internet.

Usage

You need to add a discord webhook as a secret in the repo before proceeding further.

To use this action you can see the following sample:

on: [push]
jobs:
  live_preview_job:
    runs-on: ubuntu-latest
    name: A job to test live preview
    steps:
    - uses: actions/checkout@master
      name: Checkout
    - name: My Live Preview Action for port 5000
      uses: sharadcodes/live-preview-action@v1.0
      with:
        port: 5000 # A required field, this port will be exposed
        minutes: 1 # A required field, after the minutes specified here the server will stop
        command: "python3 -m http.server 5000" 
        # A required field, command should start the server
        # You can chain multiple commands using: && incase

…

View on GitHub

Additional Resources / Info

Behind the scenes it uses ngrok which is an awesome tool and a must have for every developer.

How to use

First of all get a discord webhook and add it as secret in the repository.
Now you have to specify 4 fields as inputs:
- port (required field): A required field, this port will be exposed
- minutes: after the minutes specified here the server will stop, defaults to 5 minutes
- command (required field): This could be any command like npm run dev or npm start or whatever. Make sure it uses the same port as specified in the port field in inputs in yml file.
- discord_webhook_url (required field): it will be used to send the URL for the exposed port

Go ahead guys try it out, and a huge thanks to DEV for organizing this Hackathon 👏👏

Comments 0 total

Add comment

Sharad Raj (He/Him) @sharadcodes