CODEWITHSUNDEEP
reactjsexpressfetchnext.js
FreddieMixell
FreddieMixell

Reputation: 310

Fetching 301 Redirect Data In server.js (Express/NextJS)

I'm working on a project using express and next js and I've found a great example of how to setup an array of data for your redirects in your server.js file. However, if it is possible I would like to build a plugin within WordPress that will allow a user to submit data for redirects so that it could be managed by someone without technical knowledge. My question is, is it possible to fetch data within my server.js file to replace the data in this example?

const express = require('express')
const next = require('next')
const { join } = require('path')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

//This is the data I want to fetch through the WP Rest API
const redirects = [
  { from: '/old-link-1', to: '/new-link-1' },
  { from: '/old-link-2', to: 'https://externalsite.com/new-link-2' },
]

app.prepare().then(() => {
  const server = express()

  redirects.forEach(({ from, to, type = 301, method = 'get' }) => {
    server[method](from, (req, res) => {
      res.redirect(type, to)
    })
  })

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, err => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

Upvotes: 1

Views: 2043

Answers (2)

FreddieMixell
FreddieMixell

Reputation: 310

So, just incase anyone else stumbles upon the problem of programmatically adding redirects that originate on a WordPress install this is how it can be done. My tech stack is React, Next.js with an Express server pulling in data from a WordPress install that is living elsewhere in the webs.

WordPress:

1) Create a blank WordPress plugin (Google is your friend)

2) Create an activation hook within your plugin to create a database(Again, Google with 'to_url' and 'from_url' for each entry.

3) Register a Rest Route within plugin (Like described above with Tanner's answer)

  • This Rest Route should be pulling your info from the database and returning it as an array in this format:

    [ { 'from': '/about', 'to': '/about-us' }, { 'from': '/test3', 'to': '/banks/testing-page' }, ]

4) Create a plugin admin page with a form that allows the users to add entries to this database. As your database grows your response from the rest api will grow and your redirects will seamlessly be included in your project.

5) In your React server.js you're going to need the following setup

const request = require("request");
let redirects;
request('https://yourwebsite.com/wp-json/YOUR-ROUTE/v2/redirects', function (error, response, body) {
   if (!error && response.statusCode == 200) {
      redirects = JSON.parse(body);
   }
 })
redirects.forEach(({ from, to, type = 301, method = 'get' }) => {
          server[method](from, (req, res) => {
            res.redirect(type, to)
          })
        });

Caveats: Make sure when you're manipulating data with forms in php you're taking proper precautions to sanitize and escape everything.

Upvotes: 0

Tanner Eustice
Tanner Eustice

Reputation: 204

Yes, I believe it's possible do do something like that.

This library would allow you to make an API request within express: https://github.com/request/request

Executed like so: 

 var request = require('request');
 request('http://www.google.com', function (error, response, body) {
   if (!error && response.statusCode == 200) {
     console.log(body) // Print the google web page.
   }
 })

The next step would be to create an endpoint in wordpress with all of the 301's that you want to create:

function my_custom_endpoint(){
  return 'Hey look, its some data';
}

// Register the rest route here.
add_action( 'rest_api_init', function () {
register_rest_route( 'yournamespace/v1', 'my_custom_endpoint',array(
    'methods'  => 'GET',
    'callback' => 'my_custom_endpoint'
  ));
});

Good luck, and happy coding!

Upvotes: 1

Related Questions