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 in 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.

 

Install Node.js

The first step is to download the Node.js installer for Windows. Let’s use the latest Long Term Support (LTS) version for Windows and choose the 64-bit version, using the Windows Installer icon.

nodejs1

Once downloaded, we run the Node.js installer (.msi fuke) and follow the steps to complete the installation.

nodejs installationNow that we have Node.js installed, we can move on to the next step.

 

The Command Prompt Environment

We’ll need to use the command prompt (command line) to interact with Node.js and the Node Package Manager (NPM) to install React. Let’s take a few minutes to cover the commands we’ll need to use to get around. Here are the basic commands we will need to get around and create folders/directories:

nodejs_commands

 

Open a Command Prompt in Windows

Click the Start Menu (1), start typing the word command (2), then choose either Command Prompt or the Node.js command prompt (3) — either choice will work.

nodejs_commandprompt

A command prompt window will open with the path showing as C:\Users\<username> where the <username> on your system will be the user you are logged in as.

nodejs_commandprompt2

To execute a command, we type the command and any required options, then press Enter to execute it and see the results. Let’s walk through each of the commands listed above to see what happens:

dir

nodejs_commandprompt3

Let’s look at the contents of the downloads folder with this command:

dir downloads

nodejs_commandprompt4

The path shows we are still in the directory C:\Users\ReactUser>, however, we are looking at the contents of C:\Users\ReactUser\downloads and we see that it has one file. Let’s move to the downloads directory with this command:

cd downloads

nodejs_commandprompt5

We’ve changed to the downloads folder as the command prompt shows C:\Users\ReactUser\Downloads>. You can use the dir command to see the contents of this directory/folder. Next, let’s go back to the previous directory with this command:

cd..

nodejs_commandprompt6

Now we are back to where we started. Let’s create a new directory for our first project and name it reactproject1. We’ll use the command:

mkdir reactproject1

nodejs_commandprompt7

Again, we use the dir command to list the files within our current folder.

dir

nodejs_commandprompt8

If you want to learn more about commands, please check out these links:

 

Install React on Windows

There are two ways to install React for your projects. Let’s look at each approach so that you can decide which one you prefer to use.

 Option 1 

  • Create a project folder
  • Change to the project folder
  • Create a package.json file
  • Install React and other modules you choose

This install option allows you to full control over everything that is installed and defined as dependencies.

Step 1: To get started, we need to open a command prompt.

Step 2: Create a project folder named reactproject1:

mkdir reactproject1

Press Enter to execute the command, and we get a new directory called reactproject1. If you did this as part of the Command Prompt examples, you could skip this step as it will tell you that it already exists.

Step 3: Move to the project folder, using cd reactproject1, so we can install React into it.

cd reactproject1

At this point, you will see your prompt indicate C:\Users\ReactUser\reactproject1.

Step 4: Create a package.json file, the following command will walk you through creating a package.json file.

npm init

nodejs_commandprompt9

Step 5: Install React and other modules using npm install — save react, thiswill install React into your project and update the package.json file with dependencies.

npm install --save react

We can install additional packages using npm install — save and the name of the package we want to install. Here we are installing react-dom: npm install — save react-dom

npm install --save react-dom

 

 Option 2 

  • Install Create-React-App package to simplify the process of creating and installing React into your projects

 

 

Step 1: To get started, we need to open a command prompt and type npm install -g create-react-app. This installs the Create-React-App module which makes it very easy to create and deploy React into projects with a single command.

Note
When using create-react-app ensure you are in the desired directory/folder location as this command will create the project folder in the current path.

npm install -g create-react-appCreate-React-App is installed in the following location: C:\Users\<username>\AppData\Roaming\npm\node_modules\create-react-app\

Once Create-React-App is installed, we can use it to create a project folder and install React and dependencies automatically.

To make sure you are in the desired directory when creating a new project, you can use dir to see where you are, and cd <directory_name> or cd.. to get to the desired location.

Step 2: To create a new project and deploy React into it, we run create-react-app <project_name>. Let’s do this to create reactproject2.

create-react-app reactproject2

The entire process is automated and begins with creating a new React app folder for the project, then installs packages and dependencies. The default packages include react, react-dom, and react-scripts. The installation will take a few minutes.

nodejs_commandprompt10

Run a React Project Application

To run our new project, we need to use the command prompt to change to the project folder, then start it. The cd reactproject2 command will take us to the reactproject2 folder.

cd reactproject2

And npm start will run the project application.

nodejs_commandprompt11

The default browser will open and load the project:

localhostTo learn more about React, you may find these links helpful:

You now have your environment set for building out projects!  If you are running our lightning fast servers, our support team is at your disposal for any questions you may have.

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 (Node Version Manager) 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 (Node Version Manager) 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 (Node Version Manager) 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 (Node Version Manager) on Fedora 21”

How to Install Node.js via NVM (Node Version Manager) 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 (Node Version Manager) on Fedora 20”

How to Install Node.js via NVM (Node Version Manager) 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 (Node Version Manager) on CentOS 7”