api help, please?

Hello, beginner developer here. I'm trying to set up a way so I can manage a database for my html website using a node.js file. I tried the steps specified in https://github.com/paambaati/neon-js-sdk.

And I've tried to make it like the simplest test case ever, just printing if it receives the request. Heres whats happening:

Failed to load resource: the server responded with a status of 404 (Not Found)

Failed to load resource: the server responded with a status of 404 (Not Found)

Here is the relevant part of my website.html, which im using live server to run. I run "node server.js" in the terminal, then start the website.html using live server.

    <script>
        async function loadData(resource) {
            try {
                const response = await fetch(`/api/${resource}`);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                console.log("HHH:", data);
                const element = document.getElementById(`${resource}-container`);
                element.innerHTML = data.map(item => `<p>${item.name}</p>`).join('');
            } catch (error) {
                console.error("Failed to fetch data:", error);
                // Handle the error appropriately in your UI
            }
        }
        
        // Example of loading different types of data
        loadData('projects'); // Or 'users', 'tasks', etc.
    </script>

    <script>
        async function loadData(resource) {
            try {
                const response = await fetch(`/api/${resource}`);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                console.log("HHH:", data);
                const element = document.getElementById(`${resource}-container`);
                element.innerHTML = data.map(item => `<p>${item.name}</p>`).join('');
            } catch (error) {
                console.error("Failed to fetch data:", error);
                // Handle the error appropriately in your UI
            }
        }
        
        // Example of loading different types of data
        loadData('projects'); // Or 'users', 'tasks', etc.
    </script>

    <script>
        async function loadData(resource) {
            try {
                const response = await fetch(`/api/${resource}`);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                console.log("HHH:", data);
                const element = document.getElementById(`${resource}-container`);
                element.innerHTML = data.map(item => `<p>${item.name}</p>`).join('');
            } catch (error) {
                console.error("Failed to fetch data:", error);
                // Handle the error appropriately in your UI
            }
        }
        
        // Example of loading different types of data
        loadData('projects'); // Or 'users', 'tasks', etc.
    </script>

    <script>
        async function loadData(resource) {
            try {
                const response = await fetch(`/api/${resource}`);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                console.log("HHH:", data);
                const element = document.getElementById(`${resource}-container`);
                element.innerHTML = data.map(item => `<p>${item.name}</p>`).join('');
            } catch (error) {
                console.error("Failed to fetch data:", error);
                // Handle the error appropriately in your UI
            }
        }
        
        // Example of loading different types of data
        loadData('projects'); // Or 'users', 'tasks', etc.
    </script>

and here is my server side node.js code in its totality: (server.js)
Notice that I commented out a bunch of stuff for testing purposes

require('dotenv').config(); // Ensure environment variables are loaded
const express = require('express');
const { NeonClient } = require('neon-sdk');

// Initialize NeonClient with the environment variable
const neonClient = new NeonClient({ TOKEN: process.env.KEY });

const app = express();

// Uncomment below if you're facing cross-origin issues
const cors = require('cors');
app.use(cors());

app.get('/api/:resource', async (req, res) => {
    const resource = req.params.resource; // Dynamically get the resource from the URL

    console.log(`Received request for resource: ${resource}`);
    // Below lines are commented out to focus on logging the request.
    // This simplifies the route to avoid errors and make sure it logs the request.

    // try {
    //     const data = await neonClient.project.listProjects();
    //     console.log("Data:", data);
    //     // Check if the neonClient has a method for the requested resource and it can list items
    //     // if (neonClient[resource] && typeof neonClient[resource].listProjects === 'function') {
    //     //     const data = await neonClient[resource].listProjects();
    //     //     console.log("Data:", data);
    //     //     res.json(data);
    //     // } else {
    //     //     // If the method does not exist or cannot list items, respond with 404
    //     //     res.status(404).json({ message: 'Resource not found' });
    //     // }
    // } catch (error) {
    //     console.error(`Error fetching resource: ${resource}`, error);
    //     res.status(500).json({ message: 'Error fetching resource' });
    // }

    // For now, just send back a simple response
    res.send(`Request for ${resource} received`);
});


app.listen(3000, () => console.log('Server running on http://localhost:3000'));

require('dotenv').config(); // Ensure environment variables are loaded
const express = require('express');
const { NeonClient } = require('neon-sdk');

// Initialize NeonClient with the environment variable
const neonClient = new NeonClient({ TOKEN: process.env.KEY });

const app = express();

// Uncomment below if you're facing cross-origin issues
const cors = require('cors');
app.use(cors());

