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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…