netlify Deployment issue: netlify.toml settings for SPA

Question

Disclaimer: I would ask this using either a.) some sort of support system on Netlify, b.) on a Netlify live chat session or c.) via their support community but a.) they don't let you, b.) they don't have one and c.) you can't currently create accounts or authorize from Netlify itself. (Seems like as an organisation, they don't really understand what would really nudge you into making you pay for a service).

Anyways, I am having an issue with deploying an Vue.js SPA with VueRouter via a netlify.toml configuration. The issue is, all internal routing is not being handled by the SPA. My solution has always been to stick a netlify.toml config file in the root of the repository that I am deploying from, with the following:

# The following redirect is intended for use with most SPAs that handle routing internally.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Yet, every internal route I visit gives me:

The exact same repo, but deployed on my personal plan 4 months ago (which has the same netlify.toml config in the same location) works fine. The application is also working on the current deployment branch locally. The routing is not broken. Has anyone else suffered with this inconsistent approach to redirects with Netlify?

I tried creating redirects using the netlify.toml and it worked for me, is there something you're doing differently with Vue Router? Here's an example repo for reference: github.com/shortdiv/checking-redirects — shortdiv
– shortdiv, Commented Dec 12, 2019 at 20:02
This behavior can also be observed if Netlify doesn't like something in toml file. Usually there'll be an error almost at the end of the deployment log that reads Invalid TOML configuration format: ... (error). It causes the rest of the toml rules to be ignored. — Diego Zacarias
– Diego Zacarias, Commented Oct 15, 2020 at 17:37

Micheal J. Roberts · Accepted Answer · 2019-12-12 16:06:25Z

4

So, my specific fix was to do the following:

Add a _redirects file to the public directory of my Vue application, then:

# The following redirect is intended for use with most SPAs that handle routing internally.
/*    /index.html   200

Inside that file.

So for me, netlify.toml configuration for redirects is stil broken.

answered Dec 12, 2019 at 16:06

Micheal J. Roberts

4,2606 gold badges54 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rethab Over a year ago

public directory is the key here. Don't repeat my mistake and put it into the root folder!

Pekastel Over a year ago

Worked like a charm. Netlify guys please fix this weird behaviour, is clearly a bug!

arnedebree · Accepted Answer · 2019-12-17 08:18:54Z

2

I am seeing exactly this behaviour as well. The netlify.toml contains:

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

But doesn't work. The deployment summary even shows that netlify didn't pick up the redirect config at all:

No redirect rules processed

This deploy did not include any redirect rules. Learn more about redirects.

answered Dec 17, 2019 at 8:18

arnedebree

516 bronze badges

4 Comments

Micheal J. Roberts Over a year ago

Hey, very odd - please check my answer, it helped me! :)

arnedebree Over a year ago

Yes, applied that same workaround to get it working. But the weird thing is that I have another site where the netlify.toml approach does work for specifying the SPA style redirect to index.html...

arnedebree Over a year ago

@WindUpLordVexxos after digging around it turned out for us to be the result of writing netlify.json ourselves into the publish directory. We did that to dump metadata of the build context into the deployed site (build time / nr etc). This apparently conflicted with the config in netlify.toml. The fix for us was to use a different filename as output for that meta data.

Micheal J. Roberts Over a year ago

I only have netlify.toml

Abhishek Saini · Accepted Answer · 2022-12-29 17:38:43Z

1

I just faced this issue like 2hrs ago from now, but the netlify.toml is working fine for me. Make sure you have set the public directory in your netlify setting to '/' (exactly where your netlifly.toml resides) instead of blank or anything else.

answered Dec 29, 2022 at 17:38

Abhishek Saini

216 bronze badges

Comments

cloakedninjas · Accepted Answer · 2025-03-26 07:24:32Z

1

I'll re-iterate the answer from Abhishek. Nothing was working for me until I added / to Base directory

This is the field that I had to update:

(this is for a default Vite project structure)

edited Mar 26 at 7:24

answered Mar 26 at 7:19

cloakedninjas

4,2542 gold badges33 silver badges46 bronze badges

Collectives™ on Stack Overflow

netlify Deployment issue: netlify.toml settings for SPA

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related