React scaffold dynamic configuration implementation method and system

Abstract

The invention provides a method for realizing dynamic configuration of a reaction scaffold. The method comprises the following steps of: constructing a dynamic network configuration file in the reaction scaffold; mounting the network configuration file on a network; introducing a pre-constructed dynamic configuration tool into the react project, monitoring a modification operation of a user on the network configuration file through the dynamic configuration tool, and reading configuration information in the modified network configuration file; and triggering the front-end server to update the network configuration according to the configuration information read by the dynamic configuration tool through a preset triggering event, and starting the updated network configuration. According to the dynamic configuration implementation method for the reaction scaffold, the external dynamic configuration tool is adopted to modify the network configuration of the front-end server, the reaction project does not need to be restarted, and the restarting time is saved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method for implementing a react scaffolding dynamic proxy. Background Art

[0002] React is a front-end development framework that provides scaffolding tools that can help users quickly generate the engineering structure of the project. In the business scenario of the front-end server and the back-end joint debugging interface, in order to solve the cross-domain problem of the local machine calling the back-end server interface, the industry usually adds a proxy configuration to the scaffolding to achieve cross-domain access to the back-end server. At present, the common proxy configuration methods are mainly the following:

[0003] 1. If Figure 1 As shown, the default configuration src / setupProxy.js proxy is used. However, when a front-end is debugged with multiple back-ends, it is necessary to switch the server domain name to connect and modify the proxy configuration. According to the mechanism of react scaffolding, every time the proxy configuration is modified, the server needs to be restarted for the proxy configuration to take effect. A large number of restarts will take a lot of time.

[0004] 2. If Figure 2 As shown in the figure, install nginx server locally as a transit proxy server. In this way, nginx is used as another transit layer, and the node server only needs to access the local nginx server. Because the nginx server does not need to compile the front-end files when restarting, the restart will be much faster, but it still needs to be restarted. In addition, using the nginx server will have a side effect: hot updates will fail, and the configuration language of nginx may require additional learning costs for front-end personnel.

[0005] 3. Use webpack.devServer.config.js for dynamic proxy. However, this solution needs to be run in the react scaffold or the user needs to rebuild a scaffold by himself. However, this method is too invasive to the default configuration of the react scaffold, so once the official react scaffold is upgraded, this method cannot be used.

[0006] 4. Patent CN115242874A provides a network request proxy optimization method in the application development stage. The method uses a traffic interception plug-in (such as switchyOmega, etc.) to intercept traffic and then forward it to the server. This requires developers to install a plug-in. Most of these plug-ins require a VPN, and these traffic interception plug-ins are weak and can only forward resources. Other configuration functions cannot be realized, such as automatic cookie login, and dynamic server configuration is not truly achieved.

[0007] In summary, the existing front-end server dynamic configuration method mainly has the following problems:

[0008] 1. Restart required: Modify the proxy configuration and restart is required.

[0009] 2. Code is too coupled: Modifying the code in the server results in the code having to be rewritten every time the scaffolding is upgraded.

[0010] 3. High learning cost: the configuration is too complicated.

[0011] 4. Weak functions: It can only forward resources, and there is no real dynamic configuration of the front-end server. Summary of the invention

[0012] Purpose of the invention: The present invention aims to propose a method and system for implementing dynamic configuration of a react scaffold, so as to at least partially overcome the technical defects of the above-mentioned prior art.

[0013] Invention content: To achieve the above-mentioned purpose, the first aspect of the present invention provides a method for implementing dynamic configuration of a react scaffold, the method comprising the steps of:

[0014] Build dynamic network configuration files in react scaffolding;

[0015] Mounting the network configuration file on the network;

[0016] Introduce a pre-built dynamic configuration tool into the react project, monitor the user's modification operation on the network configuration file through the dynamic configuration tool, and read the configuration information in the modified network configuration file;

[0017] The front-end server is triggered by a preset trigger event to update the network configuration according to the configuration information read by the dynamic configuration tool, and to enable the updated network configuration.

[0018] As an optional implementation manner of the method of the first aspect, mounting the network configuration file on the network specifically includes:

