node.js - Console returning an error when I try deploying my React TODO-LIST Application on port server

Question

I created a Todo-list application with create-react-app & the PERN Stack. I worked on it for a while and I was done and ready to deploy it on Heroku. Everything seemed to be going fine, until I tried deploying the App on my server port then my browser console started returning an

-- ERROR

GET http://localhost:5000/TODO-LIST/static/js/2.de8305cb.chunk.js net::ERR_ABORTED 404 (Not Found)
localhost/:1 Refused to apply style from 'http://localhost:5000/TODO-LIST/static/css/main.8c8b27cf.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
2:formatted:1 GET http://localhost:5000/TODO-LIST/static/js/2.de8305cb.chunk.js net::ERR_ABORTED 404 (Not Found)
:5000/TODO-LIST/manifest.json:1 GET http://localhost:5000/TODO-LIST/manifest.json 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error

Prior to this I had added a new favicon.ico logo to the React app and it executed perfectly on the react server without returning any errors. Please I need help with this bug its making me create a mess with some of my good code and I do not want to keep going on in this viscous cycle.

Here's a complete breakdown of my Serverside Code---

const express = require("express");
const app = express();
const cors = require("cors");
const pool = require("./db");
const path = require("path");
const PORT = process.env.PORT || 5000;

// process.env.PORT
// process.env.NODE_ENV => production or undefined

// middleware
app.use(cors());
app.use(express.json());
// allows us to req.body ^^^

app.use(express.static(path.join(__dirname, "client/build")));


if (process.env.NODE_ENV === "production") { 
// server static content 
    // npm run build
    app.use(express.static(path.join(__dirname, 'client/build')));
}

console.log(__dirname);
console.log(path.join(__dirname, 'client/build'));

// ROUTES //

// CREATE A TODO
app.post ("/todos", async(req,res) => {
 try {
    const { description } = req.body;
    const newTodo = await pool.query("INSERT INTO todo (description) VALUES($1) RETURNING *",
    [description]
    );

    res.json(newTodo.rows[0]);
 } catch (err) {
     console.error(err.message);
 }
});

// GET ALL TODO'S

app.get ("/todos", async(req,res) => {
try {
    const allTodos = await pool.query("SELECT * FROM todo");
    res.json(allTodos.rows)
} catch (err) {
    console.error(err.message);
}
});

// GET A TODO

app.get ("/todos/:id", async(req,res) => {
try {
    const { id } = req.params;
    const todo = await pool.query("SELECT * FROM todo WHERE todo_id = $1", [
        id
    ]);
    res.json(todo.rows[0])
} catch (err) {
    console.error(err.message);
}
});

// UPDATE A TODO

app.put("/todos/:id", async (req,res) => {
try {
    const { id } = req.params;
    const { description } = req.body;
    const updateTodo = await pool.query(
    "UPDATE todo SET description = $1 WHERE todo_id = $2", 
    [description, id]
    );

    res.json("Todo was Updated!");
} catch (err) {
 console.error(err.message);   
}
})


// DELETE A TODO

app.delete("/todos/:id", async (req,res) => {
    try {
        const { id } = req.params;
        const deleteTodo = await pool.query("DELETE FROM todo WHERE todo_id = $1", [
            id
        ]);
        res.json("Todo was Deleted!"); 
    } catch (err) {
        console.error(err.message);
    }
})


app.listen(PORT, ()=>{
    console.log(`server has started on port ${PORT}`);
})

Please Help!!!!!

I actually think the problem is with this piece of code

app.use(express.static(path.join(__dirname, "client/build")));

but I don't know what is wrong with the code, I changed it to back quote instead of the double quote but still it gives me the same error.

question from:https://stackoverflow.com/questions/66056597/console-returning-an-error-when-i-try-deploying-my-react-todo-list-application-o

Answer 1

Waitting for answers