cPanel .htaccess - The requested URL was not found on this server

I have to deploy a React/Node application through cPanel for a school assignment, and I am having some issues. If I reload the page, I get the following error:

Not Found

The requested URL was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

I found that adding a .htaccess file will let me refresh the page, but now my API request gets the error of: Unexpected token '<', "<!doctype "... is not valid JSON. Full response from Postman:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="/favicon.ico" />
    <link rel="manifest" href="/manifest.json" />
    <title>Decentralized Technologies</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Anonymous+Pro&family=Russo+One&family=Syne:wght@500&display=swap"
        rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <script defer="defer" src="/static/js/main.3d02b5b2.js"></script>
    <link href="/static/css/main.e75f676e.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="backdrop-hook"></div>
    <div id="modal-hook"></div>
    <div id="root"></div>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init()
    </script>
</body>

</html>

.htaccess file:

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

There is also an autogenerated .htaccess file in an API folder in my public_html folder within the cPanel finder:

 # DO NOT REMOVE. CLOUDLINUX PASSENGER CONFIGURATION BEGIN
PassengerAppRoot "/home/<name>/server"
PassengerBaseURI "/api"
PassengerNodejs "/home/<name>/nodevenv/server/10/bin/node"
PassengerAppType node
PassengerStartupFile app.js
# DO NOT REMOVE. CLOUDLINUX PASSENGER CONFIGURATION END
# DO NOT REMOVE OR MODIFY. CLOUDLINUX ENV VARS CONFIGURATION BEGIN
<IfModule Litespeed>
   <keys>
</IfModule>
# DO NOT REMOVE OR MODIFY. CLOUDLINUX ENV VARS CONFIGURATION END

I've tried adding the contents .htaccess that I manually created to the autogenerated one and vice-versa, but when both the and the are in the environment at the same (whether in the same file or separate), the API calls do not work. I'm at a loss for how to be able to do both of these things together and am looking for some help.

Thanks!

Solution

I was able to get this to work by adding RewriteRule ^(api) - [L] right after RewriteEngine On. The ^(api) tells the redirect to ignore rewriting all calls to that have api in the url.