[0019] The network configuration file is projected into a local resource library so that a user can access and modify the network configuration file based on the URL of the network configuration file.

[0020] As an optional implementation manner of the method of the first aspect, monitoring, by the dynamic configuration tool, a user's modification operation on the network configuration file, and reading configuration information in the modified network configuration file, specifically includes:

[0021] Monitoring, by means of the dynamic configuration tool, a user's access event to the website of the network configuration file;

[0022] In response to the access event, the configuration information in the network configuration file is re-read by the dynamic configuration tool.

[0023] As an optional implementation manner of the method described in the first aspect, the trigger event is a refresh request initiated by a user to the front-end server through a browser.

[0024] In a second aspect, a react scaffolding dynamic configuration implementation system is provided, the system comprising:

[0025] The network configuration module is used to build a dynamic network configuration file in the react scaffolding and mount the network configuration file on the network;

[0026] A dynamic configuration tool, used to monitor the user's modification operation on the network configuration file and read the configuration information in the modified network configuration file;

[0027] The front-end server is used to respond to a preset trigger event, update the network configuration according to the configuration information read by the dynamic configuration tool, and enable the updated network configuration.

[0028] As an optional implementation manner of the system of the second aspect, the network configuration module is specifically used to project the network configuration file into a local resource library so that the user can access and modify the network configuration file based on the URL of the network configuration file.

[0029] As an optional implementation of the system of the second aspect, the dynamic configuration tool includes a monitoring component and an updating component;

[0030] The monitoring component is used to monitor the user's access event to the website of the network configuration file;

[0031] The update component is used to re-read the configuration information in the network configuration file in response to the access event.

[0032] As an optional implementation manner of the system described in the second aspect, the trigger event is a refresh request initiated by the user to the front-end server through a browser.

[0033] In a third aspect, a computer-readable storage medium is provided, wherein the storage medium stores a computer program, and when the computer program is executed by a processor, the above-mentioned react scaffolding dynamic configuration implementation method is implemented.

[0034] In a fourth aspect, an electronic device is provided, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned react scaffolding dynamic configuration implementation method when executing the program.

[0035] Beneficial effects: Compared with the prior art, the present invention has the following advantages:

[0036] 1. No need to restart: The method for implementing dynamic configuration of the react scaffolding described in the present invention adopts an external dynamic configuration tool to modify the network configuration of the front-end server, without restarting the react project, thus saving restart time.

[0037] 2. Weak invasiveness: The network configuration file is separated from the code of the react project. By using the dynamic configuration tool to read the configuration information of the network configuration file, when the scaffolding is upgraded, only the dynamic configuration tool needs to be changed without modifying the overall code of the react project.

[0038] 3. Powerful functions: various configurations supported by the front-end server can be configured. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 The figure is a schematic diagram of a react scaffolding proxy implementation method proposed in the prior art.

[0040] Figure 2 The figure is a schematic diagram of another implementation method of react scaffolding proxy proposed in the prior art.

[0041] Figure 3 The present invention is a flowchart of a method for implementing dynamic configuration of a react scaffolding according to an embodiment.

[0042] Figure 4 The present invention is a structural diagram of a system for implementing dynamic configuration of a react scaffold according to an embodiment of the present invention.

[0043] Figure 5 The figure is a schematic diagram of the structure of an electronic device involved in the embodiment. DETAILED DESCRIPTION

[0044] The present invention will be further described below in conjunction with the accompanying drawings and specific embodiments. However, it should be understood that the present invention can be implemented in various forms, and some exemplary and non-limiting embodiments shown in the accompanying drawings and described below are not intended to limit the present invention to the specific embodiments described.

[0045] It should be understood that, where technically feasible, the technical features listed above for different embodiments can be combined with each other to form other embodiments within the scope of the present invention. In addition, the specific examples and embodiments described in the present invention are non-limiting, and the structures, steps, and sequences described above can be modified accordingly without departing from the scope of protection of the present invention.

[0046] Please refer to Figure 3 , Figure 3 The flowchart of a method for implementing a dynamic configuration of a react scaffold provided in an embodiment of this specification is shown as an example. Figure 3 As shown, the method includes steps S300 to S306.

