Setup Netlify serverless functions on local environment

Running Netlify Functions locally can fail silently if the functions directory isn’t explicitly configured. The platform documentation mentions this, but many guides and examples omit it - leading to confusing discrepancies between local and hosted behavior.

[functions]
  directory = "functions"

That's it.

So how would that work in a vite-react project?

Step 1. Install the Netlify CLI first.

npm install netlify-cli -g

Step 2. Create your project and install the dependencies.

npm create vite@latest react-netlify -- --template react
cd react-netlify
npm install
npm install axios

Step 3. Create a new file called netlify.toml in the root of your project. Create a new folder called functions and inside it a new folder called hello. In that new folder create a hello.mjs. Your project structure should look like this:

react-netlify/
├── functions/  
│   ├── hello/  
│      ├── hello.mjs  
├── src/  
├── netlify.toml   
├── index.html
etc..

Step 4. The magic lines of code. Inside netlify.toml add:

[functions]
  directory = "functions"

Step 5. Test

Create a new function for testing:

export async function handler(event, context) {
  const data = "Hello, World!"
  return {
    statusCode: 200,
    body: JSON.stringify({ message: data }),
  };
}

Call it in the react-app:

  const [helloWorld, setHelloWorld] = useState("");
  const callNetlifyFunction = async () => {
    try {
      const res = await axios.get("/.netlify/functions/hello");
      setHelloWorld(res.data.message);
    } catch (error) {
      console.error("Error calling Netlify function:", error);
      setHelloWorld("Error fetching data");
    }
  };

Render it:

  <button onClick={callNetlifyFunction}>Call Function</button>
  <h1>{helloWorld}</h1>

Step 6. Run the Netlify server.

netlify dev

That's all folks.