Skip to content

Commit

Permalink
Merge pull request #1 from melissamcewen/glitch
Browse files Browse the repository at this point in the history
Updated package.json, .gitignore, readme
  • Loading branch information
melissamcewen authored Mar 11, 2019
2 parents b39c6bd + 85b7609 commit 736525b
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 63 deletions.
4 changes: 0 additions & 4 deletions .config/configstore/update-notifier-npm.json

This file was deleted.

12 changes: 7 additions & 5 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
node_modules
npm-debug.log
*.pem
.env
package-lock.json
node_modules
npm-debug.log
*.pem
.env
package-lock.json
.config/
shrinkwrap.yaml
103 changes: 52 additions & 51 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,60 +3,61 @@ Welcome to Probot on Glitch

This is the Glitch equivalent of running `create-probot-app` to generate a new probot app locally. Updates to your code will instantly deploy and update live.

---
To get your own Glitch-hosted Probot up-and-running, follow these steps. If you need more detail, the [Probot Docs](https://probot.github.io/docs/development/#configuring-a-github-app) are a great place to go to learn more.

## Getting Started
## Step 1: Remix this Glitch app
When you [Remix](https://glitch.com/help/remix/) an app on Glitch you get your own __🤖Glitch Probot App__. You'll start with a randomly generated __🎏Glitch app name__ ([created using friendly-words](https://friendly-words.glitch.me/)) that determines your url. Like `friendly-rabbit` which has a url of `friendly-rabbit.glitch.me`. This is your __🐠Glitch URL__. You can [change it](https://glitch.com/help/how-do-i-change-my-projects-name-description-avatar/) and if you do your __🐠Glitch URL__ will change.

To get your own Glitch-hosted Probot up-and-running, follow these steps. If you need more detail, the [Probot Docs](https://probot.github.io/docs/development/#configuring-a-github-app) are a great place to go to learn more.

1. [Configure a new app on Github](https://github.com/settings/apps), and click "New GitHub App". You might want to do this in a new window, because we will be copying-and-pasting information back and forth.
- Hit the "Share" button on the top left of this page, and find "Share your App" to find the URL to your App. It will look something like `https://random-word.glitch.me/`, except the domain will be specific to your app's name.
- For the Authentication URL and the Webhook URL, use this URL (again, updating the domain to match yours): `https://random-word.glitch.me/`.
- For the Webhook Secret, just use "development".
until Step 4.
- On the **Permissions & webhooks** tab, add read and write permissions for issues.
- On the **Permissions & webhooks** tab, subscribe to **Issues** events.
- Save your changes.
- On the configuration page that comes up after saving, download your private key. It will be saved into a file named `my-app-name.2018-06-20.private-key.pem`, with your app name, and today's date.

2. Click the **Install** tab, and install your app into one of your repositories.

3. Click the **New File** button (at left) and type `.data/private-key.pem`. Then click **Add File**. Now we need to copy the key to the clipboard. Bearing in mind that your private key is in your Downloads folder, and will be named like `my-app-name.2018-06-20.private-key.pem `, do the following:

* Mac:
```bash
pbcopy < ~/path/to/downloads/app-name.private-key.pem
# Copies the contents of the id_rsa.pub file to your clipboard
```

* Windows:
```
clip < ~/path/to/downloads/app-name.private-key.pem
# Copies the contents of the id_rsa.pub file to your clipboard
```

* Linux:
```bash
sudo apt-get install xclip
# Downloads and installs xclip. If you don't have `apt-get`, you might need to use another installer (like `yum`)
xclip -sel clip < ~/path/to/downloads/app-name.private-key.pem
# Copies the contents of the id_rsa.pub file to your clipboard
```

In the new file in Glitch, paste the contents of the clipboard.

4. Edit the `.env` file (at left) with your app credentials.
- `APP_ID` can be found in the About section of your Github app.
- `WEBHOOK_SECRET` is the value you generated in Step 2.
- `PRIVATE_KEY_PATH=` should be set to `.data/private-key.pem`.
- `NODE_ENV=` should be set to `production`.

5. Wait for app to load. A green `Live` label should show up next to the **Show** button when it's finished loading.

6. Open a new issue in the repo where you installed your app, and watch for your app to reply!

5. Head back to our [Webhook Docs](https://probot.github.io/docs/webhooks/) to learn how to start building your app.
---
## Step 2: Create a 😸 Github App
The next step is to create a Github app. Probot now has a handy button that does this for you automatically! Click the __Glitch 🕶 Show__ button. In the editor it's right up top next to your __🎏Glitch app name__.

It will take you to your __🐠Glitch URL__ + `/probot`. And you'll see a button that says "Register Github App." Click it and it will take you to __Github__ where you'll create a unique name for your __😸Github App__.

It will ask you to install to your Github account or one of your teams. It will say the permissions are " No access to code" for now but we'll fix that in step 3. Head back to __Glitch__ and check your __🗝[Glitch .env](https://glitch.com/help/env/)__ – you'll see the values for your private key, app ID, and webhook secret have been automatically filled in for you!


### Manually create a 😸 Github App
If you'd prefer to do this manually or the automatic set-up doesn't work, here is how to do it:

1. Head to your [GitHub Apps settings](https://github.com/settings/apps). You might want to do this in a new window, because we will be copying-and-pasting information back and forth between Github and Glitch.
2. Click "New Github App"
3. You'll be taken to "Register new GitHub App"
4. Put your __🐠Glitch URL__ in the "User authorization callback URL
" and "Webhook URL" fields - should look like `https://your-app-name.glitch.me`
5. Fill in "Webhook secret (optional)" with a __🤐Webhook secret password__. Use any password you'd like.
6. Scroll down to the bottom and click the "Create GitHub App" button. You'll be taken to your __⚙️Github App's General Settings page__
7. Head back to your __🤖Glitch Probot App__ and put that __🤐Webhook secret password__ value in __🗝[Glitch .env](https://glitch.com/help/env/)__ in the `WEBHOOK_SECRET` line after the `=`
8. Now go back to __ ⚙️your Github App's General Settings page__ and you'll see some info. You should see an __🆔App ID value__ which should be a few numbers
9. Head back to your __🤖Glitch Probot App__ and put that __🆔App ID value__ value in __🗝[Glitch .env](https://glitch.com/help/env/)__ in the `APP_ID` line after the `=`
10. Whew, now we need to go back to __ ⚙️your Github App's General Settings page__ and scroll to the "Private keys." You'll need to generate and download a __ 🔑 private key__ to __💻 computer__
11. Now that key is like a password, so we __don't__ want to drag it in to your Glitch app to get it in here. Instead we'll get it to our clipboard and paste it into Glitch. To copy from the command like, open a terminal on your __💻 your computer__ (not Glitch). `cd` to your download folder and run `cat your-key-name.pem | pbcopy` for Linux/Mac or `clip < /path to key` for Git Bash in Windows. You can also open the file in a plain text editor like Notepad, VScode, or Sublime Text and copy from there. Now your __ 🔑 private key__ is in your clipboard so you can paste it.
12. Head back to your __🤖Glitch Probot App__ and click "New File" on the left side file tree and type `.data/private-key.pem`. Then click "add file." Paste your __ 🔑 private key__ into it.

### Step 3: Give your Probot permissions!
Sadly your Probot is not allowed to do anything. It's not allowed to read any info either. Let's give it the right permissions to be able to do those things.

Head to your __⚙️Github App's General Settings page__. Click on the "Permissions & events" tab.

Go to the "Permissions" section and add the following permissions:
- Issues - read & write


Once you've done that, scroll down and you'll see a "Subscribe to events" section. This section allows Probot to "subscribe" to events so that Github knows to tell Probot about code. Check the following:
- Issues

### Step 4: Add your Probot to a repository
Now head to the "Install app" tab on your __⚙️Github App's General Settings page__.

From here you'll see a list of your Github Accounts and can install your __🤖Glitch Probot App__ on any of your repositories.

If you already installed it in an account check the ⚙️ gear button to update your permissions and install it to a specific repository.

### Step 5: Try it out!
Open a new issue in the repository where you installed your app, and watch for your __🤖Glitch Probot App__ to reply!

Head back to our [Webhook Docs](https://probot.github.io/docs/webhooks/) to learn how to start building your app.

#### About Glitch

Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
"description": "",
"author": "github-username <email-address>",
"license": "ISC",
"repository": "your-repository-name",
"repository": "https://github.com/probot/hello-world.git",
"scripts": {
"dev": "nodemon --exec \"npm start\"",
"start": "probot run ./index.js",
"test": "jest && standard"
},
"dependencies": {
"probot": "^7.0.0"
"probot": "^9.0.0"
},
"devDependencies": {
"jest": "^23.2.0",
Expand All @@ -30,4 +30,4 @@
"jest"
]
}
}
}

0 comments on commit 736525b

Please sign in to comment.