[0047] S300: Build dynamic network configuration files in react scaffolding.

[0048] First, you need to create the required front-end server configuration function in the react scaffolding, then extract the front-end server configuration function code and build it into an independent, dynamic network configuration file, such as setupProxy.config.jsonc.

[0049] S302: Mount the network configuration file onto the network.

[0050] Specifically, the network configuration file setupProxy.config.jsonc can be projected into the local resource library, and the URL of the network configuration file setupProxy.config.jsonc can be written as: http: / / localhost:3000 / setupProxy.config.jsonc. Users can access and modify the specific configuration information of the network configuration file by accessing the URL through the front-end server.

[0051] S304: Introduce a pre-built dynamic configuration tool into the react project, monitor the user's modification operation on the network configuration file through the dynamic configuration tool, and read the configuration information in the modified network configuration file.

[0052] The above dynamic configuration tool (such as updateConfig.js) is a component independent of the react project code, which is mainly used to write the configuration information of the network configuration file into the react project code of the front-end server. When using it, you need to first implant the dynamic configuration tool updateConfig.js into the corresponding position of the react project.

[0053] After the dynamic configuration tool is implanted in the react project, it starts to monitor the user's access event to the URL of the network configuration file. When the access event is monitored, the dynamic configuration tool is triggered to re-read the configuration information in the network configuration file.

[0054] In some implementations, when the front-end developer needs to switch the backend server, he needs to enter the URL of the network configuration file (for example: http: / / localhost:3000 / setupProxy.config.jsonc) in the address bar of the front-end server browser to access the network configuration file and modify the backend server address in the configuration information. Based on this, the dynamic configuration tool can be configured to determine whether the user has modified the network configuration file by monitoring the input address in the browser address bar. In other words, when the dynamic configuration tool monitors the user entering the URL of the network configuration file in the browser address bar, it can be determined that the user has modified the network configuration file, and trigger the dynamic configuration tool to re-read the configuration information of the network configuration file.

[0055] S306: Triggering the front-end server to update the network configuration according to the configuration information read by the dynamic configuration tool through a preset trigger event, and enable the updated network configuration.

[0056] After the dynamic configuration tool re-reads the configuration information in the network configuration file, it is also necessary to trigger the front-end server to update the network configuration. Specifically, a trigger event can be set, such as an event in which a user refreshes the browser on the front-end server. This trigger event can be used to trigger the front-end server to update the network configuration to the configuration information read by the dynamic configuration tool and enable the updated network configuration.

[0057] Depend on Figure 3 As can be seen from the method shown, this method separates the network configuration function and uses an external dynamic configuration tool to modify the network configuration of the front-end server. The whole process does not require restarting the react project. The network configuration file is separated from the code of the react project. By using the dynamic configuration tool to read the configuration information of the network configuration file, when the scaffolding is upgraded, it is only necessary to adaptively modify the dynamic configuration tool without modifying the overall code of the react project. Based on the above settings, the react scaffolding dynamic configuration implementation method proposed in this embodiment can configure various configurations supported by the front-end server.

[0058] Corresponding to the above-mentioned react scaffolding dynamic configuration implementation method, this specification embodiment also provides a react scaffolding dynamic configuration implementation system. Please refer to Figure 4 , Figure 4 The following is a schematic diagram of the structure of a react scaffolding dynamic configuration implementation system. Figure 4As shown, the system includes:

[0059] The network configuration module is used to build dynamic network configuration files in the react scaffolding and mount the network configuration files on the network.

[0060] The dynamic configuration tool is used to monitor the user's modification operations on the network configuration file and read the configuration information in the modified network configuration file.

[0061] The front-end server is used to respond to a preset trigger event, update the network configuration according to the configuration information read by the dynamic configuration tool, and enable the updated network configuration.

[0062] Optionally, the network configuration module is specifically used to project the network configuration file into the local resource library, so that the user can access and modify the network configuration file based on the URL of the network configuration file.

