0

I have a react web app that uses express as the back end.

I have it set up so that it proxies the request urls on the react server port (9000), to the express server (3000). Problem is, when I type in the path /examplepath, it returns the json that the express app returns, rather than returning the component that renders from getting that response from the backend. I am getting the express response and looking at it rather than react getting the express response and looking at it and then rendering and showing me that render.

When I click this button, it renders the correct page because it uses this code

componentDidMount() {
    axios.post('/', qs.stringify(this.state))
    .then(res => {
      if (res.data === "session") {
        this.setState({session: true})
      }
    })
  }

It will render the page correctly using react

But if I visit the route directly it renders the json response from the express backend. Like this

When I want it to render like the correcly rendered one using react

  devServer: {
    port: 9000,
    open: true,
    proxy: {
      '/': 'http://localhost:3000'
    }
  }

THIS ^ is my webpack.config.js

GURU Pico
  • 11
  • 1
  • 3

1 Answers1

0

Try adding historyApiFallback: true to your webpack.config.js file (not sure if the proxy will mess with it -- if so, use express cors middleware on the backend instead):

devServer: {
    host: 'localhost',
    port: 9000,
    quiet: true,
    historyApiFallback: true,
  },

Also, a more common port setup is: React app on 3000 and API/server on 5000.

In addition, make sure you clearly separate your front and back end routes. Try keeping your back end routes to /api/someurl, and adding that to your proxy (and AJAX requests):

proxy: {
      '/api/*': 'http://localhost:3000/api/'
    }

Then, all front-end requests will be:

axios.get('/api/someurl').then().catch()

which will resolve to http://localhost:3000/api/someurl. This way, there's no chance of blending the front and back end routes.

Personally, I'd recommend cors over a proxy, because the proxy has been known to cause random connection issues.

Matt Carlotta
  • 18,972
  • 4
  • 39
  • 51
  • thanks for the quick response. I'll try this and let you know if it works – GURU Pico Oct 05 '18 at 04:37
  • See updated comment. If you're still having problems, then post a link to your github repo and I can run/diagnose the issue. – Matt Carlotta Oct 05 '18 at 05:10
  • https://github.com/andrew-linck/TourneyStack I did both those things you described. I have cors on my express server. Also i tried adding api to the express server routes. Nothing worked. I never added cors to the react side. Not sure if that would help. Also I put directions on how to set it up for debugging in the Read.MD. You will need a riot games account and use it to log in to get the api key. Riot account is just email and password I believe – GURU Pico Oct 05 '18 at 06:21
  • Thanks. I'll take a look at it tomorrow and see what I can do. – Matt Carlotta Oct 05 '18 at 06:48
  • Props to this guy. He really helped me out alot and asked for nothing but a thanks. He really cares about the open source community and I appreciate him. Thanks Matt – GURU Pico Oct 06 '18 at 22:57