Create a SlackBot using GitHub Actions + Light AI

Light AI — Wed, 15 Jun 2022 04:34:59 +0000

What is a Github Action?

The Official Github Definition of an Action is:

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to production.

Creating a SlackBot for Github

We are going to create a SlackBot for Github, This SlackBot is going to send us a message in to our slack channel every time a pull request is made.

Understanding Our Workflow

Let's break down everything that is happening in the GitHub Actions workflow

Configuring our Github Action

Create a New Project or go to an Existing Project

Click Add File and then Click Create New File

Now let's add our Workflow, Copy and Paste the Following:

.github/workflows/slackbot.yml

Creating our Workflow

To generate this workflow I am going to use the Light AI Beta, to generate the GitHub Action, this will save me some time.

I'll Select Github Actions in Light Docs and type Create a GitHub Actions that sends a slack notification on a pull request

We will copy and paste the output from the Light Docs™ into our workflow. To better understand what is happening I will take the time to breakdown the workflow

name: SlackBot for Pull Requests 

  push:
    branches:
      - main
  pull_request:
    branches: [ "main" ]

Here we are giving a name for the Github Action and Specifying the Branch for our PR

Adding Jobs and Builds

A Workflow can be made up of many jobs-in this case we are only using a single job called Build.

jobs:
 build:
  runs-on:ubuntu-latest

Steps and Checkout

Here we just add one step, which checkout's our code.

steps:
 - name: Check out Code 
   uses: actions/checkout@v2

Adding your Slack API Key + Workflow

Now you will need a slack account for this last step to work. This part can be a little tricky.

 -name: Slack Notifcation 
    uses: rtCamp/action-slack-notify@master
    env:
      SLACK_WEBHOOK_URL:${{secrets.SLACK_WEBHOOK_URL}}
      MESSAGE: "A Pull Request was Made!!"

Here is the complete Github Action so your .yaml is written correctly.

name: Slack Notification on Pull Request

# Controls when the workflow will run
on:
  # Triggers the workflow on pull request events but only for the "main" branch
  push:
    branches:
      - main
  pull_request:
    branches: [ "main" ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - name: Check out code
      uses: actions/checkout@v2

    # Sends a Slack notification
    - name: Slack Notification
      uses: rtCamp/action-slack-notify@master
      env:
        SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK}}
        MESSAGE: "A new pull request was made!"

Now that we have this Workflow, if we commit this we will end up with a failed build. We will fix this in the next section.

Create a Github Secret and Install WebHooks

Now we need to create a Github Secret so that we aren't exposing our Slack WebHook.

Let's go to our repo and click settings

You will need to click create a new repository secret

Name the Secret SLACK_WEBHOOK

Go to your slackurl/apps. In this instance it will be light.slack.com/apps

Now go down to the search bar and type Incoming WebHooks

Click Add to Slack and select your Workspace

Click Add Incoming WebHook Integration You will be directed to a page where you will see your WebHook URL.Copy and paste that URL and go back to your Github Repo

The URL will be towards the bottom and look something like this

Click Settings and then go down and click Secrets and then Actions

Click New Repository Secret and then add the WebHook URL you just copied

It should look like this

Now let's clone our repo and open it in visual studio code

First let's pull our latest changes git pull, Then let's create a new branch so we can test our pull request feature
git checkout -b slack-branch

Now let's use an empty commit to trigger the Github Action
git commit --allow-empty -m "dev: empty commit for testing"

We should see your Github Action running and Completed. Once complete go to your Slack and make sure you see the SlackBot notification on the channel you selected earlier in the setup process

Now we need to update the Workflow because it's currently setup to only work on a push and a pull and we only want this to work on pull requests so we are notified when someone on our team has made a PR

This is the updated flow without the push trigger.

name: Slack Notification on Pull Request

# Controls when the workflow will run
on:
  # Triggers the workflow on pull request events but only for the "main" branch
  pull_request:
    branches: [ "main" ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - name: Check out code
      uses: actions/checkout@v2

    # Sends a Slack notification
    - name: Slack Notification
      uses: rtCamp/action-slack-notify@master
      env:
        SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK}}
        MESSAGE: "A new pull request was made!"

On your next GitHub commit you will see a Pull Request. Click create a pull request or new pull request. Click Commit Changes.

You Should now see a slack notification!

Congratulations you just created a SlackBot using GitHub Actions + Light AI

Credit:

Github Actions Output Generated by LightAI

Request Early Access

If you have any questions/thoughts for us, please reach out at hello@lightaibeta.com.

How to Redirect a Domain in Webflow

Light AI — Fri, 10 Jun 2022 01:54:27 +0000

What is No-Code?

The Wikipedia Definition of No-code is:

No-code development platforms allow programmers and non-programmers to create application software through graphical user interfaces and configuration instead of traditional computer programming.
(https://en.wikipedia.org/wiki/No-code_development_platform)

No-code tools such as Webflow have grown in popularity and as they grow in popularity, developers try to push the limits of what these tools can do.

If you are building a website in Webflow, you might start with a domain like we did https://lightaibeta.com and realize you want to change that domain (like we did) to https://lightai.dev.

You have a few options outside of Webflow and it's unclear what is the easiest way to go about it.

Redirecting Root Domain Outside of Webflow

Create a page rule or redirect rule inside of your DNS to the New domain
You can also use services similar to Azure Front Door (https://docs.microsoft.com/en-us/azure/frontdoor/front-door-url-redirect?pivots=front-door-standard-premium)

However there is a much easier way to create redirect rule for Webflow websites, right inside of Webflow.

Redirect your old domain to your new domain

First select your Project, open the Dashboard and click Hosting

Scroll Down to add your Custom Domain

Click Add Domain and add your New Domain without deleting your Original Domain

Once both domains are added, highlight your mouse over your Primary Domain that you want the redirect to go to and click Make Default

It's best practice to select the domain with the www extension as your default.

Lastly, you need to Publish the changes in order for this redirect to take effect. Make sure you select all domains available

Congratulations 🎉, You have just setup a redirect rule inside of Webflow!

DEV Community: Light AI