Background
Previously, we successfully deployed our React application on a Raspberry Pi 4 using NGINX. However, after migrating to a Raspberry Pi 5 with Bookworm OS, we encountered the 500 Internal Server Error.

Troubleshooting Steps
1)Check NGINX Error Log: We began our troubleshooting by examining the NGINX error log located at
/var/log/nginx/error.log.
Here, we discovered error messages indicating issues with serving files.

2)Permissions Adjustment: Following online solutions, we tried adjusting permissions for our application build directory using commands like:

sudo chown -R pi:www-data /home/pi/RDVI-frontend/build/
sudo chmod -R g+r /home/pi/RDVI-frontend/build/
sudo systemctl restart nginx

Unfortunately, this didn’t resolve the issue.

3)Permission Change to Root User: Next, we attempted changing permissions to the root user:

sudo chown -R root:root /home/pi/RDVI-frontend/build/
sudo systemctl restart nginx

Solution
4)NGINX Configuration Update: Realizing the issue might be with the NGINX configuration, we made changes to the NGINX default configuration file located at

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

We updated the root folder to point to

root /var/www/build

Modified the location block to:

location / {
try_files $uri $uri/ /index.html;
}

this change worked!

Conclusion
By updating the NGINX configuration to properly serve our React application files and ensuring correct permissions on the build directory, we successfully resolved the 500 Internal Server Error. Sometimes, the solution lies in tweaking the configuration to suit the specific environment.

Step 1: Install NGINX
First, SSH into your Raspberry Pi and install NGINX using the following command:

sudo apt update
sudo apt install nginx

Step 2: Verify NGINX Installation
After installation, check the status of NGINX to ensure it’s running:

sudo systemctl status nginx

Step 3: Configure NGINX for React Application
Next, open the NGINX default configuration file using a text editor:

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

Inside the file, locate the root directive and set it to the build directory of your React application:

server {
...
root /var/www/build;
...
}

Then, update the location / block to serve the React application’s index.html:

location / {
try_files $uri $uri/ /index.html;
}

Step 4: Restart NGINX
Once the configuration is updated, restart NGINX to apply the changes:

sudo systemctl restart nginx

Step 5: Verify React Application
Finally, open a web browser and got to localhost . You should see your React application being served by NGINX.

Conclusion:
By following these steps, you’ve successfully set up NGINX to serve a React application on your Raspberry Pi 5. NGINX provides a reliable and efficient way to host web applications, making it a suitable choice for serving React applications in production environments.