Search code examples
reactjs.htaccessweb-deploymentcreate-react-apphost

React app only show home page on the server

i created a react app using create-react-app , after finishing the development i runned ' yarn build ' then i uploaded the files in the build folder on the server using fileZilla ( i have a premium account on hostinger ) in my package.json i added the following line :

"homepage": "https://goinprod.com/",

my .htaccess file located in the public_html folder looks like this :

# DO NOT REMOVE THIS LINE AND THE LINES BELLOW SSL_REDIRECT:goinprod.com
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteCond %{HTTP_HOST} (www\.)?goinprod.com
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
# DO NOT REMOVE THIS LINE AND THE LINES BELLOW SSL_REDIRECT:goinprod.com

# DO NOT REMOVE THIS LINE AND THE LINES BELLOW UPGRADE_INSECURE_REQUESTS:goinprod.com
Header always set Content-Security-Policy: upgrade-insecure-requests
# DO NOT REMOVE THIS LINE AND THE LINES BELLOW UPGRADE_INSECURE_REQUESTS:goinprod.com


# DO NOT REMOVE THIS LINE AND THE LINES BELLOW SSL_REDIRECT:goinprod.com
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteCond %{HTTP_HOST} (www\.)?goinprod.com
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
# DO NOT REMOVE THIS LINE AND THE LINES BELLOW SSL_REDIRECT:goinprod.com

the home page looks fine but when i navigate in another page it show the following error enter image description here

file structure on the server :

static ( folder )
asset-manifest.json
favicon.ico
index.html
logo.png
logo2.png
manifest.json
.htaccess.
precache-manifest.json
robots.txt
service-worker.js

my website link : https://goinprod.com/

Solution

  • it was a routing problem i just added the following code in the file .htaccess in public_html folder :

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