xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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

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

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


posted @   xgqfrms  阅读(16)  评论(1编辑  收藏  举报
编辑推荐:
· 聊一聊 C#前台线程 如何阻塞程序退出
· 几种数据库优化技巧
· 聊一聊坑人的 C# MySql.Data SDK
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
阅读排行:
· 字节豆包,来园广告
· 我用cursor, 半就开发了一个手机壁纸小程序,真的太强了
· 聊一聊 C#前台线程 如何阻塞程序退出
· 订单超时自动取消,我们是这样做的。。。
· C#字符串拼接的几种方式及其性能分析对比
历史上的今天:
2022-09-20 河南省人才交流中心 All In One
2021-09-20 Flutter 2.5 All In One
2020-09-20 Swift 5.3
2020-09-20 OTA development
2019-09-20 React & Dva & Actions & dispatch & effects
2018-09-20 Linux Bash & rm -rf & Node.js & rimraf All In One
2018-09-20 Spring Boot & JsonParser All In One
点击右上角即可分享
微信分享提示