Integrating Node APIs with React

React (also known as ReactJS) is pretty much similar in functionality & features to AngularJS; which is used to design front-end applications. The JavaScript library and the bunch of predefined APIs and functionalities enable developers to design interactive user interface designs. The key difference between ReactJS and AngularJS is that while AngularJS is predominantly used for designing & implementing web applications; ReactJS can be preferred for single-page applications or even mobile applications as well it has dedicated libraries suiting the specific purpose.

As opposed to ReactJS, NodeJS focuses on server-side functionality and is used to code JavaScript libraries that executes outside of the internet browser.

1. 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 the 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 which need to be taken care of –

1. ‘Node-env-run’ – This function helps in loading all the environment variables related to the NodeJS libraries for further reference
2. ‘Nodemon’ – This function restarts the NodeJS server automatically as and when there are any changes done to the existing system
3. ‘Npm-run-all’ – This function enables developers to execute multiple NodeJS scripts at the same time on the server
4. 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.