Running A ReactJS App in a subfolder under root creates 404 errors

15 Views Asked by At

Created a ReactJS app that uses routes and wish to deploy it in a subfolder of my root web: https://myrootsite.com/myreactapp. Modified my package.json:

{
  "name": "website",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://myrootsite.com/myreactapp",
  "dependencies": {... And The Rest}
  ... And The Rest
}

Application Entry Point code contains:

const router = createBrowserRouter(
    createRoutesFromElements(
    <>
        <Route path="/" element={<Root />} />
        <Route path="/test/portal" element={<Test />} />
    </>)
)
export const Application = () => {
    return(<RouterProvider router={router} basename="/myreactapp">)
}

.htaccess:

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# Fallback all other routes to index.html
RewriteRule ^ /myreactapp/index.html [L]

VH Configuration:

<VirtualHost *:80>
        ServerName myrootsite.com
        Redirect permanent / https://myrootsite.com
</VirtualHost>
<VirtualHost *:443>
   ServerAdmin [email protected]
   ServerName myrootsite.com
   SSLEngine on
   SSLOptions +FakeBasicAuth +ExportCertData +StrictRequire
   SSLCertificateFile /etc/ssl/myrootsite/STAR_myrootsite.crt
   SSLCertificateKeyFile /etc/ssl/myrootsite/myrootsite.key
   SSLCertificateChainFile /etc/ssl/myrootsite/SectigoRSADomainValidationSecureServerCA.crt
   DocumentRoot /www/html
   Alias "/myreactapp" "/www/html/myreactapp"
   <Directory />
      Options Indexes FollowSymLinks
      AllowOverride All
      Require all granted
   </Directory>
   <Directory /www/html>
      Options Indexes FollowSymLinks MultiViews
      AllowOverride All
      Require all granted
   </Directory>
   <Directory /www/html/myreactapp>
      Options Indexes FollowSymLinks MultiViews
      AllowOverride All
      Require all granted
   </Directory>
   ErrorLog /www/html/logs/myrootsite.errors
   LogLevel warn
   CustomLog /www/html/logs/myrootsite.access combined
</VirtualHost>

Results of npm-run-build:

The project was built assuming it is hosted at /myreactapp/.
You can control this with the homepage field in your package.json.

Pointing my web browser to https://myrootsite.com/myreactapp causes an "Unexpected Application Error - 404 Not Found."

Is there a piece of this puzzle I am missing? Thanks All!

0

There are 0 best solutions below