godaddy cPanel React - new page showing 404

Question

I've created my first Single Page Application(SPA) static website using react and am hosting it on Godaddy. It's been up for about a month and working fine.

A couple of days ago, I created a "contact me" page where users can fill out a form and an email is sent to me using Nodemailer.

Anyways, I ran npm run build when I finished the "contact me" page and uploaded everything to cPanel in the public_html folder as instructed. The home page works however but the "/contactus" page returns a 404.

I've talked to Godaddy and their first suggestion was to add the .htaccess file that redirects everything from an HTTP to an HTTPS. I did that and it is still returning a 404.

here are the contents of the .htaccess file

RewriteEngine On 
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} ^(www\.)?coolexample\.com
RewriteRule ^(.*)$ https://www.coolexample.com/$1 [R,L]

I talked to GoDaddy a second time and they have told me that the "/ContactUs" is not being found in the index.html. i thought npm run build handled this?

The contactus link works when I use npm start and it is run on my localhost.

my app.js code looks like this:

import React from "react"
import {AuthProvider} from "../contexts/AuthContext"
import {BrowserRouter as Router, Switch, Route} from "react-router-dom"
import ContactUs from "./ContactUs";
import Home from "./Home"
import ForgotPassword from "./ForgotPassword"
import NavigationBar from "./NavigationBar";
import NoMatch from "./NoMatch";

function App() {
    return (
        <React.Fragment>
            <AuthProvider>
                <NavigationBar/>
            </AuthProvider>
            <div>
                <Router>
                    <AuthProvider>
                        <Switch>
                            <Route exact path="/" component={Home}/>
                            <Route exact path="/ContactUs" component={ContactUs}/>                            
                            <Route path="/forgot-password" component={ForgotPassword}/>
                            <Route component={NoMatch}/>
                        </Switch>
                    </AuthProvider>
                </Router>
            </div>
        </React.Fragment>
    )
}

What am I missing?

Any and all help/direction is appreciated.

score 3 · Answer 1 · answered May 21 '21 at 01:22

fml. apparently the .htaccess content the godaddy person gave me was incorrect...shocker.

They gave me

RewriteEngine On 
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} ^(www\.)?coolexample\.com
RewriteRule ^(.*)$ https://www.coolexample.com/$1 [R,L]

when it should have been this

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

got it from this. As the link says, it really is the most important information on the page.

godaddy cPanel React - new page showing 404

1 Answers1