netlify

netlify Deployment issue: netlify.toml settings for SPA


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:

enter image description here

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?


Solution

  • So, my specific fix was to do the following:

    1. 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.