Automating My Deploys From GitHub to Glitch

Melissa McEwen - Apr 21 '20 - - Dev Community

Programmers love automation. Anything we have to do over and over again? Automate it! One of these tasks I've been working to automate is deploying code from Github to Glitch. Here's my latest process. It's a work in progress, but check it out and let me know what you think.

Why Github to Glitch?

Glitch is a great tool for writing and testing full stack apps online. But I also love GitHub's tools for code review, especially when I'm working on a team. My ideal flow is to work on a Glitch remix, push to GitHub, review with my team, and deploy to the main Glitch project.

This is important once I've promoted a Glitch app. I don't want to edit and test Starter-Discord while there are users actively looking at it and remixing it.

My original solution was a Probot. It used the Glitch API to import the code from Github. The issue is the Glitch API isn't public. It's not at a stable point where we recommend building your own tools with it. I knew some API changes were coming down the pipeline to the endpoint I was using. Since I wouldn't be able to use it anymore, I needed a new solution.

Full warning: this is a proof of concept that uses arcane and forbidden Git knowledge. And I'm not even that good at Git. Use at your own discretion. Feedback from more knowledgeable people welcome.

Git Hooks to the rescue?

Since Glitch projects each have their own Git repo, I wondered if I could use that instead. I knew there was something called Git Hooks that could automate some action in response to repo activity. But I'd never used them before.

A couple of hours of reading and testing later, I had a working prototype that would deploy any new code into the Master branch.

But that didn't solve the GitHub part of the equation. For that I decided to try something else new: GitHub Actions. I read some docs and tried a couple before deciding on git-sync by wei. I had some random bugs mainly dealing with authentication that took me a couple of hours to figure out.

The workflow

Let's say I want to update the Dev.to handbook Glitch project. I don't want to edit it directly while people are using it, so I:

  • Remix it on Glitch
  • Make my edits and commit them to a new branch
  • Push the new branch to the GitHub repo
  • On the GitHub repo I create a PR for the new branch into master
  • Then my team and I review the changes
  • Once approved, we merge

Now here's where the automation starts

  • The merge triggers the Github Action
  • The Github Action pushes the code into the Git repo of the main Glitch app
  • When the Git repo of the main Glitch app receives it, that triggers the Git Hook
  • The Git Hook replaces all the current code with the new code

How to set it up yourself

Just a warning that this will wipe away any code in your Glitch project and replace it with the code from Github, so use with caution!

You'll need:

  • a "main" Glitch project the code will deploy to
  • a public Github repo for that project that the code will deploy from

Step 1: In the Glitch terminal

  1. Go to the Glitch terminal
  2. Run git config receive.denyCurrentBranch ignore
  3. create a githook in the terminal using your favorite text editor. I used Vim so vim .git/hooks/post-receive
  4. Put this bash script into your hook:
#!/bin/bash
unset GIT_INDEX_FILE
git --work-tree=/app  --git-dir=/app/.git checkout -f
Enter fullscreen mode Exit fullscreen mode
  1. Give your hook execution permission chmod +x .git/hooks/post-receive

Step 2: Create a GitHub secret

  1. Head back to your Glitch project and click tools --> Git, Import, and Export
  2. Copy Your project's Git URL: this contains an auth token so keep it secret!
  3. Since it's a secret head to your Github repo and to the "secrets" section
  4. Paste the whole thing into a new secret and name it glitch_git_URL

Step 3: Create a GitHub Action

  1. Head to actions and create a new workflow from "Set up a workflow yourself"
  2. This is the code for using the git-sync action with your secret. Replace the value in SOURCE_REPO with your https GitHub URL (something like https://github.com/glitchdotcom/devto.git).
on: 
 pull_request:
  types: [closed] 
jobs:
  repo-sync:
    if: github.event.pull_request.merged == true
    runs-on: ubuntu-latest
    steps:
    - name: repo-sync
      uses: wei/git-sync@v1
      env:
        SOURCE_REPO: "https://github.com/glitchdotcom/devto.git"
        SOURCE_BRANCH: "master"
        DESTINATION_REPO: ${{ secrets.glitch_git_URL }}
        DESTINATION_BRANCH: "master"
      with:
        args: $SOURCE_REPO $SOURCE_BRANCH $DESTINATION_REPO $DESTINATION_BRANCH

Enter fullscreen mode Exit fullscreen mode

Step 4: Test it!

Now for the magic moment. Update your GitHub code anyway you choose. And click on Actions to see it in ...action...

The Future?

Now you know how to set up automated deploys from GitHub. If you're interested enough in this, we may set up a way to automate away all those steps. If there is anything better than automation, it's automation of automations. For now, try it out and let us know what you think!

Give your Glitch apps superpowers - keep them awake, lift rate limits, and get more memory and disk space.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player