Configuring a Linux (RHEL/Rocky) VM with React-Bootstrap Packages

This is a guide for creating a VM with react-bootstrap.

 Instructions

1. Make sure the VM is updated before moving forward. Run

   yum -y update

2. When the update is complete, run

   reboot

3. Install all the needed packages for the machine:

   yum -y install nc nmap whois net-tools rsync bind-utils strace tcpdump perl bash-completion curl wget tar lsof

4. Secure your vm by running the next few commands

5. Make sure to add port 3000 to your firewall before running your site

   Reload the firewall once successful

6. Add a new user called www before installing the nodejs and react packages

7. Make sure your new user you created above has a password. Run these commands as root to create the password

   Edit the PermitRootLogin to say no. Save and exit the file. Run:

   To restart the connection after making those edits.

8. Make a directory for your webroot

9. Change ownership for www using the following

10. Login to the VM as the user you created above and continue the steps.

11. Change into var/www/webroot before installing packages.

12. Follow the instructions on https://nodejs.org/en/download/package-manager to install Node.js and react for Linux using NVM:
    Install NVM (Node version manager)

    Download and install node.js

    Verify the right node version (should print `v20.12.1`)

    Verify the right NPM version (should print `10.5.0`)

13. Make sure you are in the webroot directory and run the next command to create your react app. Change my-react-app to the name of your app.

14. Change directories into your react app and run

    To install the bootstrap package from https://react-bootstrap.github.io/docs/getting-started/introduction as well as installing react router for multi-page apps. Also installs the stylesheet language scss.

15. Once everything is complete, run the next command to check that your app is ready.

    This will start the development mode for the app, which allows you to open your app on your browser. Search for the IP:3000 in your browser to find your app. The page should look like this:
    
    

    Open

    

Now you are ready to start editing.

 Related articles