4

I have a working react.js application, which works using npm start (app built using create-react-app). When I try to run npm run build, it builds the application. I serve it using 

serve -s build -l 3000

It loads the first dashboard page but does not communicate with the server. I have put console.log statements in server to check for any requests coming in, but it never logs anything... which means the client does not talk to the server. I have proxy statement in package.json to connect to server on port 3300. This works in development mode but in production mode it seems to not pickup the proxy settings in the package.json.

Please guide... this is my first time switching to production mode... any guidance on switching to production mode would help.

BTW I use react-loadable as well...

Avinash
  • 416
  • 1
  • 9
  • 22
  • The `proxy` field is only used for the webpack-dev-server in development, it's not used in production. – Tholle Mar 11 '19 at 16:26

2 Answers2

3

The proxy field in package.json is only used in development by webpack-dev-server. You can learn more about this here

Prithwee Das
  • 4,628
  • 2
  • 16
  • 28
  • That'll depend on how you're deploying your app, what you are trying to do, hard to give you an answers without knowing those. – Prithwee Das Mar 11 '19 at 18:44
  • well, I have a simple application. One for server-side using node.js + express.js + MongoDB, which servers APIs on localhost:3300. Other is a react application built using create-react-app listening on localhost:3000. I use "proxy"="http://localhost:3300" on the react application's package.json. The application works fine with "npm run dev" for server and "npm start" for client. Now I want to install it on my client's machine in production mode. I used "npm run build" and copied all the files across except /src folder. Do you need any more information? please do ask... it is important for me. – Avinash Mar 13 '19 at 11:08
  • And do you want to deploy the react app and the express app separately? like both running on different ports? – Prithwee Das Mar 13 '19 at 11:23
  • Yes, I aim for having it separate. right now, the solution I have found is serving the client statically through the server. but solution to server remotely would be best. thank you – Avinash Mar 13 '19 at 12:39
  • Then just send the request to localhost:3300 instead of sending it to the same port, I'm guessing you are sending requests like this `fetch(/api/endpoint)`, instead do `fetch('https://localhost:3300/api/endpoint')` – Prithwee Das Mar 13 '19 at 12:41
  • Oh! I was doing that previously. – Avinash Mar 13 '19 at 12:44
  • I can then set the domain:port in config file and prefix it to the url. okay thanks a lot. – Avinash Mar 13 '19 at 12:45
  • If you are using axios you can set the default baseUrl to `https://localhost:3300`, and then do `axios.get('/api')` instead of `axios.get('https://localhost:3300/api')` – Prithwee Das Mar 13 '19 at 12:47
  • 1
    But... no one actually says what the heck to use for production! "Only use this for testing" -- then all other documentation falls off a cliff. – dylanh724 Mar 26 '21 at 05:11
2

Thanks for all the help guys....

Finally, I understood that "npm run build" just creates the static files to deploy. But how to use it, is our hands. :)

I copied the build folder inside the /server folder and added the following line in my root server.js file itself. Basically, served the static files from /server/build folder and it all works beautifully. 

app.use('/', express.static(__dirname+'/server/build'))

Thanks for the support. :)

Avinash
  • 416
  • 1
  • 9
  • 22
  • 1
    I am going through a similar problem but I havent used Express. Its a simple React Js app which I had to deploy and my backend apis is on a different server. What can I do to make it work? Can I use the line you used to fix this or create configuration setupProxy.js ? Can you please guide with the steps? Thank you – Ahmed Jun 21 '19 at 19:05