Unable to Access React Application via Main IP Address (Edited)

After running the npm start and node server.js commands, I am unable to access my React application via the server’s IP address and port. The application is set up to run through Nginx on an Ubuntu 22.04 server. The domain servers have already been added to the DNS settings. What could be the issue?

System Versions:
OS: Ubuntu 22.04 x64
Node.js: Version 18.13.0
Nginx: Version 1.22.0

Nginx Configuration:

		
server { listen 80 default_server; server_name _;

root /var/www/html; index index.html index.htm index.nginx-debian.html;

location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; try_files $uri /index.html; } }



Steps I Took:
1. Installed Nginx:
		
sudo apt-get update sudo apt-get install nginx


2. Modified the Nginx configuration:
		
sudo nano /etc/nginx/sites-available/default


3. Checked the configuration and restarted Nginx:
		
sudo nginx -t sudo systemctl restart nginx

Viktor Eriksson

15 hours 51 min ago

1 answer

168 views

Rating

04
Answer

Answers

Antonio Sánchez

28 days ago

Rating

01

The issue might be caused by the following factors:

1. Incorrect Nginx configuration.

2. Firewall blocking access.

3. An issue with the React application itself.

Possible Solutions:

If the issue is with Nginx configuration:

Open the Nginx configuration file for editing:

		
sudo nano /etc/nginx/sites-available/default

Update the server block to look something like this:

		
server { listen 80; server_name www.; root /var/www//build; index index.html; }

After saving the configuration, check for errors:

		
sudo nginx -t

If there are no errors, restart Nginx:

		
sudo systemctl restart nginx

If the issue persists, review the Nginx error logs and provide more details for troubleshooting:

		
sudo tail -f /var/log/nginx/error.log

If the issue is related to the firewall:

If you are using ufw (Uncomplicated Firewall), use the following commands:

Allow Nginx through the firewall:

		
sudo ufw allow 'Nginx Full'

Remove the rule that limits access to port 80 only:

		
sudo ufw delete allow 'Nginx HTTP'

Reload the firewall to apply the changes:

		
sudo ufw reload

If the issue is with the React application:

Start the application:

		
cd /home// npm start

Check if the application is accessible:

		
curl -I http://localhost:3000

If the application responds correctly, it means the app is running fine, and the issue might lie with Nginx or network settings.

If there is no response, verify that the app is listening on port 3000:

		
sudo lsof -i :3000

If the app is not listed, restart it and check the configuration to ensure everything is set up correctly.

Reply