How To Install ReactJS on AlmaLinux 10

React.js has become one of the most popular JavaScript libraries for building dynamic user interfaces and single-page applications. When combined with AlmaLinux 10, an enterprise-grade Linux distribution known for its stability and security, developers get a robust foundation for modern web development. This comprehensive guide will walk you through every step needed to successfully install and configure ReactJS on AlmaLinux 10, from initial system preparation to production deployment.

What is ReactJS and Why Use It?

React.js is a powerful JavaScript library developed by Facebook that revolutionizes how developers build user interfaces. Its component-based architecture allows for creating reusable UI components, while the virtual DOM ensures efficient rendering and optimal performance.

Key Benefits of React.js

The library offers several compelling advantages for modern web development. Virtual DOM technology enables React to efficiently update only the components that have changed, resulting in significantly improved application performance. The component-based architecture promotes code reusability and maintainable development practices. React’s extensive ecosystem provides access to countless libraries, tools, and community resources that accelerate development workflows.

Why Choose AlmaLinux 10 for React Development

AlmaLinux 10 stands out as an exceptional choice for React development environments. This enterprise-grade Linux distribution provides long-term stability with 10 years of support, ensuring your development environment remains secure and reliable. The distribution’s compatibility with modern development tools and its robust security features make it ideal for both development and production deployments.

Prerequisites and System Requirements

Before beginning the installation process, ensure your system meets the necessary requirements for a smooth setup experience.

Hardware Requirements

Your AlmaLinux 10 system should have adequate resources to support React development. Minimum 4GB RAM is required, though 8GB or more is recommended for optimal performance. Ensure at least 10GB of free storage space for Node.js, React dependencies, and project files. Any modern processor architecture compatible with AlmaLinux 10 will sufficiently support React development.

Software Prerequisites

Several essential components must be in place before proceeding. You’ll need root or sudo privileges to install system packages and configure services. An active internet connection is crucial for downloading Node.js, npm packages, and React dependencies. Basic familiarity with Linux command line operations will help you navigate the installation process efficiently. Terminal access, whether local or via SSH for remote servers, completes the prerequisite list.

Step 1: System Preparation and Updates

Proper system preparation forms the foundation for a successful React installation. Begin by ensuring your AlmaLinux 10 system has the latest security patches and package updates.

Update AlmaLinux 10 System

Start by refreshing the package repository information and installing available updates. Execute the following command to update your system comprehensively:

sudo dnf update -y && sudo dnf upgrade -y

This command combines repository updates with package upgrades, ensuring your system has the latest security patches and bug fixes. The process may take several minutes depending on the number of available updates.

Install Essential Development Tools

React development requires several essential tools and dependencies. Install the necessary packages using the following command:

sudo dnf install tar curl wget git dnf-plugins-core gcc-c++ make -y

These packages provide crucial functionality including compression utilities, download tools, version control, and compilation tools necessary for building native modules during npm installations.

System Reboot Considerations

While not always necessary, a system reboot ensures all kernel updates are properly applied. If the update process included kernel updates or critical system components, reboot using:

sudo reboot

After rebooting, verify your system is functioning correctly before proceeding to the next installation phase.

Step 2: Installing Node.js and npm

Node.js serves as the runtime environment for React applications, while npm (Node Package Manager) handles dependency management. AlmaLinux 10 offers multiple installation methods to suit different requirements.

Method 1: Installing via DNF Package Manager

The simplest approach utilizes AlmaLinux 10’s default repositories. Install Node.js and npm with a single command:

sudo dnf install nodejs -y

This method automatically includes npm with the Node.js installation. However, repository versions may not always reflect the latest available releases.

Method 2: Installing via NodeSource Repository

For access to the latest Node.js versions, add the official NodeSource repository. This method provides more current releases and better compatibility with modern React applications.

First, add the NodeSource repository for the latest LTS version:

curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -

Then install Node.js and npm:

sudo dnf install nodejs -y

This approach ensures you receive the most recent stable version with the latest features and security updates.

Method 3: Installing via NVM (Node Version Manager)

NVM provides the ultimate flexibility for managing multiple Node.js versions simultaneously. Install NVM using the official installation script:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

Reload your bash profile to activate NVM:

source ~/.bashrc

List available Node.js versions:

nvm ls-remote

Install the latest LTS version:

