React app on server while refreshing the page shows 404 page

Question

I am build the react app using the create_react_app. Now i move the build to the server and run the app using serve. My app will load the data from the apis. When i refresh the page it shows 404 page not found error. Also i tried with http-server

When i was some page /dashboard and refersh the page it shows 404. Now i have to go to BASE_URL/ then only it works. But in my local when i refersh everything works.

This is my package.json

"react-dates": "^17.0.0",
"react-dom": "^16.4.0",
"react-i18next": "^7.7.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4"

And i use apache on my server.

I think this is the problem not with my code. If you guys know anything about this, please help me.

And http-server run command was http-server ./build -p 7001

Answer 1

For those who are not using default apache vHost config like *:80 and instead using domains like test.local for local test environments please refer this, this worked for me.

I had to add <Directory> tag and do the Rewrite codes

<VirtualHost react.myapp.local>

    ServerName react.myapp.local
    ServerAdmin react.myapp.local
    DocumentRoot "C:/xampp/htdocs/react-myapp/build"

    <Directory "C:/xampp/htdocs/react-myapp/build">
        RewriteEngine On
        #check for files and do not redirect
        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>

    ErrorLog "logs/react.myapp.local-error.log"
</VirtualHost>

I was using XAMPP in Windows and I wanted to host a react app in my local apache server.

Answer 2

To expound more on sparsh turkane' answer, I had this challenge when working on a CentOS server.

Here's how I fixed it:

The mod_rewrite module is enabled by default on CentOS. If you find it is not enabled on your server, you can enable it by editing 00-base.conf file located in /etc/httpd/conf.modules.d/ directory:

sudo nano /etc/httpd/conf.modules.d/00-base.conf

Add or uncomment the following line:

LoadModule rewrite_module modules/mod_rewrite.so

Save and close the file.

Now we can set up the URL rewrites by creating an .htaccess file in your default document root directory. A .htaccess file allows us to modify rewrite rules without accessing server configuration files. For this reason, .htaccess is critical to your web server:

Change directories to your Document root. For me it was /var/www/my_app:

cd /var/www/my_app

Create the .htaccess file:

sudo nano .htaccess

Add the following content:

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

Save and exit the file.

Next, we need to allow Apache to read .htaccess files located under the Document root directory. For me it was /var/www/my_app:

<Directory "/var/www/my_app">
  Options FollowSymLinks MultiViews
  AllowOverride All
  DirectoryIndex index.html
  Order deny,allow
  Allow from all
</Directory>

Save and close the file, then restart the httpd service:

sudo systemctl restart httpd

Resources: Install And Configure Mod_rewrite For Apache On CentOS 7

That's all.

I hope this helps

Answer 3

In order to avoid 404 error on Apache server you would have to enable mod_rewrite and add .htaccess file in root directory

Step 1 — Enabling mod_rewrite

First, we need to activate mod_rewrite. It's available but not enabled with a clean Apache 2 installation.

sudo a2enmod rewrite

This will activate the module or alert you that the module is already enabled. To put these changes into effect, restart Apache.

sudo systemctl restart apache2

or

sudo service apache2 restart

Step 2 — Setting Up .htaccess

By default, Apache prohibits using an .htaccess file to apply rewrite rules, so first you need to allow changes to the file. Open the default Apache configuration file using nano or your favorite text editor.

sudo nano /etc/apache2/sites-available/000-default.conf

Inside that file, you will find a < VirtualHost *:80> block starting on the first line. Inside of that block, add the following new block so your configuration file looks like the following. Make sure that all blocks are properly indented.

<VirtualHost *:80>
    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>

    . . .
</VirtualHost>

And if you have https configured, you will find a < VirtualHost *:443> block starting on the first line. Inside of that block, add the following new block so your configuration file looks like the following. Make sure that all blocks are properly indented. In this case, you also need to add this below 2 virtual hosts of HTTP and HTTPS

<VirtualHost *:443>
    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>

    . . .
</VirtualHost>

Save and close the file. To put these changes into effect, restart Apache.

sudo systemctl restart apache2

or

sudo service apache2 restart

Step 3 — creating .htaccess

Now, create the following .htaccess file in the web root.

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

If you have already enabled mod_rewrite and applied rewrite rules the skip step 1 and step 2 and use step 3 directly

I have referred documentation of React and server setup by digital Ocean

Answer 4

If you’re using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:

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

according to create-react-app documentation https://github.com/facebook/create-react-app