When fixing react-routing for production, fetch cannot find api url

Question

I have a react front-end with an express back end. The express just serves the static build files from the react side in production. I was having a problem with React routing working in production, as many have had, so I fixed it as so:

server.js:

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'));
});

app.get('/api/customers', (req, res) => {
  const customers = [
    {id: 2, firstName: 'Test', lastName: 'Case'},
    {id: 3, firstName: 'Foo', lastName: 'Bar'},
  ];

  res.json(customers);
});

The '/*' solve the routing problem in production, but now the fetch for the '/api/customers' does not work anymore.

customer.js:

  componentDidMount() {
    fetch('/api/customers')
      .then(res => res.json())
      .then(customers => this.setState({customers}, () => console.log('Customers fetched...', customers)))
      .catch(() => console.log('Error'));
  }

This fetch request logs 'Error' when ran. It seems as though the url for the api is changing somehow as a result of the '/*' change in server.js, but I am not sure how I should change the fetch argument to make it work. The fetch was working using just the '/':

server.js:

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

However, this obviously stops react routing from working in production. What do I need to change my fetch argument to in order to make this work?

what has this with react-router I dont get it?

Nicholas
– Nicholas

2018-03-18 16:19:57 +00:00
Commented Mar 18, 2018 at 16:19 — Nicholas
– Nicholas, Commented Mar 18, 2018 at 16:19

David Filipidisz · Accepted Answer · 2018-03-18 16:13:53Z

1

Change the order of the routes in server.js:

app.get('/api/customers', () => {});
app.get('/*', () => {});

The routes in express are first come first served, and as "/api/customers" matches "/*", it will return your index.html if your list them the other way around.

answered Mar 18, 2018 at 16:13

David Filipidisz

1411 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darian Harrison · Accepted Answer · 2019-10-26 21:51:24Z

0

thank you so much for this solutiion @David Filipidisz !! The order DOES affect the routes. this is my working code

server.js

...ipmorts here ...

app.use('/users', require('./users/users.controller'));
app.use('/machineLearning', require('./machineLearning/machineLearning.controller'));
app.use('/public', require('./public/public.controller'));

//for Prod
app.use(express.static(path.join(__dirname,'../L10-ui/dist')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, '../L10-ui/dist', 'index.html'));
});```

answered Oct 26, 2019 at 21:51

Darian Harrison

11 bronze badge

Collectives™ on Stack Overflow

When fixing react-routing for production, fetch cannot find api url

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related