The purpose of this project is to get key info about existing repos to show on my portfolio projects page. Instead of manual adding essential the same info in 2 places i.e. name, description and topics, I thought it would be worth looking into how to integrate with GitHub - Node.js style.

Using the GitHub API?

I looked at using the GitHub API but found the documentation to be hard to understand and too extensive if that makes any sense... I wanted to do this quickly so maybe given more time it would have suited my needs.

Please note this project is currently a work in progress and wanting to explore more.

Repo here

Let's jump in 🏃‍♀️

Creating a new folder in my workspace called my-projects-api then cd into that and a cheeky npm init to start things off. I'm using a couple packages so to add them too.

 npm i express
 npm i cors
 npm i body-parse
 npm i axios

I have a config.js file to keep my secrets, you'll need to get a GitHub token if you haven't already.

var config = {};

config.githubToken = '################################';
config.githubUsername = 'lornasw93'; // not secret just saves putting in a few places

module.exports = config;

My aim at this point is to get a list of my repos, keeping it simple to start with. Something a bit odd too, or so I think, topics aren't included by default in the response. To include topics you need to add a Accept header (as shown below).

var express = require('express'),
    cors = require("cors"),
    app = express(),
    bodyParser = require('body-parser'),
    config = require('./config'),
    axios = require('axios');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(cors());

app.get("/api/repos", (req, res) => {
    axios({
        method: "get",
        url: `https://api.github.com/users/${config.githubUsername}/repos`,
        headers: {
            Authorization: `Bearer ${config.githubToken}`,
            "Content-Type": "application/json",
            "Accept": "application/vnd.github.mercy-preview+json" // MUST ADD TO INCLUDE TOPICS
        }
    }).then(response => {
        res.send(response.data);
    }).catch(err => {
        res.send(err);
    });
});

const PORT = process.env.PORT || 3000;
module.exports = app.listen(PORT, () => {
    console.log('Server running on port %d', PORT);
})

Result ✅

I call the above method, in my case, from my website's project service class like so http://localhost:3000/api/repos and a JSON object is returned. I don't need all that data just a few bits so, I loop round the repos and fetch out the interesting parts. Note this particular change with using this new API isn't reflected on my current live site, only locally. The data I'm displaying is:

• Name
• Description
• Topics
• Url
• Homepage (basically website URL)
• Updated at

With the end result looking like this:

Thanks for reading! 😀