[0063] Optionally, the dynamic configuration tool may specifically include a monitoring component and an updating component, wherein the monitoring component is used to monitor user access events to the URL of the network configuration file; the updating component is used to re-read the configuration information in the network configuration file in response to the access event.

[0064] Optionally, the trigger event mentioned above may be designed to be a refresh request initiated by a user to the front-end server via a browser.

[0065] Corresponding to the above-mentioned react scaffolding dynamic configuration implementation method, this embodiment also provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the above-mentioned react scaffolding dynamic configuration implementation method is implemented.

[0066] In a typical configuration, a computer includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0067] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0068] Computer-readable media include permanent and non-permanent, removable and non-removable media that can be used to store information by any method or technology. Information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, disk storage, quantum memory, graphene-based storage media or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include temporary computer-readable media (transitory media), such as modulated data signals and carrier waves.

[0069] Corresponding to the above-mentioned risk reporting event processing device, this embodiment also provides an electronic device. Figure 5 , Figure 5 It is a hardware structure diagram of an electronic device in which a react scaffolding dynamic configuration implementation system is located, shown as an exemplary embodiment.

[0070] At the hardware level, the system may include a processor 501, a memory 502, a network interface 503, an input / output interface 504, and may also include hardware required for other services. One or more embodiments of this specification may be implemented based on software, such as the processor 501 reading the corresponding computer program from the memory 502 into the memory and then running it. Of course, in addition to the software implementation, one or more embodiments of this specification do not exclude other implementations, such as logic devices or a combination of software and hardware, etc., that is, the execution subject of the following processing flow is not limited to each logic unit, but may also be hardware or logic devices.

[0071] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0072] The above is a description of a specific embodiment of the specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0073] It should be noted that the above examples are only specific embodiments of the present invention, and the present invention is obviously not limited to the above examples, and there are many similar variations. All variations directly derived or associated from the contents disclosed by the technicians in this field should fall within the protection scope of the present invention.

Claims

1. A method for implementing dynamic configuration of a react scaffold, characterized in that: Includes steps: Build dynamic network configuration files in react scaffolding; Mounting the network configuration file on the network; Introduce a pre-built dynamic configuration tool into the react project, monitor the user's modification operation on the network configuration file through the dynamic configuration tool, and read the configuration information in the modified network configuration file; The front-end server is triggered by a preset trigger event to update the network configuration according to the configuration information read by the dynamic configuration tool, and to enable the updated network configuration.

2. The method according to claim 1, characterized in that Mounting the network configuration file to the network includes: The network configuration file is projected into a local resource library so that a user can access and modify the network configuration file based on the URL of the network configuration file.

3. The method according to claim 1, characterized in that Monitoring the user's modification operation on the network configuration file through the dynamic configuration tool and reading the configuration information in the modified network configuration file specifically includes: Monitoring, by means of the dynamic configuration tool, a user's access event to the website of the network configuration file; In response to the access event, the configuration information in the network configuration file is re-read by the dynamic configuration tool.

4. The method according to claim 1, characterized in that: The trigger event is a refresh request initiated by a user to the front-end server through a browser.

5. A react scaffolding dynamic configuration implementation system, characterized in that: include: The network configuration module is used to build a dynamic network configuration file in the react scaffolding and mount the network configuration file on the network; A dynamic configuration tool, used to monitor the user's modification operation on the network configuration file and read the configuration information in the modified network configuration file; The front-end server is used to respond to a preset trigger event, update the network configuration according to the configuration information read by the dynamic configuration tool, and enable the updated network configuration.

6. The system according to claim 5, characterized in that The network configuration module is specifically used to project the network configuration file into a local resource library, so that a user can access and modify the network configuration file based on the URL of the network configuration file.

7. The system according to claim 5, characterized in that The dynamic configuration tool includes a monitoring component and an updating component; The monitoring component is used to monitor the user's access event to the website of the network configuration file; The update component is used to re-read the configuration information in the network configuration file in response to the access event.

8. The system according to claim 5, characterized in that The trigger event is a refresh request initiated by a user to the front-end server through a browser.

9. A computer-readable storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method according to any one of claims 1 to 4 when executing the program.

Images