npm package.json proxy All In One

npm package.json proxy All In One

Node.js

{
  "name": "react-application",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.1",
    "react-scripts": "5.0.1"
  },
  "proxy": "https://api.xgqfrms.xyz",// Proxy ✅
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

react-scripts

http-proxy-middleware

$ npm i http-proxy-middleware
$ # or
$ yarn add http-proxy-middleware

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

env & .env

$ process.env.NODE_ENV

BACKEND=api.xgqfrms.xyz

console.log(`api =`, process.env.BACKEND)

https://create-react-app.dev/docs/adding-custom-environment-variables/

demos

{
  "name": "my-application",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.9",
    "@mui/material": "^5.14.9",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.3.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.8.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "proxy": "https://emptychat-backend.onrender.com",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

https://github.com/zxmod51/React-Application/blob/main/package.json#L21C3-L21C9
https://github.com/zxmod51/NodeExpress-Webserver/blob/main/app.js#L48

refs

https://stackoverflow.com/questions/77138470/fetch-response-with-404-page-not-found-when-deploying-on-netifly/77138828#77138828

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---