How to setup apache server for React route?

Question

I have my react app running great on my local dev server but it did not work when I dump my production ready files straight into Apache\'s htdocs directory:

Here is

Answer 1

Seems like this link (https://gkedge.gitbooks.io/react-router-in-the-real/content/apache.html) is just what you need...

This piece of configuration is helpful for SPAs :

This tells Apache to serve any files that exist, but if they don't exist, just serve /index.html rather than a 404: not found

Hope that solves your problem !

Answer 2

Change the VirtualHost configuration (typically found in /etc/httpd/conf.d\vhosts.conf) by adding the following Rewrite* lines:

<VirtualHost *:8080>
  ServerName example.com
  DocumentRoot /var/www/httpd/example.com

  <Directory "/var/www/httpd/example.com">
    ...

    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]
  </Directory>
</VirtualHost>

This tells Apache to serve any files that exist, but if they don't exist, just serve /index.html rather than a 404: not found.

• Apache Reference: Configuring Apache Virtual Hosts

• react-router History Reference: Configuring Your Server

Complete answer gratefully stolen from here

Answer 3

React routing issue fixed on ubantu server

Solution:

1. Open the file using the console.

If you are using SSL nano /etc/apache2/sites-available/000-default-le-ssl.conf

Add the following lines

===================================================================================

DocumentRoot /var/www/project <Directory "/var/www/project"> RewriteEngine on RewriteCond %{HTTP_ACCEPT} text/html RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [last] RewriteRule ^ - [last]

AllowOverride None
Options FollowSymLinks Multiviews 
Require all granted

Answer 4

What worked for me, echoing many of the answers and comments here:

1. sudo a2enmod rewrite
2. Open up /etc/apache2/apache2.conf
3. Paste in this:

<Directory "/var/www/<PATH_TO_YOUR_ROOT>">
    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]
</Directory>

4. sudo service apache2 restart

Pasting into the site-specific conf file did not work as earlier answers suggested.

Answer 5

Thank you! This worked for me.

I am pasting my config if you are serving multiple sites (virtualhost) and also SSL certificates (SSL was made with certbot), with redirect http to https

This setting works on Linode / Ubuntu

yoursite.com-le-ssl.conf

<IfModule mod_ssl.c>
<VirtualHost *:443>
  # Admin email, Server Name (domain name), and any aliases
  ServerAdmin webmaster@yoursite.com
  ServerName  yoursite.com
  ServerAlias www.yoursite.com

  # Index file and Document Root (where the public files are located)
 DirectoryIndex index.html index.php
  DocumentRoot /var/www/html/yoursite.com/public_html 
<Directory  "/var/www/html/yoursite.com/public_html">
    RewriteEngine on

    # Browsers will specifically ask for HTML (among other things) on initial page load
    # That is, if the *user* tries to access a *nonexisting* URL, the app is loaded instead
    # but if a webpage attempts to load a missing resource it will return 404.
    # (You can still go to /myreactapp/favicon.ico, but a missing /myreactapp/favicon.png resource won't return 200)

    # if (HTTP_ACCESS.contains('text/html') && file_not_exists(REQUEST_FILENAME))
    RewriteCond %{HTTP_ACCEPT} text/html
    RewriteCond %{REQUEST_FILENAME} !-f
        RewriteRule ^ index.html [last]

    # Any ressources loaded by index.html should behave correctly (i.e: Return 404 if missing)
    RewriteRule ^ - [last]

    AllowOverride None
    Options FollowSymLinks Multiviews 
    Require all granted
</Directory>
  # Log file locations
  LogLevel warn
  ErrorLog  /var/www/html/yoursite.com/log/error.log
  CustomLog /var/www/html/yoursite.com/log/access.log combined
Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/yoursite.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/yoursite.com/privkey.pem
</VirtualHost>
</IfModule>

Answer 6

If you have to use .htaccess and a sub directory then following works for me.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]