Expose a json file for consumption?


#1

My goal is to:

  1. query GitHub v4 (graphql) api for data about an organization’s repos,
  2. consume the GH api response data from a separate react app that renders the data as a pretty list in HTML.

Thanks to Glitch allowing private environment variables, I can keep my GitHub token a secret when querying their api.

Based on what I know how to do, my plan is to:

  1. save the latest GH response to a json file every hour using a cron job
  2. make a XMLHttpRequest from a react app on github pages to the json file mentioned above, and render out the react components based on the json data.

I’ve successfully written a small node app in Glitch that saves the GH api response into .data/data.json.

My questions:

  • How can I expose .data/data.json to another web page via a XMLHttpRequest? Do I need to install a server like express or something similar? (As a side note, although I can see the .data/ folder in my Glitch project via the console, I cannot see the .data/ folder in my main Glitch project directory view.)
  • Is my approach of centering this app around a json file the most appropriate method? Or would a better practice be to somehow return the GH data from a function instead of a file? (I feel like the function method would be slower because it would have to go get the GH data first, whereas the file method would already have the data at the ready.)

Here’s my working node app code:

const fs = require('fs');
const request = require('request');
const CronJob = require('cron').CronJob;

const options = {
  'uri': 'https://api.github.com/graphql',
  'method': 'POST',
  'headers': {
    'User-Agent': 'brianzelip'
  },
  'auth': {
    'bearer': process.env.TOKEN
  },
  'body': JSON.stringify({
    "query": "query { \
      organization(login: \"NCBI-Hackathons\") { \
        login \
        repositories(first: 100) { \
          totalCount \
          nodes { \
            name \
            description \
            url \
            languages(first: 1) { \
              edges { \
                node { \
                  name \
                } \
              } \
            } \
            releases(first: 1) { \
              totalCount \
            } \
            issues(first: 100, labels: \"manuscript\") { \
              edges { \
                node { \
                  body \
                } \
              } \
            } \
          } \
        } \
      } \
    }"
  }),
};

new CronJob('0 0 */1 * * *', function() {
  request(options, function (error, response, body) {
    if (error) {
      return `ERROR!: ${error}`;
    } else if (response.statusCode === 200) {
      console.log('GitHub api was successfully queried 🎉\n');
      fs.writeFile('.data/data.json', body, (err) => {
        if (err) throw err;
        console.log(`.data/data.json was successfully written 🎉\n`);
      });
      let timestamp = new Date();
      const logEntry = `NCBI-Hackathons repos data refresh happened at ${timestamp} 🎉\n`;
      console.log(`timestamp is ${timestamp}`);
      fs.appendFile('.data/data.log', logEntry, (err) => {
        if (err) throw err;
        console.log(`The timestamp ${timestamp} was appended to .data/data.log 🎉\n`);
      })
      return;
    } else {
      return `Problem! Status code = ${response.statusCode}, response = ${response}`;
    };
  });

}, null, true, 'America/New_York');

#2

You should be able to do it using express with something like this:

var express = require('express');
var app = express();

// When client hits my-site.glitch.me/gitjson, return document
app.get("/gitjson", function (request, response) {
  response.sendFile(__dirname + '/.data/data.json');
});

var listener = app.listen(process.env.PORT, function () {
  console.log('Your app is listening on port ' + listener.address().port);
});

If you started from an empty Glitch project, most of that should already be in server.js.


#3

Thanks @Tim.

Yes, there was code like that in server.js. But I was unsure whether or not I needed a server module to make the file available. Your feedback is helpful.

Question about the listener port - is it necessary? if so, will i need to include the port number in my XHR to get the data file?


#4

You need the code that creates the listener - that’s what starts the web server. You don’t need the port in your XHR request - Glitch takes care of the magic of connecting your-site.glitch.me port 80 to port 3000 in your container, so you can just use the domain name.


#5

So dope! I got it working, and understand express routing and static files more now. Thanks @Tim