Importing a node.js bot from GitHub to Glitch

Need help with this tutorial? Ask in the Botmakers community!

Artist formerly known as HyperDev

Glitch is a really awesome and free app/website that lets you create and remix all kinds of fun apps, including bots.

I already wrote one tutorial that shows you how to start a new bot project on Glitch, and I put together a Glitch Twitter bot template. But what if you want to take one of the open source node.js bots and import it from GitHub to Glitch?

My friend, did you open just the right tutorial.

We are going to use my random-image-twitterbot template (find a tutorial for it here). Note that this tutorial may be a bit more advanced due to how certain things in Glitch work. For example, the random-image-twitterbot source code contains an images folder that will become invisible after you import it from GitHub, and while the bot will happily tweet the images from it, you will not be able to add or remove them.

Yes, you can upload your images to the assets folder, but it turns out that Glitch doesn't actually store the files in that folder. Instead, it uploads the images to a CDN and only keeps a list with URLs inside a file called .glitch-assets.

Oh, and your bot will go to sleep after running for five minutes.

Don't fret, there's a solution for all of this.

Before we embark on this journey together, feel free to check out the refactored code here.

This guide will be specific to this one bot, but you will learn quite a bit about how Glitch works, and hopefully be able to apply this knowledge when importing other open source bots, or open source projects in general into Glitch.

Yep, there's quite a bit of work ahead of us. We'll start whenever you're ready!

Step 1: Importing a project

Welcome back!

Alright, let's open up Glitch and create a new project.

New Glitch project

Click the name of your project in the top left corner. This will bring up a menu. Click the Advanced Options button at the bottom.

Advanced options

Copy this right here: fourtonfish/random-image-twitterbot. You will use it in a moment.

Now, back on Glitch, click Import from GitHub. Use the text you copied above in the popup prompt.

Import from GitHub

Step 2: API keys

Go ahead and delete the config-example.js file.

Delete config-example.js

You can follow this tutorial to create a new Twitter app. At the end, you should have the following information:

  • Consumer Key
  • Consumer Secret
  • Access Token
  • Access Token Secret

Switch to your .env file, --

Default .env

-- and update it with the following code:

CONSUMER_KEY='123456789'
CONSUMER_SECRET='123456789'
ACCESS_TOKEN='123456789'
ACCESS_TOKEN_SECRET='123456789'

(Naturally, use your own API keys/secrets instead of 123456789.)

Back in our server.js file, let's change how the API keys are loaded:

config = {
    consumer_key: process.env.CONSUMER_KEY,
    consumer_secret: process.env.CONSUMER_SECRET,
    access_token: process.env.ACCESS_TOKEN,
    access_token_secret: process.env.ACCESS_TOKEN_SECRET
};

This part may differ slightly across various codebases, but the bottom line is that you have to save your API keys into the .env file (the actual API keys will be hidden when another user looks at your source code).

Next, update the package.json file to look like this:

{
  "name": "random-image-twitterbot",
  "version": "0.0.1",
  "description": "Tweet a random image from a folder.",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "twit": "^2.1.0",
    "express": "^4.14.0"
  },
  "engines": {
    "node": "6.9.1"
  },
  "repository": {
    "url": ""
  },
  "keywords": [
    "node",
    "glitch",
    "hyperdev",
    "twitter",
    "twitterbot",
    "bot"
  ]
}

You can add more modules/libraries under dependencies, change the name and description, but the important part is that you include this:

  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  }

And, of course, your main script file should be called server.js.

(I think you just need to match the name of the file with the node *** command, but I'm just sticking to the default server.js name here.)

If you did everything correctly, your bot will start tweeting at this point.

Step 3: Images

As mentioned earlier, the original source code comes with a folder called images. But after you import the project into Glitch, it appears to have disappeared.

This folder is still present, but we need to download the images separately from the GitHub repo and upload them into the assets folder.

Step 4: The big refactor

This part might differ with other bots, but in our case, we just need to load the images from CDN instead of the images folder.

Here, again, is the refactored code (see the server.js file).

Notice the upload_random_image_remote function. I am using the request module to fetch an image from the CDN.

The part where we upload the image and post it to Twitter is essentially the same. (Read here, in case you're wondering about the base64 thing.)

I also added the extension_check function, which filters out any non-image uploads.

We're kicking it all off by reading the .glitch-assets file, which, like I said, has references to all the uploaded files.

Now, if you're working with a bot that uses other types of files, it might be a bit tricky. Let's say your bot works with text files, for example.

All the files and folders will be imported from the original repo, and the bot should work without any updates to the actual source code (just follow the steps one and two above). The only problem will be if you want to add, remove, or update some of the files.

Also, note that apparently you can create folders by creating new files with names like folder/folder/filename.txt, which creates the folders, but you will not be able to browse them or easily add more files -- only using this "trick".

Hey, you can't complain, cause it's all free.

Step 5: Staying awake

Now for the final step.

Glitch will automatically put your app to sleep after five minutes of not getting any traffic.

What this means, your app needs to be getting actual http requests in order to stay awake, otherwise it will sleep, and only wake up once it receives traffic.

One of the Glitch engineers (do they call themselves glitchers?) confirmed that it's okay to use a web service to regularly ping your app every 25 minutes to wake it up.

It would be better if you could directly use cron, but hey, we'll take whatever we can.

There seems to be several free web cron services. I am going to go with cron-job.org, because they're free and open souce. And they're the first result.

cron-job.org

Be sure to use the URL for your app here, in my case that would be https://random-image-twitterbot.glitch.me.

Basic info

On this particular site, the basic scheduling only goes up to every 30 minutes, so I have to go with the custom setup.

Cron it up

Here I'm just going to select everything under Days, Months, Hours, and 0 under Minutes so that my bot tweets once every hour.

Notice that back in the server.js file I commented out the timer I used to trigger the image upload every 10 seconds. Since our bot will go to sleep after five minutes, the function will only run a few times before the bot stops posting.

Instead we can just run the function once, and it will be executed every time cron-job.org pings our app and wakes up the bot.

And there you go, this is how you import a project from GitHub to Glitch.

In conclusion

I'd be happy to add more steps here, if anyone wants to share their experience importing open source code from GitHub; you can email me at [email protected], or stop by in the Botmakers community :-)

Thanks for following along, and keep making cool stuff!

Last updated on March 16, 2017.

#tutorial #guide #import #node #nodejs #node.js #github #glitch #hyperdev #fourtonfish #botwiki-original

Botwiki is a personal side project that's made possible through donations and hard work and dedication. Huge thanks to everyone who helped us out! 🙌 PS: Here's a list of our supporters.