How to configure path alias for react scaffolding

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:
  • How to quickly set the file path alias in react

<<:  Working principle and example analysis of Linux NFS mechanism

>>:  In-depth analysis of Linux NFS mechanism through cases

Recommend

How to prevent Vue from flashing in small projects

Summary HTML: element plus v-cloak CSS: [v-cloak]...

Summary of some problems encountered when integrating echarts with vue.js

Preface I'm currently working on the data ana...

How to install mysql5.6 in docker under ubuntu

1. Install mysql5.6 docker run mysql:5.6 Wait unt...

Vue Router loads different components according to background data

Table of contents Requirements encountered in act...

Solutions to the problem of table nesting and border merging

【question】 When the outer table and the inner tab...

About Zabbix forget admin login password reset password

The problem of resetting the password for Zabbix ...

Sliding menu implemented with CSS3

Result:Implementation code: <!DOCTYPE html>...

Vue realizes adding watermark to uploaded pictures (upgraded version)

The vue project implements an upgraded version of...

jQuery achieves breathing carousel effect

This article shares the specific code of jQuery t...

React diff algorithm source code analysis

Table of contents Single Node Diff reconcileSingl...

How to add a paging navigation bar to the page through Element UI

need Add a paging bar, which can jump to the page...

Vue+openlayer5 method to get the coordinates of the current mouse slide

Preface: How to get the coordinates of the curren...