nvm install --lts
nvm use --lts

This method excels when working on multiple projects requiring different Node.js versions.

Verification and Version Checking

Regardless of your chosen installation method, verify successful installation by checking versions. Confirm Node.js installation:

node -v

Expected output should display the installed version (e.g., v18.17.0 or v20.5.0). Verify npm installation:

npm -v

Both commands should return version numbers, confirming successful installation.

Step 3: Installing Create React App Tool

Create React App streamlines the React development setup process by providing a preconfigured development environment with essential tools and dependencies.

Global Installation of Create React App

Install Create React App globally to access it from any directory:

npm install -g create-react-app

Global installation enables you to create React projects from any location on your system. The installation process downloads the latest version along with its dependencies.

Alternative: Using npx for Project Creation

Modern development practices often favor npx over global installations. This approach ensures you always use the latest version:

npx create-react-app my-react-app

This method downloads and runs Create React App without permanent global installation, reducing system clutter while maintaining access to the latest features.

Verification of Installation

Confirm successful installation by checking the Create React App version:

create-react-app --version

The command should return the installed version number, typically 5.0.1 or higher.

Step 4: Creating Your First React Application

With Node.js, npm, and Create React App properly installed, you can now create your first React project.

Choosing Project Location

Select an appropriate directory for your React project. For development purposes, your home directory works well:

cd ~

For shared development environments, consider using /var/www/ or another standardized location.

Creating a New React Project

Generate a new React application using Create React App. Replace my-react-app with your preferred project name:

npx create-react-app my-react-app

The creation process downloads and installs all necessary dependencies, including React, React DOM, and development tools. This process typically takes 2-5 minutes depending on your internet connection speed.

Understanding the Project Structure

Navigate to your newly created project directory:

cd my-react-app

Explore the generated project structure:

ls -la

Key directories and files include:

• src/: Contains React component files and application logic
• public/: Holds static assets and the main HTML file
• package.json: Defines project dependencies and scripts
• node_modules/: Contains installed npm packages

Step 5: Running and Testing Your React Application

Testing your React application ensures everything is properly configured and functioning correctly.

Starting the Development Server

Launch the React development server from your project directory:

npm start

The development server typically starts on port 3000 and automatically opens your default browser. If the browser doesn’t open automatically, manually navigate to http://localhost:3000.

Accessing the Application Remotely

For remote server access, bind the development server to all network interfaces:

npm start -- --host 0.0.0.0

Access the application using your server’s IP address: http://your-server-ip:3000. Ensure appropriate firewall rules are configured for external access.

Development Server Features

React’s development server provides several powerful features. Hot reloading automatically refreshes the browser when you save file changes, enabling rapid development cycles. Error reporting displays detailed error messages and stack traces directly in the browser. Console logging provides real-time feedback about your application’s behavior and performance.

Basic Application Testing

Test the setup by modifying the default React component. Open src/App.js in your preferred text editor:

nano src/App.js

Make a simple change, such as modifying the welcome text. Save the file and observe the automatic browser refresh, confirming hot reloading functionality.

Step 6: Configuring Firewall for Development

Proper firewall configuration ensures your React development server is accessible while maintaining security.

Opening Development Port

Allow access to the React development server port:

sudo firewall-cmd --permanent --add-port=3000/tcp

Reload the firewall configuration to apply changes:

sudo firewall-cmd --reload

Verify the port is open:

sudo firewall-cmd --list-ports

This configuration enables external access to your development server for testing and collaboration.

Security Considerations for Development

While opening ports for development, consider implementing IP-based restrictions for enhanced security. Use --source parameter to limit access to specific IP ranges:

sudo firewall-cmd --permanent --add-rich-rule="rule family='ipv4' source address='192.168.1.0/24' port protocol='tcp' port='3000' accept"

This approach restricts access to your local network while maintaining development flexibility.

Step 7: Building for Production

Production builds optimize React applications for deployment by minimizing file sizes and improving performance.

Creating Production Build

Generate an optimized production build from your project directory:

npm run build

The build process creates a build/ directory containing optimized static files. These files include minified JavaScript, CSS, and HTML ready for deployment.

Understanding Build Optimizations

Production builds implement several performance optimizations. Code minification reduces file sizes by removing whitespace and shortening variable names. Asset optimization compresses images and other static resources. Bundle splitting separates vendor libraries from application code for improved caching strategies.

