Data, Maps, Usability, and Performance

Create Repositories with GitHub API and HTML5

Last updated on November 19, 2014 in Development

Create repo with GitHub API

Create GitHub Repo with Folder Upload

GitHub has a ton of awesome repositories and it hosts most of the top libraries, frameworks, and plugins. People sometimes ask me to put code on GitHub and today I wanted to look into optimizing that process. It’s not hard to create a git repo, pull it, authenticate, and commit from the command line but it would be great to just have it all work with just a folder upload. If you are working on a project, it probably lives in a folder on your hard drive, so lets create a page where you can upload folders and it automatically creates a repository using the GitHub API.

First, I will pick up from my last post on the Gist API and explain how you can create and add files to GitHub repos with Ajax. Then, I will create an online page that supports repo creation with client-side folder input and API calls with Ajax.

Creating a repository requires authentication so our initial Ajax call needs to pass a GitHub username and a password in exchange for an API token. I am passing in “repo” for scopes and a note so that the API token can have proper permissions:


$.ajax({ 
    url: 'https://api.github.com/authorizations',
    type: 'POST',
    beforeSend: function(xhr) { 
        xhr.setRequestHeader("Authorization", "Basic " + btoa("YOUR-USERNAME:YOUR-PASSWORD")); 
    },
    data: '{"scopes":["repo"],"note":"create repo with ajax"}'
}).done(function(response) {
    console.log(response);
});

The response gives me a token and now I can proceed with repository creation. I pass the token under an “Authorization” header and the data includes the name of the repo and the description. You can optionally pass in a homepage as well. Finally, I set “auto_init” to true so that my repository can already have an initial commit of an empty README file:


$.ajax({ 
    url: 'https://api.github.com/user/repos',
    type: 'POST',
    beforeSend: function(xhr) { 
        xhr.setRequestHeader("Authorization", "token TOKEN-FROM-PREVIOUS-CALL"); 
    },
    data: '{"name": "repo test","description":"repo create from ajax test","homepage": "https://sample.com","auto_init":true}'
}).done(function(response) {
    console.log(response);
});

It created the repo programmatically and the response has a contents_url parameter which I can use to add files to the GitHub repository. It will be a PUT call since we are modifying the repo and the name of the file is appended to the url path. The data in the file needs to be added with base64 encoding so we can just use the Javascript btoa() function for that string conversion. Here is how to add a file to a GitHub repo with Ajax:


var filename = "firstfile.txt";
var filemessage = "uploading a file";
var filecontent = "The data of the file."
var basecontent = btoa(filecontent);
var apiurl = contents_url.replace('{+path}',filename);
var filedata = '{"message":"'+filemessage+'","content":"'+basecontent+'"}';

$.ajax({ 
    url: apiurl,
    type: 'PUT',
    beforeSend: function(xhr) { 
        xhr.setRequestHeader("Authorization", "token TOKEN-FROM-PREVIOUS-CALL"); 
    },
    data: filedata
}).done(function(response) {
    console.log(response);
});

If you want to place the files into folders, you just add the folder name to the path or filename. In this repo-test, I created the file-in-folder.html file in testFolder folder by making a PUT call to /repo-test/testFolder/file-in-folder.html. This gives us all the calls we need to create the online repo creation tool. It’s just a basic form with 5 inputs: upload input for your folder(s), username and password for authentication, and title and description to create the GitHub Repository. I used HTML5 validation and jQuery for Ajax calls. Take a look:

Automate GitHub Repo Creation with JavaScript

External

Github.js
octokit.js
gh3
node-github
octonode

Tags: , , ,

Facebook Twitter Hacker News Reddit More...