When creating applications or web pages, various JavaScript libraries offer different functions. For instance, React or React native is a front-end framework that is best utilized to create a user interface or single-page apps. Whereas, node JS is mainly focused on the back end development of apps. If you want to combine the two libraries to create an application, the aspect working in your favor is that these are both in JavaScript language.
Before we go any deeper in this article, the first question is; why do you need to integrate node JS with React anyway? Well, I will just say this; tech enterprises such as Netflix have integrated Node JS into their systems and seen tremendous growth and improved performance. So if multinational companies are doing it, there must be a lot to gain by integrating Node JS with React. Not only can you create apps and web pages doing this but also significantly improve the functions your product has to offer. In turn, you will improve the user experience.
React is the front end (client) and node JS being the backend server, you can combine the two and create a robust high-speed app. When your entire code is in the same language, in this case, the language being JavaScript, then uploading files and images to your app becomes easier.
How to integrate Node JS with React:
After you create the backend of the app using Node JS and establish the front end user interface with React app, you can integrate the two systems using CORS.
What CORS essentially does is allows a browser to connect and transfer information to the server. Hence your front end and back end can communicate. A great feature of CORS, that we take advantage of here, is that it is easily stored on different domains.
These are the steps involved in integrating Node JS with React:
- Build your main project directory.
- Establish the back end of an app using Node JS (using the command:Â express-generator)
- Edit the back end to integrate Node JS with React.
- Create the front end using React (create-React-app).
- Final steps to Integrate Node JS with React using directories ( CORS and express-file-upload)
Below you will find a detailed step by step process along with the required code. But before that, let us define some terms that are used in this article:
NPM
When you use Node JS, you will need npm. This is where different node packages are stored and managed for node users. Npm stands for Node Package Manager. Users can share packages they code via npm. Hence the popularity of Node JS is heavily due to the ease created by this package manager.
Now let us begin integrating Node JS with React. Follow the below-mentioned steps:
APIÂ
API stands for Application Programming Interface. You can understand it as a medium for two apps to communicate with each other. Any time you connect two different platforms (in this case a front end JavaScript library to a back end), a line of communication needs to be established so that information can be fetched and displayed wherever necessary.
Powerful Web Solutions by ClickySoft
Main project directory:
Make sure Node JS is up and running. Access your terminal and define the directory code to determine where you want your app to be stored. This is where you will keep your final files after integrating Node JS with React.
After you complete steps 2-4, this is where you will find the express app named API (back end) and the React app names CLIENT (front end). Having both your systems within the same directory makes it easier to navigate the process of integrating Node JS with React.
At this point, you will install the dependencies that are necessary to integrate Node JS with React. CORS and express-file-upload both support the two frameworks and give you a cross-origin resource sharing option. These dependencies allow you to upload files into the app using these two front end and back end frameworks.
After adding dependencies, you are ready to alter the code in the app.js file in the API trajectory. This is to incorporate all the packages together.  Import the CORS package and express file into the code. You will then change the app.js code to tell the API to use CORS. After integrating the two new dependencies app.js code should look something like this:
Great! You are almost done setting up the back end for integrating Node JS with React. Just to be sure that you did not miss any steps, run your server to see if everything is starting smoothly. Use npm start to check the working of Node JS.
Your screen should display the words “welcome to express” now. It means you have successfully installed and prepared the back end of your app, and you are ready to move on with the process of integrating Node JS with React.
Edit back end code (Node JS):
Our next step will be to create the front end UI (user interface), but before that, you need to edit the backend port (from 3000 to 4000). So that when both the systems run on port 3000 later on, the process can continue without a hitch. The changes you will make here will be in the bin/www file. Use the code in the image below to guide yourself through these alterations:
Â
Create the front end app using React:
To set us the front end of the app, use the command line create-command-app. Give the name CLIENT to your React app. This process is quite similar to the one you use when creating a React app without the intention of integrating Node JS with React. However, you need to make a few changes in certain steps. For instance, you will need a library to allow API calls between the front end and the back end. Here you can use the code yarn–add–Axios.
We have already covered in the previous article that React functions in the form of components. All the code is stored there and you can make changes by accessing the virtual DOM. Now you will alter the app component of src/App.js as follows:
Once again, you will check to see if the React app you created is working properly. Go to localhost:3000/ via your browser. You should see the React welcome page at this point. This means your front end is established and you are all set to integrate Node JS with React.
Integrate Node JS with React app:
For you to make a connection between the API express app and the CLIENT React app, you first have to establish a route in the express app. To do this, access the directory you created in step 1 of this guide. Open the express API folder and create a testAPI.js file in api/routes. Then insert the new route (see line 25 in the code below). Your new code in api/apps.js will be as following:
Â
This creates a new route after which API begins to work properly in your browser.
Now open the app.js file in the CLIENT directory. Since your express app is established (CORS successfully installed in step 2) and working properly you can now fetch API. In simpler terms, this means you can now change certain parts of the HTTP pathway. This will ease the integration of Node JS with React. Use this code before beginning the render process.
The final code will look like this:
In the code above, you have inserted a command (call API ()) that will automatically access the API express app after components are attached. Line 29 of the above code enables your app to take information from API and display text on the user interface screen.
In the final step of integrating Node JS with React, run both the apps using npm start command. Open your browser and visit localhost:3000/. Here you will see the screen display two lines for you.
- One says Welcome to React
- The other saying API is working properly.
This means the integration process is complete and you now have an app with Node JS as the backend and React as the front end user interface!
You can use this link of GitHub to get the entire code.
Final words:
After integrating Node JS with React, you can create fully functioning web pages and apps. CORS is installed in the back end Node JS along with the other directory called express-file-upload. Then you code port 3000 so that both the frameworks can run without crashing into each other.
Using Node JS and React together is useful; it saves time because both are in JavaScript. You can improve your project and all it has to offer by integrating Node JS with React. Both language libraries offer unique sets of benefits and features. So why not combine the two and make the most out of them both?
