Clever Geek Handbook

Getting Open Graph metadata using create-react-app

Problem

I am using create-react-app with Firebase and it was a dream but I ended up on a roadbloack. I would like to include in my application fetching Open Graph metadata from a user-provided url, but as we know this is prevented when this is done in the browser.

This Open Graph Metadata example with Node is very close to what I am trying to do.

What i tried

I went through the readme, specifically Proxying API Requests in Development .

I've been looking for issues here and in the Github repository for build-react-app (open and closed) for something meaningful. Several results have returned to CORS and similar, but there are still quite a few gaps in how to include something to achieve this.

I've read posts saying that I should be using Express, but I'm not sure how this can be included in the create-response-app and webpack (let alone how this would work in production).

I think I'm just not really assembling all the pieces to accomplish this, and would be grateful for guidance if anyone has time.

Package.json file 
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "1.0.10"
  },
  "dependencies": {
    "firebase": "^3.9.0",
    "material-ui": "^0.18.7",
    "node-sass-chokidar": "0.0.3",
    "npm-run-all": "^4.0.2",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-avatar": "^2.3.0",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.2",
    "react-tap-event-plugin": "^2.0.1"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
+3


source to share


2 answers


The ideal solution here is to set up the API and proxy request.

  • The user makes a request to get Open Graph data that is located on a third-party server.
  • The request is passed to your API
  • Your API makes a request
  • Your API is sending data back to the browser in JSON format.

The API and your ReactJS app are separate entities. Don't treat them the same way. ReactJS will request your API, but whatever it does.

I use PHP (and Slim framework) for my APIs, but you can use whatever language you like best. Express is a good option if you are comfortable using it.

Depending on the size of your application in production, you might have your ReactJS application and API on the same server. Or you can have your ReactJS app on a CDN server and the API on another. For an application that was expecting to receive a lot of traffic, I go with the second option and balance the API and CDN balance.



If you want to go with Express, take a look at their docs. Spend some time playing with it and get a feel for how things work.

Express is not overly complicated and it is not the only option. I'm good with Feathers , although I haven't used it myself.

Below is a list of some libraries / frameworks:

+2


source


Just pay me here as I solved it for myself.

At first I created a new project just to get Open Graph data. It has two main files; package.json

and server.js

.

I decided to go with the open-graph-scraper module because it has been recommended by several online authorities and seems to have some pretty good backups when OG is not available on the site.

package.json 

{
  "name": "my-api",
  "version": "0.1.0",
  "description": "Extract Open Graph info.",
  "scripts": {
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "express": "^4.15.4",
    "open-graph-scraper": "^2.5.4"
  },
  "devDependencies": {
    "request": "^2.81.0",
    "tape": "^4.7.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/your-repo"
  }
}

For the server, I set up my route as the parent route /

(because this is actually just what it was used for) and used the open scrapper module to return site data.



server.js 

var ogs = require('open-graph-scraper');
var express = require('express');
var app = express();

app.all('/', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
 });

app.get('/', function (req, res) {
  if(req.query['url']){

    var siteUrl = req.query['url'];
    var options = {
      'url': siteUrl,
      'headers': {
        'accept-language': 'en'
      },
      'timeout': 4000
    };

    ogs(options, function (err, results, response) {
      if(results.err){
        res.json(results.err);
      } else {
        res.json(results);
        res.end();
      }
    });

  }
});

var port = process.env.PORT || 5000;
app.listen(port);

console.log("Express server listening on port %d", port);

Finally, I have deployed to Heroku . From here you can query site data using Axios in your ReactJS project.

By submitting a request for a URL with the following structure, you will receive a response from the OG scraper with site information in JSON format. Request example:

http://example.heroku.com?url=http://github.com

It will return Open Graph info for github.

-1


source






More articles:


All Articles