I successfully managed to get my react-app running smoothly on my localhost server. However, when I attempted to deploy it on Heroku, I encountered a problem. Upon visiting the app address provided by Heroku, all I see is a blank page with none of the components rendered. I have attached my server.js and App.js below. Please let me know if there is any other information I can provide for troubleshooting. Could it be possible that I am incorrectly linking something causing the components not to be included in the index.html build, or could there be another issue at play?
import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import "./styles.css";
import Home from './Home';
import Locations from './Locations';
import ContactForm from './Contact';
import NoMatch from './NoMatch';
import AboutUs from './AboutUs';
import Menu from './Menu';
import { NavigationBar } from './components/NavBar';
function App() {
return (
<React.Fragment>
<NavigationBar />
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/aboutus" component={AboutUs} />
<Route path="/locations" component={Locations} />
<Route path="/contact" component={ContactForm} />
<Route path="/menu" component={Menu} />
<Route component={NoMatch} />
</Switch>
</Router>
</React.Fragment>
);
}
export default App;const express = require('express')
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(process.env.PORT || 5000)Any assistance would be greatly appreciated. You can view the deployed page by following this link: . If you feel like taking a look, perhaps it could shed some light on the situation. The only other potential issue I could think of is a misaligned file structure where the components are not being properly included.