Whenever I refresh any page on my create-react-app
static build(npm run build
), I get a blank page.
When checking source, I can see that I got 200 OK from index.html
but the page content is just empty. the HTML contains nothing but imports and etc, no content.
However, a Hard-Refresh (CTRL+SHIFT+F5)
, everything refreshes and works as expected.
I tried various solutions found on the web, spent over 10 hours on this and I’m just lost. any ideas would be appericiated
Here’s my App.JS
function App() {
return (
<>
<Router>
<AccessibleNavigationAnnouncer/>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/app/*" component={Layout}/>
<Redirect exact from="/" to="/login"/>
</Switch>
</Router>
</>
)
}
package.json
...
"homepage": "https://blahblah.com/",
...
.htaccess
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
Here’s my serving logic (runs on Node)
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(9000);
P.S: The site is hosted on a shared hosting of Namecheap. if that matters somehow