Apache Error 404 in react app even after adding .htaccess

Question

I've a production react app (contents of the build folder) in /var/www/my_webpage/

This is my virtual host config

<VirtualHost *:80>

        ServerName www.domain.com
        ServerAlias domain.com
        DocumentRoot /var/www/my_webpage


        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

# redirect all the http requests to https - added automatically by CertBot
        RewriteEngine on
        RewriteCond %{SERVER_NAME} =prudent-solutions.co.in [OR]
        RewriteCond %{SERVER_NAME} =www.prudent-solutions.co.in
        RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

And my .htaccess file in the document root /var/www/my_webpage

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

The home page is working fine. But when I go to domain.com/some_thing, I get a 404 Error from Apache
I've went through many websites and tutorials for react deployment. I can't understand how they simply add a .htaccess file and make their website work and why the same is not happening for me. I'm completely new to Apache mod_rewrite.

Also I'm not interested to setup a separate express.js server to route all the requests to index.html file or use HashRouter instead of BrowserRouter.
Screenshot of the error

My react-router

import "./App.css";

// Importing react components/Pages ----------------------------------
import Revamp from "./components/Misc/Revamp";
import Navbar from "./Shared/Navbar";
// Importing Route requirements ----------
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Switch>
          <Route component={Revamp} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

My manifest.json

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "homepage": ".",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Additional details

Apache version:
Server version: Apache/2.4.41 (Ubuntu)
Server built:   2020-08-12T19:46:17

score 1 · Accepted Answer · answered May 07 '21 at 07:13

You need to teach your server to redirect to index.html on error 404:

<VirtualHost *:80>

  # ...

  DocumentRoot /var/www/my_webpage

  <Directory "/var/www/my_webpage">
    AllowOverride None # Line 1
    ErrorDocument 404 /index.html # Line 2: Here we set ErrorDocument
    Require all granted
  </Directory>

  # ...

Now, you need to restart the apache2 server.

Or, add below line in .htaccess file under project root directory (don't forget to AllowOverride ALL at Line 1 shown above):

ErrorDocument 404 /index.html

Apache Error 404 in react app even after adding .htaccess

1 Answers1

Linked