DEV Community

Cover image for Automating My Deploys From GitHub to Glitch
Melissa McEwen for Glitch

Posted on • Edited on

Automating My Deploys From GitHub to Glitch

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.

Top comments (12)

Collapse
 
bacongravy profile image
David Kramer

Thank you! This article is awesome!

I was so inspired by the technique you describe that I created a new project, glitcheroo. It lets you deploy an app from a local git repository to a remote Glitch project, kind of like Heroku.

Collapse
 
melissamcewen profile image
Melissa McEwen

Whoa, I'm totally gonna check this out, it sounds awesome.

Collapse
 
bacongravy profile image
David Kramer

I wrote up an introduction here: dev.to/bacongravy/introducing-glit...

I'd love your feedback.

Thread Thread
 
melissamcewen profile image
Melissa McEwen

Reading now + sharing with my colleagues!

Thread Thread
 
bacongravy profile image
David Kramer

Coming full circle, I also created a project to demonstrate how to use glitcheroo from a GitHub Actions workflow: github.com/bacongravy/useful-insect

This is the interesting part:

      - name: Deploy project to Glitch
        run: |
          npx glitcheroo deploy
        env:
          GLITCHEROO_GIT_URL: ${{ secrets.GLITCHEROO_GIT_URL }}
Collapse
 
dtinth profile image
Thai Pangsakulyanont

Thanks you for this! This Git hook is the missing piece for me to sync changes from GitHub to Glitch directly.

So far I tend to do the other way around, editing and prototyping stuff in Glitch and have it synchronized to GitHub. I have a central repo that runs every morning (on GitHub Actions) to sync my 10+ Glitch projects to GitHub. With this, now I know how to do a two-way sync, yay!

By the way, should the Git hook also run refresh so that changes are reflected in the Glitch editor in case someone is viewing it? Are there any pitfalls of doing that?

Collapse
 
melissamcewen profile image
Melissa McEwen

Ah good idea, I think adding Refresh would help in case you have it open in the editor. I'll try it out.

Collapse
 
jpcarrascal profile image
JP Carrascal

This article was super helpful!
I managed to set two Glitch projects to behave like my development and production environments, with my main repo being in GitHub and everything working CI/CD style. Thank you very much!

I have three comments:

  • I'd clarify that the GitHub action uses somebody else's code from github.com/wei/git-sync
  • The GitHub repo should be public. Otherwise you need to also set a SSH public key as explained in the link above.
  • Minor: In the article you say "Replace YOUR GITHUB REPO URL HERE with your https GitHub URL", but there is no "YOUR GITHUB REPO URL HERE" in the action code (although the solution is obvious :)

Cheers!

JP

Collapse
 
melissamcewen profile image
Melissa McEwen

Thanks for the feedback, just made some edits as suggested :D

Collapse
 
itshi32 profile image
itshi

one point wei has update his workflow since post
other point folowing article i got DESTINATION=***:master
Cloning into '/root/source'...
fatal: could not read Username for 'github.com': No such device or address
fatal: not a git repository (or any parent up to mount point /github)

Collapse
 
khalby786 profile image
khaleel gibran
Collapse
 
melissamcewen profile image
Melissa McEwen

Thanks! That one is interesting too. I needed a solution that didn't alter the code to the project because for example the project in question here is really just a repo of Markdown files and I wanted to keep it that way.