Integrating Node APIs with React
Reason behind integrating NodeJS & ReactJS
As already hinted in the above section; NodeJS is completely different in functionalities or usability to ReactJS — while one executes on the client-side, the other runs on the server-side.
Now, not all the codes & business logic runs at the client end (i.e. at the browser). There are certain requirements wherein specific validations or business logic needs to be executed at the server end. In such situations, ReactJS is integrated with NodeJS so that the request sent in by ReactJS is intercepted by NodeJS at the server end; and the required validation processes are performed.
Setting up React API to NodeJS server
The first step to setting up a React application is to install the ‘create React App’ tool which can assist in the front-end development process. This application, however, would not support server-side executions. For this, the subsequent steps would show how an ‘Express Node server’ can be dynamically linked to the React API.
Once the above code is executed; the React application is ready to be deployed. The next step would focus on integrating this with a Node server. The server dependencies can be integrated using the below code snippet.
As shown in the figure, the Node environment is established in the code. There are four key factors that need to be taken care of –
- ‘Node-env-run’ — This function helps in loading all the environment variables related to the NodeJS libraries for further reference
- ‘Nodemon’ — This function restarts the NodeJS server automatically as and when there are any changes done to the existing system
- ‘Npm-run-all’ — This function enables developers to execute multiple NodeJS scripts at the same time on the server
- Other than these functions, there are a few logger features as well which are referenced to ensure proper server logging
Once the server is properly set-up; the run command is given for the server to start.
Therefore, at this stage, the server starts running. However, in order to get the desired result; both the Node server as well as the ReactJS client script need to execute at the same time; which would be covered in the ultimate section of the article.
Running React application & Node server simultaneously
While running or starting both of them individually could be quite simple; executing both of them in synch with each other requires a couple more steps. The first step deals in the creation of a ‘proxy’; which in turn needs to be pointed to the same IP & port in which the server is running.
Once the server proxy is pointed to the specified port; the next step is to use the two functions — ‘npm-run-all’ (which would enable developers to run multiple functions on the server), and ‘run-p’ which would ensure that the processes execute in parallel to each other. The script used to execute this is mentioned below for reference –
Running the above script would ensure that both the Node server as well as React application runs at the same time.