MDB overriding proxy port in package.json

Topic: MDB overriding proxy port in package.json

technoHippy pro asked 6 years ago

Hi folks, I'm pretty new to programming so excuse me if I fail to provide enough details.

I have a full stack express app that I integrated the MDB React pro them into for the front end.

Somehow the React MDB package is setting or overriding my proxy port setting in 'client/package.json' so I cannot submit data from the front end in the database.

I have had several seasoned devs look at my code base and they cant seem to find the issue. All the routes are configured correctly and we have tested them without the react routes and they are all set correctly.

http://www.istpd.com/assets/images/code-1.jpg

http://www.istpd.com/assets/images/code-2.jpg

http://www.istpd.com/assets/images/code-3.jpg

Does anyone have any tips for finding where the default port is getting set?

Thanks

Bartłomiej Malanowski staff commented 6 years ago

Hi, Mike! I'm afraid I cannot see any of our code in your project. Could you please point me where can I find mdbreact in your repository?

Add comment

technoHippy pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi David, what I mean is that I cannot load any URL of my app except the home page. I can then navigate to the various pages of the app through the nav but If I hit refresh a blank page loads. Then I need to reload the home page and navigate to the page i want to load from there. Its pretty odd and a bit annoying. Any page on the app cannot be refreshed because it loads a blank page again. Does anyone have a working version of the MDB React app running as the front end of an express app? Ie: Express running in the backed and React as the front end? If I could see other versions working I might be able to do some reverse engineering... Thanks for the assistance so far.

http://localhost:8080/  this loads, and this loads http://localhost:8080/mypage , but if you refresh that a blank page loads

Add comment

technoHippy pro answered 6 years ago

0 0 Best answer

So after hours of rabbit holing on this I found the issue!

It's line 29 - 31 in the file "webpack.dev.config.js"

devServer: {
  historyApiFallback: true
},

needs to change to

devServer: {
  proxy: {
   "*": "http://[::1]:3001"
  }
},

https://github.com/webpack/webpack-dev-server/issues/793

Bartłomiej Malanowski staff commented 6 years ago

Did it resolve your issue?

technoHippy pro commented 6 years ago

Hey Bartłomiej Well mostly. I can now push and pull data from the database after adding the proxy to devServer{} but pages can no longer refresh, so that's a pretty big issue... Any tips?

Dawid Adach pro commented 6 years ago

Mike, what are the symptoms? What do you mean by page no longer refresh?

Add comment

technoHippy pro answered 6 years ago

0 0 Best answer

Here's a screen shot of the error. Is there a setting to tell webpack to use a proxy port? http://www.istpd.com/assets/images/code-4.png Also, the issue I'm having might be a web pack bug.... https://github.com/webpack/webpack-dev-server/issues/793 Thanks for the assistance.

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

In your package.json, please try to replace: "webpack": "webpack-dev-server -config ./webpack.dev.config.js --watch --open", with: "webpack": "webpack-dev-server --port 3001 --config ./webpack.dev.config.js --watch --open",

technoHippy pro commented 6 years ago

Thanks for the response. This breaks things as the backend is running on 3001. I want the front end to run on 8080, AND I need the 3001 proxy to work as well. Seems like webpack wont allow the proxy to work. See a screen grab of the error in the link in the post below

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

technoHippy

Pro User 17Support score
4Questions 4Answers 0Snippets