An Intro to React JS

Reading Time: 6 minutes

In our modern world of smartphones and apps, it is more important than ever to have a fast, responsive website that impresses your visitors. Created by the development team at Facebook, ReactJS is a JavaScript ‘framework’ or method of building web pages and apps that can ‘react’ to user interaction and external changes. ReactJS does this by way of components that can refresh themselves and their contents without a page reload. Better still, these components are modular. This concept means they can be coded quickly (called ‘hacking’ in the ReactJs community) and reused easily between projects.

While programming React JavaScript code is outside the scope of this tutorial, we are happy to help you and your development team hit the ground running by creating a development environment. Our focus is on getting the official ReactJS tutorial example running on a Liquid Web WHM/cPanel Virtual Private Server or VPS. Servers built on our VPS platform work well as development/testing servers and can be easily created. Feel free to spin one up to follow along with me today!

A dedicated server may provide more stability for your application over the long term once development has been completed. If your application is HIPAA related, you will need a dedicated server with HIPAA compliance. The differences between the VPS and Dedicated Server platforms can be found in our Knowledge Base article. Addtionally, ReactJS can also be installed on our Plesk, Windows, and Ubuntu platforms. Let’s get started!

 


Install NodeJS

First, we will need to install the latest version of NodeJS; This application allows our JavaScript files to import (or reference) each other, share global variables, access advanced command-line arguments, install additional modules and more.

At the time of writing, the latest version of NodeJS is 11.X Always use the most up-to-date software to ensure the stability and safety of your applications. Today we will be downloading and installing the latest version.

First, we log into our terminal and set up the NodeSource repository :

curl  -sL https://rpm.nodesource.com/setup_11.x | bash -

Next, we install NodeJS and its dependencies :

yum  install  -y nodejs  gcc-c++ make

To verify the installation and check the version, we run :

node --version

whm.node.version


Install Serve

ReactJS Apps can be served by Apache or by the lightweight “Serve” application. Serve can run alongside Apache/Nginx accomplished by running Serve on an alternate port.

To install Serve globally, we run the following command :

npm install -g serve

In this tutorial, we will be running this application on a newly created cPanel account. but it can also run on any existing account. Our cPanel username in this example is ‘react’, and our development folder meant to house our source code will be named ‘dev’. This dev folder will sit our cPanel account’s root folder (/home/react/dev). A folder can be created via File Manager or FTP, but in this example, we are doing this via the command line :

mkdir /home/react/dev/

 


Install ReactJS

Our next step is to use the application ‘create-react-app’ command to build the framework and install the necessary prerequisites. No need to worry about updating ‘create-react-app’, this application updates automatically when run.

This command requires a path to build properly. In our example we are running the following to build in our dev folder.

npx create-react-app /home/react/dev

The create-react-app process can take a few minutes, but it will keep you updated of progress like so :

install.nodejs

When completed, you’ll see an overview of some important development commands and a warm welcome into the ReactJS Community.

development.commands

The create-react-app script generated the above files for us with default content. With that, you and your developers can begin the development process.

Note
Three main components of a ReactJS application are:

  • .html files; These provide the structure to your app.
  • .css files; These contain the styling for your app content.
  • .js or Javascript Files; These provide app functionality.

Run ReactJS Default Application

While Liquid Web Support is not able to assist with code-related issues, in this tutorial, we will be going a step further by launching the default application. Finally, we’ll be reviewing and launching the ReactJS ‘tic-tac-toe game’ tutorial application.

First, let’s confirm that ReactJS is running by building the default application. We want to be in the command line and our working folder.

cd /home/react/dev/Run the following code to have React build the default package contents.

npm  run build

run.build

There are a few options here, by default if we use ‘Serve’ it will use port 5000;  This is run by calling the following :

serve -s build

serve build

Note
You may notice the error regarding ‘xsel’. That application is used to copy from command line to a Linux Desktop Environment or GUI (Gnome, KDE, Mate among others). In our case, our Linux server is not using a Desktop Environment, so we do not need nor could we use the xsel library so we’ll ignore the error.

Viewing ReactJS Default App

To have our app available to the outside world, we will need to ensure that port 5000 is open in the firewall; Though this port is not open by default we can adjust that easily;

We are looking for the section called ‘Opening and Closing Ports in the Firewall’. Once implemented, you’ll see the default ReactJS application running in the browser. We do not own the domain ‘react.com’ so we will need to adjust our /etc/hosts file locally on our workstation. More information on editing your /etc/hosts files can be found here.

If you own your domain and your site’s DNS ‘A’ Record pointing to the Liquid Web server IP this should also be visible to you. The default ReactJS screen looks like this if everything is configured and running properly.

 

react5000


Run ReactJS

