Скачать или смотреть How to Fix 404 Errors on Your React App Hosted on cPanel with .htaccess

Discover how to effectively configure your `.htaccess` file for a `React` application hosted on `cPanel` to avoid 404 errors with `React Router` on page refreshes.
---
This video is based on the question https://stackoverflow.com/q/72576332/ asked by the user 'Jorge Guerreiro' ( https://stackoverflow.com/u/7100079/ ) and on the answer https://stackoverflow.com/a/72576761/ provided by the user 'udoyhasan' ( https://stackoverflow.com/u/14359374/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: htaccess for React app using React router hosted on cpanel

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Fixing 404 Errors in Your React App Hosted on cPanel

If you've hosted a React single page application (SPA) on cPanel, you may have encountered a frustrating issue. When you refresh a page or access a URL directly, you might see a "404 Not Found" error. This is particularly common when using React Router, which is designed for client-side routing. In this guide, we will dissect this problem and provide a detailed (and simple) solution to overcome it using a properly configured .htaccess file.

Understanding the Problem

When using React Router, your application expects to handle all routing internally. This means that when a user types in a URL like https://example.com/privacypolicy, your app should take care of rendering the appropriate component based on that path. However, if the server receives a request for that URL directly, it looks for a physical file or directory. Since React's URL structure does not correspond to actual files, the server returns a 404 error.

Folder Structure Overview

Here’s how your folder structure should look on cPanel after you’ve built your React application:

[[See Video to Reveal this Text or Code Snippet]]

The index.html file is crucial, as it acts as the entry point for your React application. The .htaccess file helps redirect all incoming requests to this file.

Configuring the .htaccess File

To solve the 404 issue, you will need to ensure your .htaccess file is configured correctly. Here’s how to set it up:

Create or Edit your .htaccess file in the public_html directory.

Use the following configuration:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Directives

RewriteEngine On: Enables the rewrite rules.

RewriteBase /: Sets the base URL for subsequent rewrite rules.

RewriteRule ^index.html$ - [L]: Indicates that requests for index.html should not be rewritten.

RewriteCond %{REQUEST_FILENAME} !-f: Checks that the request is not for a valid file.

RewriteCond %{REQUEST_FILENAME} !-d: Ensures the request is not for a valid directory.

RewriteCond %{REQUEST_FILENAME} !-l: Validates that the request is not for a valid symbolic link.

RewriteRule . /index.html [L]: Redirects all other requests to index.html, allowing React to handle routing.

Setting Up Your React App on cPanel

To properly set up your React app, follow these initial steps:

Set the homepage attribute in your package.json file. This tells React where the application is hosted. For example:

[[See Video to Reveal this Text or Code Snippet]]

Build your React app by running:

[[See Video to Reveal this Text or Code Snippet]]

This command generates a build folder containing your optimized application.

Upload the contents of the build folder to the public_html directory on cPanel, ensuring that the index.html and the .htaccess file are in place.

Conclusion

Correctly configuring your .htaccess file is vital for deploying React applications on cPanel without facing the irritating 404 errors upon refreshing pages or direct URL access. Following the instructions laid out above will help your app manage routing more effectively, providing a seamless user experience.

If you found this post helpful or have further questions about deploying applications, feel free to leave a comment below or share your experiences!