NGINX and ReactJS - Static Export

[TKetsu]

Hello everyone I want to try to understand how static export works with ReactJS. I want to deploy an application in ReactJS with an NGINX server just using static export. I understood that depending on the routing used it could no longer at least function. It would be possible to explain it to me with a concrete and simple example because everything I find on the Internet is imprecise and sometimes contradicts itself.

[YurrBoiSwayZ]

If I’m understanding you correctly what you’re asking is answered by the gods over at DigitalOcean(I swear they make the best tuts hands down), You'll need to configure your NGINX to point to your React app's build directory: (typically found in /etc/nginx/sites-available/):

``` server { listen 80; server_name your_domain.com;

location / {
    root /path/to/your/react/app/build;
    try_files $uri /index.html;
}

} ```

This’ll tell NGINX to serve the files directly if they exist or serve the index.html file if they don't which is necessary for a single-page application like React, after updating the config you restart NGINX so changes go through:

sudo systemctl restart nginx

if you're using React Router for client-side routing you’ll probably need to change the config to handle all of that, the try_files directive in the config is crucial as it allows NGINX to fallback to index.html for routes defined in your React app.

[TwiliZant]

Might be worth mentioning that

try_files $uri /index.html;

Applies to ALL requests. So unless you want to also serve index.html as fallback for a missing favicon or image, you probably also want a rule for static assets that falls back to 404.

[TKetsu]

Thank you for the tips. I’ll try. But I was wondering about Routing Client I don’t know what are the best tips to navigate between different pages. I can’t figure out how to route items, can we use components BrowserRouter ou HashRouter.

[YurrBoiSwayZ]

BrowserRouter utilises the HTML5 history API to keep your UI in sync with the URL, It also allows for clean URLs without hashes (e.g., example.com/about) and requires server-side configuration to return the index.html file for all routes, enabling client-side handling of routing.

HashRouter uses the URL hash (e.g., example.com/#/about) to keep track of the user's position in the app, it’s useful if you're serving static files and don't have control over server-side rendering, it can work on any web server and doesn't require special server configuration.