How to deploy and host react app on Apache server

I've followed certain steps from this post from Reddit and I can attest this works for making SPAs run in Apache web server with proper routing.

To quote:

1) In the apache2.conf located in etc/apache2/ I turned AllowOverride to All. I also added Servername localhost in the file. (I somehow skipped this last sentence, but still it worked fine in the end)

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

2) In the hosts.debian.tmpl file found in /etc/cloud/templates I added 127.0.0.1 <yourdomain.com> to the file where the other ips of the similiarity are.

127.0.0.1 yourdomain.com

3) I ran sudo a2enmod rewrite. Then I restarted the apache server via service apache2 restart. This turns on mod_rewrite.

Lastly inside of my project folder /var/www/html , along side my index.html file I created a .htaccess file and added in the following:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]

Assuming you've run npm run build and then copied all the contents inside the build folder to your public directory, this should work.

When I first started web dev, I wasn't really sure I made the VirtualHost config right, so what I usually did was first to make a dummy index.html with, say, Hello World example. When I've confirmed that I'm able to see Hello World in the browser (which means I got the VirtualHost config right), I dump the contents of the build folder to where the dummy index.html was.

My Solution:

Apache:

I am running an Apache Server with multiple React-Apps, that are accessible by Aliases, as e.g. /abc/app/ or xyz/app/. For that paths, i adjusted the <Directory>...</Directory> area inside my virtual hosts config:

<VirtualHost *:443>
RewriteEngine On

    Alias /abc/app "/var/www/abc"
    Alias /xyz/app "/var/www/xyz"

    <Directory "/var/www/abc">
      Options Indexes FollowSymLinks
      AllowOverride All
      Require all granted
     </Directory>


    <Directory "/var/www/xyz">
      Options Indexes FollowSymLinks
      AllowOverride All
      Require all granted
     </Directory>

    [...]

</VirtualHost *:443>

Additionally, I added the following into /var/www/abc/.htaccess according to the React Docs:

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

React Router > 4:

But most importantly I adjusted my package.json and .env files. If you use environment files, you can add the following lines (obv adjusted with your path) to your production or release environment files:

PUBLIC_URL=https://link.to.your.page/abc/app/
REACT_APP_ROOT_PATH=/abc/app

Don't rename PUBLIC_URL. You can change everything after REACT_APP_

Delete the homepage line from your package.json

Alternatively, if you don't work with .env files, you might adjust your homepage line in the package.json like so:

 "homepage":"link.to.your.page/abc/app/"

In your index.js, or where ever you use BrowserRouter or Router, you alter your code like so:

 let PATH = process.env.REACT_APP_ROOT_PATH // Or, if you prefer it hard coded "/abc/app"
 <BrowserRouter basename={PATH} > <App/> </BrowserRouter>