ReactJS is a popular JavaScript library for building user interfaces. It allows developers to create reusable components that can be used in both front-end web and mobile applications. In this article, we will show you how to install ReactJS on Ubuntu 22.04 using Nginx as the web server.
Before we begin, make sure you have the following prerequisites installed on your system:
- Node.js and npm (Node Package Manager)
- Nginx web server
To install Node.js and npm on Ubuntu, you can use the following commands:
curl -sL <https://deb.nodesource.com/setup_14.x> | sudo -E bash -
sudo apt-get install -y nodejs
To install Nginx, you can use the following command:
sudo apt-get install nginx
Once you have these prerequisites installed, you can proceed with the installation of ReactJS.
The first step is to create a new directory for your ReactJS project and navigate to it. You can do this using the following commands:
mkdir my-react-app
cd my-react-app
Next, initialize your ReactJS project by running the following command:
npx create-react-app .
This command will create a new ReactJS project with the default configuration.
Now, you can start the development server for your ReactJS project by running the following command:
npm start
This will start the development server and you can access your ReactJS project at**http://localhost:3000**.
However, if you want to run your ReactJS project in production, you will need to build the project using the following command:
npm run build
This will create a build
directory in your project that contains the optimized version of your ReactJS application.
To serve your ReactJS application using Nginx, you will need to create a new virtual host configuration file. You can do this by creating a new file called my-react-app.conf
in the /etc/nginx/conf.d
directory and adding the following content to it:
server {
listen 80;
server_name my-react-app.com;
root /var/www/my-react-app/build;
index index.html;
location / {
try_files $uri /index.html;
}
}
Make sure to replace my-react-app.com
with the actual domain name of your application.
Next, copy the build
directory of your ReactJS project to the /var/www/my-react-app
directory. You can do this using the following commands:
sudo mkdir /var/www/my-react-app
sudo cp -r build /var/www/my-react-app/
Now, you can restart Nginx and access your ReactJS application using the domain name specified in the virtual host configuration file. To restart Nginx, you can use the following command:
sudo systemctl restart nginx
Your ReactJS application should now be running on Ubuntu 22.04 using Nginx as the web server.