In this tutorial, we are going to explain in step-by-step detail how to install ReactJS on Debian 11 OS. React is an open-source Javascript library used in web development. You can use the User Interface (UI) library to build interactive elements based on UI components. React has broad community support, and it was voted the 2nd most popular web framework in 2022.
It was created by Facebook (now Meta) in 2011 for their own use, and it was initially released to the public in 2013. Installing React.js is fairly straightforward and quick, and it shouldn’t take more than 10 minutes, so let’s get started.
Table of Contents
Prerequisites
- A server with Ubuntu 22.04 as OS and a Minimum of 4GB of RAM
- Valid hostname and domain pointed to the servers IP address
- User privileges: root or non-root user with sudo privileges
Step 1. Update the System
First, we will update and upgrade the system packages to the latest version available.
# apt update # apt upgrade
Step 2. Install the required packages
If you don’t have the following packages pre-installed on your Debian 11 host, you can install them using the following command.
# apt install build-essential sudo git
Step 3. Install ReactJS
Next, we will download the script in the node.sh file, and we will give the execute permissions for this file.
# curl -fsSL https://deb.nodesource.com/setup_19.x > node.sh # chmod +x node.sh
Now we can run the script using the command:
# bash node.sh
Once this is completed, you can go ahead and install nodejs:
# apt-get install -y nodejs
To test if the node was installed successfully, you can run the node version command:
# node -v v19.7.0
You can also check if npm was installed and what is the npm package versions with:
# npm -v 9.5.0
Now you can switch to the non-root user with the command:
# su - user
Please note “user” will depend on the username used on your system; we have used “user” as a generic example.
Now you can install create-react-app using npm
$ sudo npm install -g create-react-app
And you can create a new react project:
$ create-react-app reactapplication
You should receive similar output once you run the “create-react-app reactapplication” command:
Creating a new React app in /home/user/reactapplication.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1416 packages in 1m
231 packages are looking for funding
run `npm fund` for details
Installing template dependencies using npm...
added 62 packages in 18s
231 packages are looking for funding
run `npm fund` for details
Removing template package using npm...
removed 1 package, and audited 1478 packages in 3s
231 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Success! Created reactapplication at /home/antonio/reactapplication
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd reactapplication
npm start
Happy hacking!
As you can see, the React project is set up, and you can enter the “reactapplication” directory and start serving the site on http://localhost:3000.
$ cd reactapplication $ npm start 0.0.0.0
Once you run the command, you should receive similar output.
Compiled successfully! You can now view reactapp in the browser. Local: http://localhost:3000 On Your Network: http://192.168.100.9:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully
The application is now running in development mode, and you can now access it on your browser. To run your application in production mode, you will have to use npm run build. Once the project is compiled, the build directory can then be deployed. You can also serve it using the static server suggested in the output of the command “npm run build”.
# npm install -g serve # serve -s build
This will install “serve,” and then the second command will serve your site on port 3000.
Congratulations! You successfully installed ReactJS on Debian 11. You can contact our support if you find any difficulties installing this software and service. All you need to do is to sign up for one of our NVMe VPS plans and submit a support ticket. We are available 24/7.