Addressing 404 errors when refreshing pages served by the React router with Nginx

Community Support
1

Hello everybody.

I have a React application using the React Router package. As such, routing is done in the browser, which leads to 404 errors when reloading all pages other than the root page.

At How to fix 404 errors when using React Router with Nginx I found the following block of code, which should solve the problem when added to the NGINX configuration of my website:

server {
    listen       80;
    listen  [::]:80;

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
}

How should I implement this in the Hestia Control Panel?

Thank you.

2

Hi @ioan,

But you are using Nginx standalone or Nginx + Apache?

3

I am using a typical Apache installation with SSL and no other customizations. No sure if NGINX is active as well, in this case.

Here are the settings:

Web Template: APACHE2
default

Backend Template: PHP-FPM
default

Proxy Template
default

Proxy Extensions
css, htm, html, js, json, xml, apng, avif, bmp, cur, gif, ico, jfif, jpg, jpeg, pjp, pjpeg, png, svg, tif, tiff, webp, aac, caf, flac, m4a, midi, mp3, ogg, opus, wav, 3gp, av1, avi, m4v, mkv, mov, mpg, mpeg, mp4, mp4v, webm, otf, ttf, woff, woff2, doc, docx, odf, odp, ods, odt, pdf, ppt, pptx, rtf, txt, xls, xlsx, 7z, bz2, gz, rar, tar, tgz, zip, apk, appx, bin, dmg, exe, img, iso, jar, msi, webmanifest

4

I don’t use Apache but I think you should modify Apache instead of Nginx because is actually Apache the one serving the html files.

Instead of modify Apache conf for your site, first try to create a .htaccess file in your docroot /home/YOUR_USER/web/YOUR_DOMAIN/public_html/ and add this content:

<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>

If that doesn’t work, check whether mod_rewrite module is active and if it is, you would need to add those rules to your Apache conf, inside directive <Directory %docroot%> but first try the .htaccess fix.

1 Like
5

Thank you. The solution with the .htaccess configuration file worked.

Concerning the other approach, did you mean editing the /etc/apache2/apache2.conf file?

1 Like
6

No, I mean:

/home/YOUR_USER/conf/web/YOUR_DOMAIN/apache2.conf
/home/YOUR_USER/conf/web/YOUR_DOMAIN/apache2.ssl.conf

But those conf files will be replaced when rebuilding the domain, so you should create a new template with the right modifications and assign the new template to your site.

Templates for apache are here:

/usr/local/hestia/data/templates/web/apache2/

Edit: as @eris explained below, above path is for mod_php, for current installs that use php-fpm, the right path is:

/usr/local/hestia/data/templates/web/apache2/php-fpm/
7

Thank you.

My /usr/local/hestia/data/templates/web/apache2/ folder contains the following files:

default.stpl
default.tpl
hosting.stpl
hosting.tpl
php-fpm/
phpcgi.sh*
phpcgi.stpl
phpcgi.tpl
phpfcgid.sh*
phpfcgid.stpl
phpfcgid.tpl
www-data.stpl
www-data.tpl

Which of these two templates should be the basis of my customized Apache template? In other words, which two of these files should I duplicate?

8

The default template (it includes default.tpl and default.stpl)

9

You should create the templates in apache2/php-fpm

And make a copy of default.tpl and .stpl

2 Likes
10

/apache2 is for modphp it is currently not used unless specified …

1 Like
11

Thanks for pointing it out, as I don’t use Apache I don’t know the details :wink:

12

Thank you, both of you. It worked.

I did the following:

root@host:/usr/local/hestia/data/templates/web/apache2/php-fpm# cp default.stpl rewrite_index.stpl
root@host:/usr/local/hestia/data/templates/web/apache2/php-fpm# cp default.tpl rewrite_index.tpl

I brought rewrite_index.stpl to this form:

    ...
    <Directory %sdocroot%>
        AllowOverride All
        SSLRequireSSL
        Options +Includes -Indexes +ExecCGI

        <IfModule mod_rewrite.c>
           RewriteEngine on
           # Don't rewrite files or directories
           RewriteCond %{REQUEST_FILENAME} -f [OR]
           RewriteCond %{REQUEST_FILENAME} -d
           RewriteRule ^ - [L]
           # Rewrite everything else to index.html to allow html5 state links
           RewriteRule ^ index.html [L]
        </IfModule>
    </Directory>
     ...

I brought rewrite_index.tpl to this form:

...
   <Directory %docroot%>
        AllowOverride All
        Options +Includes -Indexes +ExecCGI

        <IfModule mod_rewrite.c>
           RewriteEngine on
           # Don't rewrite files or directories
           RewriteCond %{REQUEST_FILENAME} -f [OR]
           RewriteCond %{REQUEST_FILENAME} -d
           RewriteRule ^ - [L]
           # Rewrite everything else to index.html to allow html5 state links
           RewriteRule ^ index.html [L]
        </IfModule>
    </Directory>
...

At this point the rewrite_index entry became available in the Web Template APACHE2 drop-down list.

Selected the new rewrite_index template.

2 Likes