NodeJS<\/a> is an open-source, cross-platform Javascript runtime environment required for the ReactJS application. To install NodeJS execute the following commands:<\/p>\n\n\n\ncurl -sL https:\/\/deb.nodesource.com\/setup_18.x -o nodesource_setup.sh\n\nsudo bash nodesource_setup.sh\n\nsudo apt-get install -y nodejs\n\n<\/pre>\n\n\n\nAfter installation, check the installed Node version:<\/p>\n\n\n\n
node -v<\/pre>\n\n\n\nYou should get the following output:<\/p>\n\n\n\n
root@host:~# node -v\nv18.16.1\n<\/pre>\n\n\n\nAutomatically with this installation, the system will install an NPM. NPM is a package manager for Javascript programming. To check the installed NPM version, execute the following command:<\/p>\n\n\n\n
npm -v<\/pre>\n\n\n\nYou should get the following output:<\/p>\n\n\n\n
root@host:~# npm -v\n9.5.1\n<\/pre>\n\n\n\nTo update NPM to the latest version available, execute the following command:<\/p>\n\n\n\n
npm install npm@latest -g<\/pre>\n\n\n\nNow, the latest NPM version should be:<\/p>\n\n\n\n
root@host:~# npm -v\n9.7.2<\/pre>\n\n\n\n<\/span>Step 3. Install ReactJS and Create an Application<\/span><\/h2>\n\n\n\nWe need to install the ReactJS package necessary for creating ReactJS projects. To do this, execute the following command:<\/p>\n\n\n\n
npm install -g create-react-app<\/pre>\n\n\n\nAfter installation, check the installed version:<\/p>\n\n\n\n
create-react-app --version<\/pre>\n\n\n\nYou should get the following output:<\/p>\n\n\n\n
root@host:~# create-react-app --version\n5.0.1\n<\/pre>\n\n\n\nTo create the ReactJS application, run the following command:<\/p>\n\n\n\n
create-react-app rosehosting-project<\/pre>\n\n\n\nOnce created, you should receive output similar to this:<\/p>\n\n\n\n
root@host:~# create-react-app rosehosting-project\n\nCreating a new React app in \/root\/rosehosting-project.\n\nInstalling packages. This might take a couple of minutes.\nInstalling react, react-dom, and react-scripts with cra-template...\n .\n .\n .\nSuccess! Created rosehosting-project at \/root\/rosehosting-project\nInside that directory, you can run several commands:\n\n npm start\n Starts the development server.\n\n npm run build\n Bundles the app into static files for production.\n\n npm test\n Starts the test runner.\n\n npm run eject\n Removes this tool and copies build dependencies, configuration files\n and scripts into the app directory. If you do this, you can\u2019t go back!\n\nWe suggest that you begin by typing:\n\n cd rosehosting-project\n npm start\n\nHappy hacking!\n<\/pre>\n\n\n\n<\/span>Step 4. Create ReactJS Service File<\/span><\/h2>\n\n\n\nTo create a systemd service file, execute the following command:<\/p>\n\n\n\n
touch \/lib\/systemd\/system\/reactjs.service<\/pre>\n\n\n\nOpen the file and paste the following lines of code:<\/p>\n\n\n\n
[Service]\nType=simple\nUser=root\nRestart=on-failure\nWorkingDirectory=\/root\/rosehosting-project\nExecStart=npm start -- --port=3000\n<\/pre>\n\n\n\nSave the file, close it and reload the daemon:<\/p>\n\n\n\n
systemctl daemon-reload<\/pre>\n\n\n\nStart and enable the ReactJS service:<\/p>\n\n\n\n
sudo systemctl start reactjs && sudo systemctl enable reactjs<\/pre>\n\n\n\nCheck the status of the service:<\/p>\n\n\n\n
sudo systemctl status reactjs<\/pre>\n\n\n\nYou should get the following output:<\/p>\n\n\n\n
root@host:~# sudo systemctl status reactjs\n\u25cf reactjs.service\n Loaded: loaded (\/lib\/systemd\/system\/reactjs.service; static)\n Active: active (running) since Fri 2023-06-30 16:36:40 CDT; 1min 40s ago\n Main PID: 45760 (npm start --por)\n Tasks: 30 (limit: 4557)\n Memory: 369.2M\n CPU: 42.580s\n CGroup: \/system.slice\/reactjs.service\n \u251c\u250045760 \"npm start --port=3000\" \"\" \"\" \"\" \"\" \"\" \"\" \"\" \"\" \"\" \"\" \"\" \"\" \"\" \"\" \"\" \"\" \"\"\n \u251c\u250045799 sh -c \"react-scripts start --port=3000\"\n \u251c\u250045800 node \/root\/rosehosting-project\/node_modules\/.bin\/react-scripts start --port=3000\n \u2514\u250045807 \/usr\/bin\/node \/root\/rosehosting-project\/node_modules\/react-scripts\/scripts\/start.js --port=3000\n<\/pre>\n\n\n\n