Apache configuration for ReactJS with React Router V4

Question

I do have an application build with ReactJS and React Router V4 that I'm trying to release to production.

At production I have Apache with the following configuration:

$ cat /etc/apache2/sites-available/000-default.conf

<VirtualHost *:80>
    ServerName myapp.localhost
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html
    SetEnv APP_HOME /usr/local/bin/myapp
    <Directory "/var/www/html">
        AllowOverride All
    # Don't rewrite files or subdirectories
        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>

On browse, I do:

http://192.168.0.100

it loads my landing page. But from there I cannot access any other url:

http://192.168.0.100/login
http://192.168.0.100/status
http://192.168.0.100/detail/1
http://192.168.0.100/dashboard

All pages I get the following error from Apache:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /status was not found on this server.</p>
<hr>
<address>Apache/2.4.10 (Debian) Server at 192.168.0.100 Port 80</address>
</body></html>

I'm pretty sure something is wrong with my configuration (may be my RewriteCond/RewriteRule), but no idea on how to solve it.

johnsing · Accepted Answer · 2019-06-18 18:37:05Z

I know this is a year late, but I wanted to share this solution, assuming Ubuntu OS is used, in case anyone has the same concern as you did:

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]

End quote

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.

Hope this helps you now as much as it did for me!

Collectives™ on Stack Overflow

Apache configuration for ReactJS with React Router V4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related