React use route from Express instead of index.html

Question

I have a React application running on port 3000, I have an express backend running on port 5000. I would like React to instead of using index.html as the base HTML for the application to instead call port 5000 and use that html (I have a route there, index.html that when I do localhost:5000/index.html responds correctly). How can I tell React to not look in the public/index.html and instead pull it from the backend?

Yes, webpack dev server is 3000 . Backend api server is 5000. I can't seem to figure out how to get the index I need over to 3000 — Joe, May 29 '19 at 20:49

score 0 · Answer 1 · answered May 29 '19 at 19:41

I think you could minimize this kind of problem by using everything in just one project.

The thing is that, you need a mount point for your React app. So, you could fetch for what it's in localhost:5000/index.html (you may need to enable CORS), and obviously you should use DOM Parser to parse the incoming response to text, and then to a manipulable DOM, after that find a mount point element for your application, and finally render everything as a string in your current html document.

So, you'd need to do something like this; and then using a querySelector to find the mount point in you application, and then use DOMParser to render.

However, you'd need to have an arquitecture in which every component you're using in your application is provided. You may need to use react-router so this is achieved.

score 0 · Answer 2 · answered May 29 '19 at 19:46

0

You can do this with a proxy and CORS.

In your React app in your package.json you can specify

"proxy": "http://localhost:5000"

You should also install the CORS library on your express server

answered May 29 '19 at 19:46

iqbal125

1,331
2
11
19

React use route from Express instead of index.html

2 Answers2