CODEWITHSUNDEEP
reactjsapi
MrDoda
MrDoda

Reputation: 123

How to properly setup localhost for react + api development

I am developing app with react-redux. And I am using the quick development, which always build my client at localhost:3000

I have my api written in php, and its on localhost:80.

So its cross-origin, but on production its not. So I would like to develop it while being on the same domain+port. But I have no clue how to set it up.

I am using MAMP - Apache for the php and yarn (create-react-app) for react.

So it can't run at the same port.

Anyone any ideas how to solve this problem?

When I use "yarn start" I can edit my react code and its compiled upon save and I can see the edited code within seconds at the localhost:3000

Is it possible to "deploy" it in this "developer" mode into some folder, where I could possibly setup a server using actually MAMP ( apache ) ?

Thanks in advance

Upvotes: 2

Views: 2428

Answers (1)

Mohit Tilwani
Mohit Tilwani

Reputation: 2756

In case if for client side of your application you have use create-react-app, you can add a proxy configuration in package.json file.

"proxy": {
    "/apiRoute": {
      "target": "http://localhost:80"
    },
  },

So all your request will be redirected to port 80(PHP) from client side.

The /apiRoute is the name of the routes (GET, POST, PUT..) you had defined in PHP. So i would suggest to make a pattern in PHP for all routes like /api/**, so in package.json instead of adding all routes, you can something like below

"proxy": {
  "/api/*": {
     "target": "http://localhost:80"
   },
 },

Upvotes: 1

Related Questions