CODEWITHSUNDEEP
javascriptgoogle-cloud-firestoreseonuxt.jsrendertron
Daryl Wong
Daryl Wong

Reputation: 2443

Rendertron for NuxtJS and Firestore site for SEO purposes

I would like to use Rendertron for my NuxtJS site.

My nuxtjs firestore site is here at https://ampedcast.com and the rendertron site is here: https://render-tron.appspot.com/

According to this example given by google: https://codelabs.developers.google.com/codelabs/dynamic-rendering#4

I need to add these few lines below to server.js in my nuxtjs site https://ampedcast.com but I could not figure out how to do that. In nuxtjs, you are not supposed to make changes to server.js.

const rendertron = require('rendertron-middleware');

const BOTS = rendertron.botUserAgents.concat('googlebot');
const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');

app.use(rendertron.makeMiddleware({
  proxyUrl: 'https://ampedcast-7c1d6.uc.r.appspot.com/render',
  userAgentPattern: BOT_UA_PATTERN
}));

Any help or pointers would be greatly appreciated.

Upvotes: 2

Views: 300

Answers (1)

Andrew
Andrew

Reputation: 855

I have not used NuxtJS myself but from the documentation it says:

Nuxt.js let you define the server connection variables for your application inside nuxt.config.js.

I am assuming you can configure your server settings there. You might also need a Custom API endpoint and add this part to it:

app.use(rendertron.makeMiddleware({
  proxyUrl: 'https://ampedcast-7c1d6.uc.r.appspot.com/render',
  userAgentPattern: BOT_UA_PATTERN
}));

Then add the middleware to the nuxt.config.js:

serverMiddleware: [
  { path: "/api", handler: "~/api/rest.js" },
],

I have used other frameworks that do something similar. I would be interested to see if this works for you or if anyone else has a better answer to this.

Upvotes: 1

Related Questions