How to configure path alias for react scaffolding

The react version when writing this article is 16.13.1

1 Enter the command npm run eject to generate a config directory in the project root directory

2 Open the webpack.config.js file under confilg and find the following location

alias: {
   // Support React Native Web
   // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
   'react-native': 'react-native-web',
   // Allows for better profiling with ReactDevTools
   ...(isEnvProductionProfile && {
     'react-dom$': 'react-dom/profiling',
     'scheduler/tracing': 'scheduler/tracing-profiling',
   }),
   ...(modules.webpackAliases || {}),
},

3 Modify as follows, then restart the project

alias: {
   // Support React Native Web
   // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
   'react-native': 'react-native-web',
   // Allows for better profiling with ReactDevTools
   ...(isEnvProductionProfile && {
     'react-dom$': 'react-dom/profiling',
     'scheduler/tracing': 'scheduler/tracing-profiling',
   }),
   ...(modules.webpackAliases || {}),
   // File path alias '@': path.resolve(__dirname, '../src'),
   '@view': path.resolve(__dirname, '../src/view'),
},

Configure the proxy:

Simple version configuration:

Add directly in package.json: "proxy": "http://localhost:4000"

Full version configuration:
(1). Download: yarn add http-proxy-middleware
(2) Create setupProxy.js in the src directory with the following content:

  const proxy = require('http-proxy-middleware')
  module.exports = function(app) {
   app.use(
    proxy.createProxyMiddleware('/api', { //Requests with api need to be forwarded target: 'http://localhost:4000', // This is the server address changeOrigin: true, //The value is a Boolean value. When it is true, a virtual server will be created locally to receive your request and send the request on your behalf.
     pathRewrite: {'^/api': ''}
    })
   )
  }

3. Note: After the react scaffolding is configured with a proxy, the front-end resources will be requested first when requesting resources. If there are no resources, the back-end resources will be requested.

This is the end of this article about how to configure path aliases for react scaffolding. For more information about how to configure path aliases for react scaffolding, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: