Install and Setup React JS Development Environment On Ubuntu

Written by Anand Singh on the 30th Aug 2021

Exported on 28-Sep-2021 13:49:00

Configure React Development Server on Debian Based Systems.

This Blueprint Installs React.js development server on a Debian 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
s1 Linux / Unix Server s1
s1c Linux OS Credential s1c

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 Package Manager

Install NPM - Node Package Manager.

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 npm
sudo apt -y install npm

3 - Install Node.js

Install Node.js cli

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 
# Download setup script
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -

# Start installation 
sudo apt-get install -y nodejs

4 - 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

5 - 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