Using the proxy setting for React to get data from a Featherjs backend

Question

I've probably misunderstood this entirely, but I'm trying to get a Featherjs backend service, running locally (localhost:3030/forms) to be accessed from a create-react-app client (localhost:3000).

I've set the package.json file on the client to include :

{
  ...
  "proxy": "http://localhost:3030",
  ...
}

... and App.js now looks like this:

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  state = { forms: [] };

  componentDidMount() {
    fetch("/forms")
      .then(res => res.json())
      .then(forms => this.setState({ forms }));
  }

  render() {
    return (
      <div className="App">
        <h1>Forms</h1>
        {this.state.forms.data.map(myForm => (
          <div key={myForm._id}>{myForm.package_id}</div>
        ))}
      </div>
    );
  }
}

export default App;

When I hit the localhost:3030/forms url in the browser, I get back the JSON I'm expecting:

{
  total: 1,
  limit: 10,
  skip: 0,
  data: [
    {
      columns: "8",
      datarows: [
        {
          age: 49,
          childcount: 1,
          firstname: "Darius",
          gender: "m",
          group: 1,
          insideLegMeasurement: 144,
          lastname: "Holder"
        }
      ],
      package_id: "1234",
      rows: "2",
      _id: "k6M3zRoDfZ0EKWBw"
    }
  ]
}

I don't seem to be getting CORS errors, but the proxy request doesn't seem to be being passed through. Instead, I get a "TypeError: Cannot read property 'map' of undefined" error... :-(

Exactly, on a scale from 1 to 11, how stupid am I being? or alternatively, what should I be doing to get it to work?

Answer 1

The URL in the proxy field will be used when /api is present in your request path. So /forms will not work, but e.g. /api/forms would be proxied to http://localhost:3030/api/forms.

If you are using [email protected] or above you can add a src/setupProxy.js file and customise the proxy to your liking with http-proxy-middleware.

This is how you would make it so your /forms request is sent to http://localhost:3030:

// src/setupProxy.js
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/forms', { target: 'http://localhost:3030/' }));
};