Importing a node.js bot from GitHub to Glitch

A quick guide on importing a GitHub project to Glitch.

Before you start making bots, consider reading these essays and articles. Also worth browsing: resources for cleaning up your bot's language.
Need help with this tutorial? Ask in the Botmakers community!

Artist formerly known as HyperDev

Glitch is a really awesome online tool that lets you create and remix all kinds of fun apps, including bots.

I put together several Twitter bot starter projects, 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.

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.

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.

Step 2: API keys

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

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, —

— 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”.

In conclusion

And there you go, this is how you import a project from GitHub to Glitch. 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 stefan@fourtonfish.com, or stop by in the Botmakers community 🙂

Thanks for following along, and keep making cool stuff!

Stefan

Creator of Botwiki and Botmakers, Botwiki editor, and Botmakers community manager.

Enjoyed the tutorial?

Consider supporting Botwiki!

Latest from the blog

Poll: Multi-network bots and followers
Poll: Multi-network bots and followers

Does Twitter get your bot the most followers?

Poll: Bots and public data
Poll: Bots and public data

Would you take $5,000 to shut down your bot?

Twitter officially released v2 of their API
Twitter officially released v2 of their API

Manage tweets and lists, tweet to Super Followers, and yes, you can post polls now!

Visit the blog

.