Plesk Question posted in
The official documentation for Plesk Obsidian can be found here.

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

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/).

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    If you are using and Apache server the problem might be your .htaccess file, when you are using React router the routes that are created or declared in React do not exist in the server, therefore we have to configure the requests so that each one goes to index.html and show a 404 in React when the page is not found.

    According to the create-react-app documentation:

    If you are 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]

    Link to create-react-app documentation:

    https://create-react-app.dev/docs/deployment

    You can read more about the creation of a 404 page in React in the React router: documentation:

    https://reacttraining.com/react-router/web/example/no-match

    Login or Signup to reply.
  3. 0

    Try specifying your homepage in your package.json file

    {
"homepage": "https://yoursite.com",
}

    Then run

    npm build

    or

    yarn build

    Login or Signup to reply.
  4. 0

    Follow these steps and you will be fine

    1. Specify your homepage in your package.json file like this

       {
  "name": "yourappname",
  "homepage": "http://example.com",//add your domain here line
  "private": true,
  "version": "0.0.0",
 }

    2.Build your app by running yarn build or npm run build

    3.Then copy the contents of your build folder and paste them on public_html folder in your cpanel

    3.Go to your Cpanel file manager public_html folder and edit .htaccess file or create new one if it does not exist. and paste this there

    <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>

    Note the .htaccess for this should be at the same level with the contents of the build folder.

    1. Save and your are done
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search