I'm trying to deploy a CRUD todo-list app to Heroku. I'm using React, NodeJS and the Postgress Addon from heroku. I dind't get any error during deployment, however it seems the front-end is not connected with the back-end. When I try to add a new "todo" I get the next message (also the app fails to fetch entries from the DB):
index.js
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;
//middleware
app.use(cors());
app.use(express.json()); // => allows us to access the req.body
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//
//get all Todos
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);
}
});
//create a todo
app.post("/todos", async (req, res) => {
try {
console.log(req.body);
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);
}
});
//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.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "client/build/index.html"));
});
app.listen(PORT, () => {
console.log(`Server is starting on port ${PORT}`);
});
db.js
const Pool = require("pg").Pool;
require("dotenv").config();
const devConfig = `postgresql://${process.env.PG_USER}:${process.env.PG_PASSWORD}@${process.env.PG_HOST}:${process.env.PG_PORT}/${process.env.PG_DATABASE}`;
const proConfig = process.env.DATABASE_URL; //heroku addons
const pool = new Pool({
connectionString:
process.env.NODE_ENV === "production" ? proConfig : devConfig,
});
module.exports = pool;
package.json (root dir)
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"node": "10.14.2",
"npm": "6.14.2"
},
"scripts": {
"start": "node index.js",
"heroku-postbuild": "cd client && npm install && npm run build"
},
"author": "henry",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"pg": "^7.18.2"
}
}
package.json(client)
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
}
I am using the code from the following git-repository: https://github.com/l0609890/pern-deploy-tutorial. And following the next instructions (I think you can skip the video to min 34:00): https://www.youtube.com/watch?v=ZJxUOOND5_A
THANK YOU SO MUCH!
