Conflict between /public/_redirects and netlify.toml

Support
1

Hello,

I’m having an issue with a Vue.js SPA where I have a _redirects file, under the public directory, with the following content:

/* /index.html 200

When I add a netlify.toml to load a serverless function, the redirect doesn’t work anymore.

I tried to add the redirect in the TOML file like so:

[[redirects]]
  from = "https://vue-and-supabase-boilerplate-demo.netlify.app"
  to = "https://vue-and-supabase-boilerplate-demo.netlify.app/index.html"
  status = 200
  force = true

It didn’t work.

If I remove the TOML file, the redirect works again.

What’s the catch?

Thanks.

2

As I understand it the rule in the _redirects file should be taking precedence, based on:

https://docs.netlify.com/routing/redirects/#rule-processing-order

The redirects engine will process the first matching rule it finds, reading from top to bottom. Rules in the _redirects file are always processed first, followed by rules in the Netlify configuration file.

To make it clearer for yourself, if I were you I’d put all the rules in one or the other.

If you’re trying to write the same _redirects rule in the netlify.toml, it’d be:

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

Which is shown in the documentation here if you click the netlify.toml file tab:
https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps

3

For some reason, it doesn’t work. I removed the /public/_redirects and add the redirect in the TOML file as described.

I see that there is a rule picked up, it doesn’t solve the pb of http 404.

4

What 404?
What URL are you having an issue with?

If the site is the one you originally linked, it seems to be working, e.g.
https://vue-and-supabase-boilerplate-demo.netlify.app/this/route/does/not/exist

image
image1558×181 62 KB

5

You see that it is working because I’ve reverted back to using public/_redirects solution.

When I had the netlify.toml and the rule defined into it (and deleted the _redirects file of course), any URL, as well as the base URL https://vue-and-supabase-boilerplate-demo.netlify.app/, didn’t work: I was getting the Netlify “Page doesn’t exist” page.

But, I’ve found the issue: I had this in the TOML file:

[build]
publish = "public"

The Vue app is published to dist… So problem solved.

It was a relica from another of my apps I copied the TOML file from.

Your participation helped me see the issue :slight_smile:

1 Like
6

Makes sense, you were accidentally changing which files you were publishing.

I’d not have been able to get that from the minimal details provided.