app.get('/api/:resource', async (req, res) => {
    const resource = req.params.resource; // Dynamically get the resource from the URL

    console.log(`Received request for resource: ${resource}`);
    // Below lines are commented out to focus on logging the request.
    // This simplifies the route to avoid errors and make sure it logs the request.

    // try {
    //     const data = await neonClient.project.listProjects();
    //     console.log("Data:", data);
    //     // Check if the neonClient has a method for the requested resource and it can list items
    //     // if (neonClient[resource] && typeof neonClient[resource].listProjects === 'function') {
    //     //     const data = await neonClient[resource].listProjects();
    //     //     console.log("Data:", data);
    //     //     res.json(data);
    //     // } else {
    //     //     // If the method does not exist or cannot list items, respond with 404
    //     //     res.status(404).json({ message: 'Resource not found' });
    //     // }
    // } catch (error) {
    //     console.error(`Error fetching resource: ${resource}`, error);
    //     res.status(500).json({ message: 'Error fetching resource' });
    // }

    // For now, just send back a simple response
    res.send(`Request for ${resource} received`);
});


app.listen(3000, () => console.log('Server running on http://localhost:3000'));

require('dotenv').config(); // Ensure environment variables are loaded
const express = require('express');
const { NeonClient } = require('neon-sdk');

// Initialize NeonClient with the environment variable
const neonClient = new NeonClient({ TOKEN: process.env.KEY });

const app = express();

// Uncomment below if you're facing cross-origin issues
const cors = require('cors');
app.use(cors());

app.get('/api/:resource', async (req, res) => {
    const resource = req.params.resource; // Dynamically get the resource from the URL

    console.log(`Received request for resource: ${resource}`);
    // Below lines are commented out to focus on logging the request.
    // This simplifies the route to avoid errors and make sure it logs the request.

    // try {
    //     const data = await neonClient.project.listProjects();
    //     console.log("Data:", data);
    //     // Check if the neonClient has a method for the requested resource and it can list items
    //     // if (neonClient[resource] && typeof neonClient[resource].listProjects === 'function') {
    //     //     const data = await neonClient[resource].listProjects();
    //     //     console.log("Data:", data);
    //     //     res.json(data);
    //     // } else {
    //     //     // If the method does not exist or cannot list items, respond with 404
    //     //     res.status(404).json({ message: 'Resource not found' });
    //     // }
    // } catch (error) {
    //     console.error(`Error fetching resource: ${resource}`, error);
    //     res.status(500).json({ message: 'Error fetching resource' });
    // }

    // For now, just send back a simple response
    res.send(`Request for ${resource} received`);
});


app.listen(3000, () => console.log('Server running on http://localhost:3000'));

require('dotenv').config(); // Ensure environment variables are loaded
const express = require('express');
const { NeonClient } = require('neon-sdk');

// Initialize NeonClient with the environment variable
const neonClient = new NeonClient({ TOKEN: process.env.KEY });

const app = express();

// Uncomment below if you're facing cross-origin issues
const cors = require('cors');
app.use(cors());

app.get('/api/:resource', async (req, res) => {
    const resource = req.params.resource; // Dynamically get the resource from the URL

    console.log(`Received request for resource: ${resource}`);
    // Below lines are commented out to focus on logging the request.
    // This simplifies the route to avoid errors and make sure it logs the request.

    // try {
    //     const data = await neonClient.project.listProjects();
    //     console.log("Data:", data);
    //     // Check if the neonClient has a method for the requested resource and it can list items
    //     // if (neonClient[resource] && typeof neonClient[resource].listProjects === 'function') {
    //     //     const data = await neonClient[resource].listProjects();
    //     //     console.log("Data:", data);
    //     //     res.json(data);
    //     // } else {
    //     //     // If the method does not exist or cannot list items, respond with 404
    //     //     res.status(404).json({ message: 'Resource not found' });
    //     // }
    // } catch (error) {
    //     console.error(`Error fetching resource: ${resource}`, error);
    //     res.status(500).json({ message: 'Error fetching resource' });
    // }

    // For now, just send back a simple response
    res.send(`Request for ${resource} received`);
});


app.listen(3000, () => console.log('Server running on http://localhost:3000'));

I'm new to SQL in general. Please let me know how to fix this, or alternatively, i would really appreciate some easy to understand instructions to how to call upon and/or change the neon database i created, say whenever an user clicks a specific thing on my html website or loads it (the latter of which is what I'm trying to do right now).

I've also used a little typescript in the past, if using that would make it easier, let me know! I'm just not too experience at understanding documentation :(

If you think using neon is too complicated for someone stating with SQL, let me know as well. Thank you!

api help, please?

Similar Threads

Similar Threads

Similar Threads