Install and Setup React Development Environment on CentOS/Fedora/Red Hat

Written by Anand Singh on the 30th Aug 2021

Exported on 28-Sep-2021 13:55:01

Configure React Development Server on RHEL Based Systems.

This Blueprint Installs React.js development server on a RHEL Based Systems.

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. React was created by Facebook and is maintained by a open-source community.
Instead of mixing a bunch of unrelated JavaScript and HTML, React encourages building simple components with small bits of related state and properties that work well together. It lets you look at a single component and understand the design.

Pre-Blueprint Attune setup
  1. On the Inputs tab, create a Linux node for the host you wish to install the stack on.
  2. On the Inputs tab, create Linux credentials to connect to the host you wish to install the stack on.
Blueprint Steps
  1. Install NodeJS and NPM
  2. Create a demo react project
  3. Launch React.js development environment in background

Parameters

Name Type Script Reference Default Value Comment
Linux Node Linux / Unix Server linuxNode
Linux User Linux OS Credential linuxUser
Linux Node Linux / Unix Server linuxNode
Linux User Linux OS Credential linuxUser

1 - Update Yum Repositories

Update yum packages.

The connection details have changed from the last step.

Login as user on node

Connect via SSH 
ssh user@hostname
This is a Bash Script make sure you run it with bash -l from a terminal session 
# Install APT update
sudo yum -y update

2 - Install Node & NPM

This installs NodeJS server into the target machine.

Login as user on node

Connect via SSH 
ssh user@hostname
This is a Bash Script make sure you run it with bash -l from a terminal session 
# Download setup script
sudo curl -fsSL https://rpm.nodesource.com/setup_12.x -o nodesource.sh

# Configure install script
sudo bash nodesource.sh

# Start installation 
sudo yum install -y nodejs

3 - Create React App

Creates a demo React application.

The connection details have changed from the last step.

Login as user on node

Connect via SSH 
ssh user@hostname
This is a Bash Script make sure you run it with bash -l from a terminal session 
# Scaffold a react project
npx create-react-app myfirstreactapp

4 - Start React Development Server

Starts the react development server in background.

To access the running server process, use the command: screen -x

Login as user on node

Connect via SSH 
ssh user@hostname
This is a Bash Script make sure you run it with bash -l from a terminal session 
# Change working directory
cd myfirstreactapp

# Install screen package
sudo yum -y install screen

# Configure screen to run in background
sudo echo "zombie xy" >> ~/.screenrc

# Start development server
screen -d -m npm start