Testing Production Build Locally

Test the production build locally using the serve package:

npm install -g serve
serve -s build

The serve utility hosts your production build on port 5000, allowing you to verify optimization results before deployment.

Step 8: Deploying with Nginx Web Server

Nginx provides a robust solution for serving React applications in production environments.

Installing and Configuring Nginx

Install Nginx on AlmaLinux 10:

sudo dnf install nginx -y

Start and enable the Nginx service:

sudo systemctl start nginx
sudo systemctl enable nginx

These commands ensure Nginx starts automatically after system reboots.

Creating Nginx Configuration for React

Create a dedicated configuration file for your React application:

sudo nano /etc/nginx/conf.d/react-app.conf

Add the following configuration, replacing paths with your actual project location:

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/my-react-app/build;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /static/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

This configuration enables proper single-page application routing and optimizes static asset caching.

Serving React Application

Copy your production build to the web server directory:

sudo cp -r build/* /var/www/html/

Set appropriate permissions:

sudo chown -R nginx:nginx /var/www/html/
sudo chmod -R 755 /var/www/html/

Restart Nginx to apply configuration changes:

sudo systemctl restart nginx

Production Firewall Configuration

Configure firewall rules for production access:

sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload

These commands enable HTTP and HTTPS access for production deployment.

Step 9: Managing Multiple Node.js Versions with NVM

NVM (Node Version Manager) enables seamless switching between different Node.js versions for various projects.

Installing Multiple Node.js Versions

List all available Node.js versions:

nvm ls-remote

Install specific versions as needed:

nvm install 18.17.0
nvm install 20.5.0

This flexibility accommodates projects with different Node.js requirements.

Switching Between Versions

Activate a specific Node.js version:

nvm use 18.17.0

Set a default version for new terminal sessions:

nvm alias default 18.17.0

Create project-specific version files (.nvmrc) for automatic version switching when entering project directories.

Troubleshooting Common Issues

React installation on AlmaLinux 10 may encounter several common issues with established solutions.

Node.js Installation Problems

If repository access fails, verify internet connectivity and DNS resolution. Permission errors during global npm installations often resolve by configuring npm’s default directory:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

This configuration eliminates the need for sudo during global package installations.

React Application Issues

Port conflicts typically occur when another service uses port 3000. Specify an alternative port:

npm start -- --port 3001

Build failures often result from insufficient system resources or corrupted node_modules. Clear npm cache and reinstall dependencies:

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

Network and Firewall Issues

Connection refused errors frequently indicate firewall restrictions. Verify firewall rules and port accessibility:

sudo firewall-cmd --list-all
netstat -tlnp | grep :3000

SELinux may also block network connections. Temporarily disable SELinux for testing:

sudo setenforce 0

Remember to re-enable SELinux after resolving issues.

Best Practices and Security Considerations

Implementing security best practices ensures your React development environment remains secure and maintainable.

Development Environment Security

Avoid running development servers as root user. Create dedicated user accounts for development activities. Regularly audit npm packages for security vulnerabilities:

npm audit
npm audit fix

Keep dependencies updated to address security issues promptly.

Performance Optimization

Monitor system resource usage during development. React applications can consume significant memory during compilation. Consider increasing swap space for systems with limited RAM:

sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

Configure persistent swap by adding the swapfile to /etc/fstab.

Advanced Configuration and Next Steps

Expanding your React development environment with additional tools enhances productivity and capabilities.

Additional React Tools and Libraries

React Router enables client-side routing for single-page applications:

npm install react-router-dom

State management libraries like Redux or Zustand help manage complex application state. UI frameworks such as Material-UI or Ant Design accelerate interface development:

npm install @mui/material @emotion/react @emotion/styled

Development Workflow Enhancement

Configure your development environment with essential tools. Visual Studio Code provides excellent React support with extensions like ES7+ React/Redux/React-Native snippets and Prettier for code formatting.

Initialize Git version control for your projects:

git init
git add .
git commit -m "Initial commit"

Consider implementing continuous integration pipelines using GitHub Actions or GitLab CI for automated testing and deployment.

Congratulations! You have successfully installed React. Thanks for using this tutorial for installing ReactJS JavaScript library on AlmaLinux OS 10 system. For additional help or useful information, we recommend you check the official ReactJS website.