It is possible to run ReactJS applications over the typical Apache or Nginx ports; Please note, running ReactJS with Serve over port 80 means Apache or Nginx would need to be disabled. If the primary focus of your server is to handle this application, Apache can be disabled server-wide. Serve is a very lightweight application and works very well. If you do not have another service running on port 80; The following command will start ‘Serve’ on port 80.

PORT=80 serve -s build

serve build 2

The above can be adjusted to a different port as well. In this way, multiple ReactJS applications can be run on the same domain. In addition to this, Apache can serve your ReactJS application as static content. To do so, we would need to copy the contents of our application’s /build folder to the desired location within the directory configured for web delivery.

In our case, we will be copying /home/react/dev/build to /home/react/public_html. This can be done on the command line with :

cp -r  /home/react/dev/build  /home/react/public_html

Depending on how you built the application package, you may need to adjust the permissions of your files. In our case, the ownership of these files was set to ‘root’. In response to this, we are changing the ownership to ‘react’.

In this example, we are going to be adjusting all files in the public_html folder to be owned by the user ‘react’ with the following command :

chown  -R react.  /home/react/dev/public_html/*

To have Apache serve the above, we are going to be adjusting the .htaccess configuration in our project.

vim /home/react/public_html/.htaccess

With our text editor, we are going to be adding the following :

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

If everything is configured correctly, you should now see the contents of your application as delivered by the Apache service when visiting your site. You now know the basics of how to get the default ReactJS environment running on a Liquid Web Linux WHM/cPanel VPS Server!


Example ReactJS Application

We are going one step further here by going over a tutorial. This tutorial goes over every aspect of getting started with ReactJS with great detail into programming some components needed to get a running tic-tac-toe game. We advise going line by line through the code as well as the documentation. With this knowledge, you can build your own application. The best source for ReactJS syntax and concepts can be found in their documentation. Feel free to take your time going through these examples and documentation; There is a lot to go through, but you can start small and build your way up. Today we are going to copy the contents of the Final Code to see how they run on our Liquid Web Server.

codepen

There are multiple ways to adjust the contents of index.html, index.css, and index.jss files. While outside of the scope of this tutorial, you can use other command line text editing tools, FTP, cPanel ‘s File Manager tool, Git  and many more to edit files. In our case, we are using the cPanel File Manager’s Text Editor. A walkthrough of this interface and how to edit files can be found here.

First, we open the File Manager, navigate to the location of our file /home/react/dev/public/index.html, then we select the index.html file ( 1 ) and click“Edit” ( 2 )

file.manager

We are going to be copy-pasting the code from CodePen into our server-side files.

Second, we do the same with /src/index.css.

html

Finally, we copy paste the contents of /src/index.js.

At the top of the index.js file, we add some needed code; This is necessary for referencing the React installation and our CSS files.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

jscss

With all three files copied over, we are going to rebuild our project. To rebuild, we will go back to our development folder and rerun our build script. With that, we can test by serving our new build with our serve script. By visiting react.com:5000 we see our tic-tac-toe game live on our Liquid Web server!

serve.script

In conclusion, we went over what ReactJS offers developers, installed ReactJS along with customization. WIth the official documentation, you now have all you need to build out your dream application. We cannot wait to see what you have in mind!

Have other thoughts or questions about this topic? Our Sales and Support teams are available 24 hours a day and can be reached via phone or e-mail to assist. Open a support ticket with us today at support@liquidweb.com, giving us a call at 1-800-580-4985 or, open a chat with us and we’ll be happy to answer any questions you may have!

 

How to Install React JS On Windows

Reading Time: 4 minutes

React.js (React) is an open-source JavaScript library useful in building user interfaces. React is a library so our main focus for this article is installing a JavaScript environment and a Package Manager so that we can download and install libraries including React.

When we are done, you will have a React environment you can use to start development on your Liquid Web server.

Continue reading “How to Install React JS On Windows”

How to Configure and Deploy CloudLinux’s Node.js Selector

Reading Time: 5 minutes

Why Node.js for CloudLinux?

In the last few years, the stability and ease of use of Node.js has lead to heavy adoption in application development.  However, deploying and configuring a Node.js application to work with cPanel presents a number of hurdles. CloudLinux’s recently released Node.js Selector is a great solution that includes a graphical interface to make deployment go more smoothly. To use this utility, you will need to have CloudLinux installed along with the LVE Manager plugin. In this configuration, your Node.js application will also benefit from the resource usage monitoring that comes with the CloudLinux LVE Manager. Continue reading “How to Configure and Deploy CloudLinux’s Node.js Selector”

How to Install NVM for Node.js on Ubuntu 16.04 LTS

Reading Time: < 1 minute

Node Version Manager, also known as NVM is used to control and manage multiple active versions of Node.js in one system. It is a command line utility and a bash script that allows programmers to shift between different versions of Node.js. They will be able to install any version using a single command and setting defaults using the command line utility.

Continue reading “How to Install NVM for Node.js on Ubuntu 16.04 LTS”

Using Passenger with cPanel on CentOS 7

Reading Time: 3 minutes

Phusion Passenger is a web application server that can run Ruby, Node.js, and Python applications on your webserver. It integrates with both Apache and Nginx to serve content to your visitors. Historically, this application was difficult to integrate with cPanel servers, which would combine the power of Ruby applications with the ease of management that cPanel provides, but recent advancements make setting up your Passenger module very simple. This easy walkthrough will show you how to add Passenger, Apache mod_passenger, and the supporting Ruby installation to cPanel. Continue reading “Using Passenger with cPanel on CentOS 7”

How To Install NVM (Node Version Manager) on Fedora 23

Reading Time: < 1 minute

Node Version Manager allows you to quickly install and manage node.js versions. It’s a bash script that has the capability to manage multiple active versions of node.js. It can be used to install node.js versions, execute commands with a specific node.js version, set the PATH variable to use a specific node.js version, and more. To learn more, visit the project’s Github page. Continue reading “How To Install NVM (Node Version Manager) on Fedora 23”

How To Install Node.js on Fedora 23

Reading Time: 2 minutes

Node.js is a cross-platform runtime environment built on JavaScript. Applications also are written in JavaScript. Node.js lends itself to rapidly deploying, real-time web applications, and is considered extremely scalable due to its event-driven architecture. Node Version Manager allows admins to easily install and manage multiple node.js versions. Continue reading “How To Install Node.js on Fedora 23”

How to Install Node.js via NVM on Fedora 21

Reading Time: 2 minutes

Node.js is a cross-platform runtime environment, configurable on Linux, OS X, and Microsoft Windows, and built on JavaScript. Applications, both server-side and networking, are also written in JavaScript. Node.js lends itself nicely to quick deploying, real-time web applications, and is generally thought of as extremely scalable due to its event-driven architecture.

The Node Version Manager allows admins to easily manage node.js versions. It’s a bash script that has the capability to manage multiple active versions of node.js, with functionality such as: installation, executing commands with specific node.js versions, setting the PATH variable to use a specific node.js versions, etc.

Pre-Flight Check
  • These instructions are intended specifically for installing Node.js via NVM (Node Version Manager) on a single Fedora 21 node.
  • I’ll be working from a Liquid Web Self Managed Fedora 21 server, and I’ll be logged in as root.
  • If NVM is not already installed, then visit our tutorial on: How to Install NVM (Node Version Manager) for Node.js on Fedora 21

Continue reading “How to Install Node.js via NVM on Fedora 21”

How to Install Node.js via NVM on Fedora 20

Reading Time: 2 minutes

Node.js is a cross-platform runtime environment, configurable on Linux, OS X, and Microsoft Windows, and built on JavaScript. Applications, both server-side and networking, are also written in JavaScript. Node.js lends itself nicely to quick deploying, real-time web applications, and is generally thought of as extremely scalable due to its event-driven architecture.

The Node Version Manager allows admins to easily manage node.js versions. It’s a bash script that has the capability to manage multiple active versions of node.js, with functionality such as: installation, executing commands with specific node.js versions, setting the PATH variable to use a specific node.js versions, etc.

Pre-Flight Check
  • These instructions are intended specifically for installing Node.js via NVM (Node Version Manager) on a single Fedora 20 node.
  • I’ll be working from a Liquid Web Self Managed Fedora 20 server, and I’ll be logged in as root.
  • If NVM is not already installed, then visit our tutorial on: How to Install NVM (Node Version Manager) for Node.js on Fedora 20

Continue reading “How to Install Node.js via NVM on Fedora 20”

How to Install Node.js via NVM on CentOS 7

Reading Time: 2 minutes

Node.js is a cross-platform runtime environment, configurable on Linux, OS X, and Microsoft Windows, and built on JavaScript. Applications, both server-side and networking, are also written in JavaScript. Node.js lends itself nicely to quick deploying, real-time web applications, and is generally thought of as extremely scalable due to its event-driven architecture.

The Node Version Manager allows admins to easily manage node.js versions. It’s a bash script that has the capability to manage multiple active versions of node.js, with functionality such as installation, executing commands with specific node.js versions, setting the PATH variable to use a specific node.js versions, etc.

Pre-Flight Check
  • These instructions are intended specifically for installing Node.js via NVM (Node Version Manager) on a single CentOS 7 node.
  • I’ll be working from a Liquid Web Core Managed CentOS 7 server, and I’ll be logged in as root.
  • If NVM is not already installed, then visit our tutorial on: How to Install NVM (Node Version Manager) for Node.js on CentOS 7

Continue reading “How to Install Node.js via NVM on CentOS 7”