my website is https://swiftdeskph.herokuapp.com/ when you access my site, it will show the component for a second then its empty
My observations/question:
- accessing any route not specified shows my Error404 component just fine.
- even if there is an error on my api call, it should return and display the error in component. Which is whats happening on my dev server.
- no error on heroku logs
- If i rewrite my server.js and just put
app.get("/", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
The whole app is working just fine BUT will only work if you start accessing from “/” route.
server.js
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
require("dotenv").config();
const app = express();
const PORT = process.env.PORT || 80;
const { MONGO_URI } = require("./config/keys");
const connection = mongoose.connection;
app.use(cors());
app.use(express.json());
mongoose.connect(MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true,
useFindAndModify: false,
});
connection.once("open", () => {
console.log("MongoDB database connection established successfully.");
});
if (process.env.NODE_ENV == "production") {
app.use(express.static("client/build"));
const path = require("path");
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
}
//ADDING OF ROUTES
const products = require("./routes/products");
const userInventory = require("./routes/userInventory");
const transactions = require(".//routes/transactions");
app.use("/api/products", products);
app.use("/api/user/inventory", userInventory);
app.use("/api/transactions", transactions);
app.listen(PORT, () => {
console.log(`Server is running on port: ${PORT}`);
});
App.js
import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import "./sass/App.scss";
import "bootstrap/dist/css/bootstrap.min.css";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
// COMPONENTS---------------------------------------
import Navbar from "./components/NavbarComponent";
import Footer from "./components/Footer";
import Dashboard from "./components/Dashboard/Dashboard";
import { Orders } from "./components/Orders/Orders";
import UserInventory from "./components/UserInventory/UserInventory";
import Error404 from "./components/Error404";
//Import fetch actions
import { fetchProducts } from "./redux/userInventory/inventoryActions";
import { fetchOrder } from "./redux/order/orderActions";
function App() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchOrder());
dispatch(fetchProducts());
}, []);
return (
<React.Fragment>
<Router>
<Navbar />
<div className="appContainer">
<Switch>
<Route path="/" exact component={Dashboard} />
<Route path="/orders" component={Orders} />
<Route path="/inventory" component={UserInventory} />
<Route path="*" component={Error404} />
</Switch>
</div>
</Router>
<Footer />
</React.Fragment>
);
}
export default App;
