reactjs.htaccessreact-routerpleskplesk-onyx

react-router throwing 404 upon page refresh with React app hosted on GoDaddy


I deployed a React website using GoDaddy (http://normaned.com), and I’m having trouble with my react-router routing not working upon refresh. Clicking on links works as expected, but if a page is refreshed a 404 page is displayed. I’m using BrowserRouter from react-router.

The GoDaddy hosting plan is "Economy Windows Hosting with Plesk". Unfortunately, I’m not the one who set up the hosting service, and I’m unsure if I can change from Plesk to cPanel without extra monetary cost... or if that would even be a way to get closer to solving my problem (i.e., Windows vs Linux hosting).

EDIT 10/19: I now realize that the server is a Windows IIS server, and I need a web.config file (not a .htaccess file). Though, I'm still unsure of what code needs to go in the web.config file.

Here is my GitHub repo for the website: https://github.com/jenna-m/norman-ed


I have tried suggested methods I’ve found on StackOverflow, the GoDaddy help forum, and elsewhere, but it’s still not working. Here are some things that I’ve tried:

https://stackoverflow.com/a/40591955/11995771

https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042

I’ve tried adding the following to an .htaccess file in the public_html root directory:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

I created the .htaccess file directly in Plesk, making sure that no extra characters were added (as suggested in this article (https://www.godaddy.com/help/what-is-htaccess-2504)

After trying to solve the problem for a bit, I realized that this might have to do with the fact that I’m using Plesk vs cPanel. So, I found these potential work arounds:

https://support.plesk.com/hc/en-us/articles/115001697373-Website-with-configured-htaccess-is-not-working-404-Not-Found

https://support.plesk.com/hc/en-us/articles/115003015833-Redirection-rules-in-htaccess-file-do-not-work-in-Plesk

I thought that either of these solutions would work, but they didn't.

I found this post from Plesk support (https://support.plesk.com/hc/en-us/articles/115000063989-Does-Plesk-support-Apache-web-server-for-Windows-), which lead me to this Microsoft article (https://blogs.msdn.microsoft.com/azureossds/2015/04/23/converting-apache-htaccess-rules-to-iis-web-config-using-iis-manager-for-azure-websites/).


Solution

  • It turns out that I was using a Windows IIS server. I'm new to the world of web servers and didn't know that I was working with an IIS server.

    It turns out that I needed a web.config file to make my URL redirects work, and not a .htaccess file, like I was trying to use initially.

    This is the content (found from this StackOverflow answer) of my web.config file:

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <system.webServer>
        <httpErrors errorMode="Custom" existingResponse="Replace">
            <remove statusCode="404" subStatusCode="-1" />
            <error statusCode="404" path="/" responseMode="ExecuteURL" />
        </httpErrors>
      </system.webServer>
    </configuration>