Netlify functions 404 (not locally)

Support
1

I’m having the same issue. The Netlify functions work locally when running netlify dev, but are returning a 404 when deployed to Netlify. I’d welcome any guidance!

2

Hi @brad_frost, I’ve moved your post to its own thread so we can better support you.

Please can you provide some additional context to this. Your Netlify site URL, framework if you’re using one etc…

3

Thanks so much @kylesloper !

Sure thing: Here’s the URL: https://coldalbumdrumming.com/

It’s built using Eleventy with a little script.js to handle the client-side behavior.

I’ve got two Netlify functions:

  • getVotes which retrieves the votes to apply them to the albums
  • vote which captures the vote.

My local environment running netlify dev is functioning properly, but when I deploy it to the live website, I’m getting 404 errors on the Netlify functions.

In the build settings in Netlify, the Functions directory is set to netlify/functions

Any guidance would be appreciated!

4

Great design by the way!

Anyways, in the Netlify UI, can you see the functions and their logs?

5

@kylesloper Thank you!

Re: functions, here’s what I’m seeing: Album — Postimages

I’m not sure how to interpret this!

6

You’re welcome, I’m a big fan of your book

Ah okay, so Netlify isn’t finding your function directory during build. That’s why there aren’t any functions listed in the second image.

I haven’t used 11ty in years. Can you tell me if you’re somehow generating Netlify functions via 11ty itself or if you’ve written them yourself in the project.

Then we need to make sure the directory those functions are in locally is the one specified in either your netlify.toml config file or in the UI.

7

@kylesloper Thanks, I appreciate it!

Here’s how I have things set up: https://i.postimg.cc/ZRByBYnm/Screenshot-2025-02-03-at-6-08-53-PM.png

I have a .netlify directory in the root of my project, and I configured Eleventy to copy that as a pass through into the _site directory, which contains the built project.

I’ve tried seemingly every possible combination and still can’t get it. Here’s what I’ve tried:

  • Updating netlify.toml to point to _site/.netlify/functions
  • Updating the Functions path in the site config
  • I most recently changed .netlify to just netlify and that seemed to stop yelling at me during the build process, but it’s still returning a 404 on the frontend (script.js:2
    GET https://coldalbumdrumming.com/netlify/functions/getVotes 404 (Not Found))

I dunno! I’m kinda at a loss.

8

HI @brad_frost

Thanks for reaching out!

I do see your latest deploy here. Within that deploy I see that 2 functions have been deployed:

screenshot
screenshot1318×1080 86.8 KB

Going to the top of the Deploy log, you can find the function logs by clicking on the Function link here:

screenshot_2
screenshot_21478×576 53.6 KB

Going to the Function logs, I do see the functions, getVotes and vote.

Could you provide steps to replicate the issue with the 404s? If you could also clarify where you’re seeing the 404s (such as the Dev Tools) that’ll help with us investigating. Thanks!

Thanks @kylesloper for your help!

9

Hi @brad_frost
Visiting coldalbumdrumming.com/.netlify/functions/getVotes seems to work fine now. So whatever you have changed seems to have fixed the problem :slightly_smiling_face:

10

Thanks @Melvin !
It’s weird, I’m seeing the functions deployed in Netlify, but am still seeing 404 errors when visiting https://coldalbumdrumming.com/

Are you seeing the same on your end?

I just tried clearing the cache and redeploying the site, and am still seeing a 404 on page load: “GET https://coldalbumdrumming.com/netlify/functions/getVotes 404 (Not Found)”

Any suggestions?

11

@brad_frost,

Just noticed that @kylesloper provided URL is

http://coldalbumdrumming.com/.netlify/functions/getVotes note that is has /.netlify/ (with the . in front of netlify). When you go to http://coldalbumdrumming.com/.netlify/functions/getVotes , you’ll see an entry in the Function log.

The URL https://coldalbumdrumming.com/netlify/functions/getVotes that you mentioned @brad_frost, doesn’t have the . in front of netlify. When visiting that url I do see the 404 in the dev tools, but I don’t see an entry in the Function log.

I’m thinking the issue is path related. :thinking:

1 Like
12

@Melvin Yeah, I’ve tried changing things around! I had .netlify initially but that was throwing errors in the build logs. So I renamed to netlify which resolved those errors. Both .netlify and netlify are returning 404s. I’m puzzled!

14

Hi again @brad_frost :slightly_smiling_face:

FYI, the functions will always be at .netlify/ as this is a special path handled by Netlify.

When visiting https://coldalbumdrumming.com/.netlify/functions/getVotes, I successfully get a response from a function. This is the correct path to your Netlify function

Can you ensure that in your codebase, you are fetching from this endpoint /.netlify/functions/getVotes as there really shouldn’t be any ongoing 404’s from here.

Thanks

15

Hi there @kylesloper !

Ah, interesting. That’s good to know that the /.netlify path is a constant.

I’m not seeing a 404 anymore on getVotes but still am having two issues:

  1. https://coldalbumdrumming.com/.netlify/functions/vote is returning a “Method not allowed” message
  2. The getVotes function isn’t returning the contents of votes.json, which is in the same directory as Netlify functions. Here’s what that code is doing:
exports.handler = async function(event, context) {
    const fs = require('fs');
    const path = require('path');
    
    try {
        const votesPath = path.join(__dirname, 'votes.json');
        let votes = {};
        
        if (fs.existsSync(votesPath)) {
            votes = JSON.parse(fs.readFileSync(votesPath, 'utf8'));
        }
        
        console.log('whatever');
        console.log(votes);

        return {
            statusCode: 200,
            body: JSON.stringify({ votes })
        };
    } catch (error) {
        return {
            statusCode: 500,
            body: JSON.stringify({ error: 'Failed to fetch votes' })
        };
    }
};

Forgive my density! But any help would be welcome.

16

Hi,

  1. I assume vote will be a POST method endpoint? This is standard practise for restful API endpoints that create data.

  2. Have you “included” the votes.json file in your netlify.toml?
    Here is a guide: How to Include Files in Netlify Serverless Functions

  3. Maybe I’m jumping the gun here, but I’m assuming vote updates the vote.json file and getVote returns the file. If this is what you are trying to do, this will not work on Netlify.

Why it won't work

Deploys are atomic. Read more: What are Atomic deploys? Immutable deploys? Learn here!

You can read files in the filesystem but you cannot mutate them. You’ll have to redeploy an updated file to see the changes made on Netlify.

If you are looking for a simple DB storage, then Netlify offers Blobs which would work very well in your use case.

17

@kylesloper Ah! Thank you so much for this. Yes, you’re 100% correct about what I’m trying to accomplish. Thanks so much for directing me to Blobs. Going to dig into that little adventure next! I appreciate all of your help. Thanks!

1 Like