npm run build does not use proxy

Question

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...

Restore

The proxy field is only used for the webpack-dev-server in development, it's not used in production. – Tarrant

Answer 1

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

Passionate

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. – Passionate

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"="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. – Restore

And do you want to deploy the react app and the express app separately? like both running on different ports? – Passionate

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 – Restore

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') – Passionate

Oh! I was doing that previously. – Restore

I can then set the domain:port in config file and prefix it to the url. okay thanks a lot. – Restore

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') – Passionate

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. – Woden

Answer 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. :)

Restore

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 – Significancy