Vite may be hijacking my api URLs in a react SPA

Support
,
1

I’m trying to call local functions using netlify dev in a new vite/react project. If I invoke from the command line I get the correct result. But if I try to fetch from react I get the projects’ index.html file. Here’s my netlify.toml file:

[[redirects]]
  from = "/api/*"
  to = "/netlify/functions/:splat"
  status = 200
  force = true

[[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200


[dev]
  port = 8895
  targetPort = 3005
  autoLaunch = true

I talked to the netlify bot and it came up with this response:

"Based on the information provided, it seems like there might be a conflict between Vite’s development server and Netlify Dev’s handling of redirects.

When you run netlify dev, it starts up its own server and also starts your project’s server (in this case, Vite). It then proxies requests between the two. However, Vite also has its own handling of routes and may be intercepting the requests before they get to Netlify Dev’s redirect rules.

Here are a few things you can try:

  1. Check your Vite configuration: Ensure that Vite is not set up to handle routes starting with /api/. If it is, it might be intercepting these requests and serving index.htmlinstead.
  2. Use absolute URLs in development: Instead of using relative URLs like /api/function-name, try using the absolute URL to your function endpoint when in development. For example, if Netlify Dev is running on port 8888, you would call your function at http://localhost:8888/.netlify/functions/function-name.
  3. Check your function’s setup: Make sure your function is correctly set up to handle requests. If there’s an error in your function, it might result in index.html being served instead.

If none of these solutions work, you might want to consider reaching out to Netlify’s support or community forum with specific details about your setup for more targeted assistance."

None of those solutions work. Here’s my vite config file:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3005,
  },
  resolve: {
    alias: {
      "@": "/src",
    },
  },
});

Any ideas on how to get my local dev functions working?

2

A little more detail on this problem. When I call the fetch from react, netlify dev logs this to the console:

Rewrote URL to /netlify/functions/new-account

However, I have a console.log statement at the top of the new-account function and that never gets logged.

Thanks to anyone who has any clue on this one!

3

You forgot . before netlify. It’s supposed to be /.netlify/

4

More details!

I spun up a fresh site. Vite + React + Netlify via git deploy. Created a hello world function and added netlify toml as so:

[[redirects]]
  from = "/api/*"
  to = "/netlify/functions/:splat"
  status = 200
  force = true
5

I will attempt this. However, I have the site set up to use /netlify/functions, without the leading dot. The reason for this is that netlify puts a lot of stuff in .netlify that I don’t want to check into my repo. So I have to update the ignore file. It gets tedious. I was trying to avoid this.

6

The path for Functions is /.netlify: Get started with functions | Netlify Docs. You don’t have to add your .netlify folder to your repo.