Cannot GET / error - GET http://localhost:3000/ 404 (Not Found)

I am getting the "Cannot GET /" on my browser when using node and express.js. From the console I get: Failed to load resource: the server responded with a status of 404 (Not Found). The following code is for both the server and browser. I really need some help as I cannot understand what is wrong with this code. Bascially I am taking a nanodegree in front end development with Udacity and I am following the exercises. This exercise I couldn't make it work.

    Code for the server:
    /* Empty JS object to act as endpoint for all routes */
    projectData = {};

    /* Express to run server and routes */
    const express = require("express");

    /* Start up an instance of app */
    const app = express();

    /* Dependencies */
    const bodyParser = require("body-parser");
    /* Middleware*/
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());
    const cors = require("cors");
    app.use(cors());

    /* Initialize the main project folder*/
    app.use(express.static("website"));

    const port = 3000;
    /* Spin up the server*/
    const server = app.listen(port, listening);
    function listening() {
      // console.log(server);
      console.log(`running on localhost: ${port}`);
    }

    // GET route
    app.get("/all", sendData);

    function sendData(request, response) {
      response.send(projectData);
    }

    // POST route
    app.post("/add", callBack);

    function callBack(req, res) {
      res.send("POST received");
    }

    // POST an animal
    const data = [];

    app.post("/animal", addAnimal);

    function addAnimal(req, res) {
      data.push(req.body);
    }

   code for the browser
  /* Function to POST data */
  const postData = async (url = "", data = {}) => {
    console.log(data);
    const response = await fetch(url, {
      method: "POST", // *GET, POST, PUT, DELETE, etc.
      credentials: "same-origin", // include, *same-origin, omit
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data), // body data type must match "Content-Type" header
    });

    try {
      const newData = await response.json();
      // console.log(newData);
      return newData;
    } catch (error) {
      console.log("error", error);
      // appropriately handle the error
    }
  };

  //Call Function
  postData("addAnimal", { animal: "lion" });

The "Cannot GET /" error occurs when the server receives a request for a route that it doesn't have a defined handler for / exist.

Now you have this :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    // GET route
    app.get("/all", sendData);

    function sendData(request, response) {
      response.send(projectData);
    }

<!-- end snippet -->

Which means if you want to get all animal with the GET you have to send in "/all" not "addAnimal". And in your example code you have written it to do a POST not a GET.

The "addAnimal" is not even a route. Close one is "/animal". I think you are looking at the function names as you have a function called addAnimal instead of the routes names.

GET = "/all"
POST = "/add"
POST = "/animal"

And I'm not sure if you setup is correct. It probably works but I would have done something like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();
const port = 3000;

// Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(cors());
app.use(express.static("website"));

// Routes
const router = express.Router();

// GET route
router.get("/all", (req, res) => {
  res.send(projectData);
});

// POST route
router.post("/add", (req, res) => {
  res.send("POST received");
});

// POST an animal
const data = [];

router.post("/animal", (req, res) => {
  data.push(req.body);
});

// Mount the router
app.use(router);

// Start the server
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

<!-- end snippet -->

In my example the routes are defined using express.Router(). Expressjs Routing And then I removed the projectData as it's generally better to avoid using global variables in server-side code. And its much easier to read and follow along in the code.

So this will be :

GET /all: Retrieves and sends the projectData object as a response.

POST /add: Sends a simple "POST received" response.

POST /animal: Pushes the request body into the data array.

So the URL will be the following :

http://localhost:3000/all, http://localhost:3000/add, http://localhost:3000/animal.

This is how I would get all animals (GET):
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

fetch('/all')
  .then(response => response.json())
  .then(data => {
    // Handle the received data
    console.log(data);
  })
  .catch(error => {
    // Handle any errors
    console.error('Error:', error);
  });

<!-- end snippet -->

Or maybe you prefer it like this (POST) :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const postData = async (url = "", data = {}) => {
  console.log(data);
  const response = await fetch(url, {
    method: "POST",
    credentials: "same-origin",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  });

  try {
    const newData = await response.text();
    // Handle the response data
    console.log(newData);
    return newData;
  } catch (error) {
    // Handle any errors
    console.error("Error:", error);
  }
};

// Usage example
const exampleData = { example: "data" };
postData("/add", exampleData);

<!-- end snippet -->

Let me know if there's something I can further explain.

Update as you ask in the comment how to send back the one you are sending you can do this :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const postData = async (url = "", data = {}) => {
  const response = await fetch(url, {
    method: "POST",
    credentials: "same-origin",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  });

  try {
    const responseData = await response.json(); // Parse the response data as JSON
    console.log(responseData); // Display the received data
    return responseData;
  } catch (error) {
    console.error("Error:", error);
  }
};

const animalData = { animal: 'lion' };
postData("/animal", animalData);

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// POST an animal

router.post("/animal", (req, res) => {
  data.push(req.body);
  const animal = req.body; // Get the animal data from the request body
  res.send(animal); // Send the received animal data back as the response
});

<!-- end snippet -->

I usually think like this :

req = Request (What are the user requesting / sending)

res = Response (What's the answer to that request, what are we sending back)