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.
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:
Top comments (0)