3

Hi Im running my frontend (create-react-app) and backend server (express.js) on different ports but on the same host. For example: frontend is on 127.0.0.1:3000 and backend on 127.0.0.1:3003.

in my package.json:

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

Everything worked fine till I didn't migrate my app to remote server.

My app started to refresh unexpectedly when I'm trying to send http request (axios) to server (probably due to bad proxy settings).

So I have frontend app running on 35.125.320:10:3000 and server is running on 35.125.320:10:3003. My http requests was unexpectedly cancelled. (I checked the network ). So I changed my proxy settings to 

{...
  "proxy": "35.125.320:10:3003",
...}

but anyway my app is still refreshing when Im trying to make http req. on server. I think the problem is that I can't reach my express backend server. So proxy is forwarding my requests badly.

UPDATE

scenario:(Im doing two post requests)

1) first request still passed (app is not refreshed)

2) same request passed (but sometimes app is refreshed)

3) second is still cancelled by browser.

QUESTION

How can my frontend communicate with backend server via proxy when they are running on different ports but on the same server and domain ??

Thanks for the answer.

dbc
  • 104,963
  • 20
  • 228
  • 340
Morten
  • 133
  • 4
  • 15
  • are you using relative urls when constructing the request? – Yoav Mar 28 '18 at 18:04
  • yes, because I think it's handle by proxy – Morten Mar 28 '18 at 18:05
  • Can you access the backend server by making a direct request to 35.125.320:10:3003? – dostu Mar 28 '18 at 18:06
  • Also, I'm wondering what was the reason to migrate your app to a remote server? – dostu Mar 28 '18 at 18:07
  • @dostu Yes, I can. I needed to make it public :). – Morten Mar 28 '18 at 18:16
  • 1
    Then, why are you using two separate servers? You can use Express to serve your files you are going to build. CRA uses its server for development purposes. What do you mean by "public"? Don't you mean production? – devserkan Mar 28 '18 at 18:35
  • I guess your proxy settings aren't correct, you are defining every request to proxy to, instead define specific urls like in the example: `"proxy": { "/api/*": { "target": "http://localhost:3003" } },` – Farhan Tahir Mar 28 '18 at 19:00
  • @Farhan Tahir I dont think so Im not using api in my url request – Morten Mar 28 '18 at 19:20
  • 1
    @devserkan .. I run npm build and then serve this build as static file in express.js. This works but I was wondering if this solution Im trying to use is correct or there is an standard way to do it. I have never to do deploy frontend app on node server. So Im looking for an appropriate way :). – Morten Mar 28 '18 at 19:26
  • 1
    I'm a learner too and using the same way you described. I'm not sure it is the standard or best way but as we don't need the development server for production, using Express to serve our frontend statically seems quite logical to me. – devserkan Mar 28 '18 at 19:59

2 Answers2

1

Solution:

The problem was that I used proxy in production that is only suitable for development.

I added this line in my express.js server :

app.use(express.static(`${process.cwd()}/build`));
app.use(express.static(`${process.cwd()}/public`));

I make a build and serve js,css files from my build folder. And also I needed serve static files (images, folders, etc...) from my public folder.

This problem can also cause cancelling http request by browser on production. Means, requests weren't able to reach server.

Morten
  • 133
  • 4
  • 15
0

To make your app publicly available, you will want to make a production build. You mentioned in a comment that you "run npm build and then serve this build as static file in express.js". This is a great way to make your react app publicly available. As it says in the create-react-app documentation:

npm start or yarn start

Runs the app in development mode.

When running yarn start or npm start, you are also given a notification that says "Note that the development build is not optimized." The best option will be to run yarn build or npm build and find a way to serve those static files as you are doing.

Danny Harding
  • 1,666
  • 19
  • 25