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
- Go to the Glitch terminal
- Run
git config receive.denyCurrentBranch ignore
- create a githook in the terminal using your favorite text editor. I used Vim so
vim .git/hooks/post-receive
- Put this bash script into your hook:
#!/bin/bash
unset GIT_INDEX_FILE
git --work-tree=/app --git-dir=/app/.git checkout -f
- Give your hook execution permission
chmod +x .git/hooks/post-receive
Step 2: Create a GitHub secret
- Head back to your Glitch project and click tools --> Git, Import, and Export
- Copy
Your project's Git URL:
this contains an auth token so keep it secret! - Since it's a secret head to your Github repo and to the "secrets" section
- Paste the whole thing into a new secret and name it
glitch_git_URL
Step 3: Create a GitHub Action
- Head to actions and create a new workflow from "Set up a workflow yourself"
- 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 likehttps://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
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!
Top comments (12)
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.
Whoa, I'm totally gonna check this out, it sounds awesome.
I wrote up an introduction here: dev.to/bacongravy/introducing-glit...
I'd love your feedback.
Reading now + sharing with my colleagues!
Coming full circle, I also created a project to demonstrate how to use
glitcheroo
from a GitHub Actions workflow: github.com/bacongravy/useful-insectThis is the interesting part:
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?Ah good idea, I think adding Refresh would help in case you have it open in the editor. I'll try it out.
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:
Cheers!
JP
Thanks for the feedback, just made some edits as suggested :D
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)
You should see this: support.glitch.com/t/tutorial-how-...
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.