Prerender.io with reactjs/express application not recognizing Prerender token

Question

I'm trying to get prerender set up with my application. I'm using react on the client side, and express on the server side. I set up an account on prerender IO, and have installed the prerender-node middleware as recommended by the site. Here is what my server looks like:

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const SocketManager = require('./sockets/SocketManager')
const path = require('path');
const users = require("./routes/api/users");
const queries = require('./routes/api/queries');
const forumActions = require('./routes/api/forumActions');

// Routes
app.use("/api/users", users);
app.use("/api/queries", queries);
app.use("/api/forumActions", forumActions);

// Serve static assets if in production
if (process.env.NODE_ENV === 'production') {
  // Set static folder
  app.use(express.static('client/build'));

  app.get('/', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

app.use(require('prerender-node').set('prerenderToken', 'xxxTOKEN_CODExxx'));

const port = process.env.PORT || 80;
const server = app.listen(port, () => console.log(`Server running on port ${port} !`));

const io = require('socket.io')(server);
io.on('connection', SocketManager);

On the client side I'm using react-helmet to dynamically render the meta tags (title, description, etc.) based on the route. Ideally I would like to be able to share posts on social media and have the meta data display (which to my understanding prerender can do by prerendering pages specifically for web crawlers).

I've set up a prerender.io account and added my URL to the cached pages, but for some reason I am getting a message saying "We haven't seen a request with your Prerender token yet.". I am hosting on heroku, and have tried adding the token using the heroku CLI, which still hasn't fixed the issue.

Is there a step I'm missing, or did I not set this up correctly? Thanks!

Answer 1

It looks like you might need to move the prerender-node middleware higher up in your file so that it executes just after your routes but before the index file is served back.

Then you can change your user agent in your browser to Googlebot and visit your URL. If the middleware is set up properly, you would see a prerendered response and a request in your Prerender.io Crawl Stats.