Hello everyone, I’m building a website using Bolt and integrating Stripe Checkout for payments.
While testing in Netlify’s environment, the payment process works, and Stripe’s test card successfully completes transactions. However, instead of redirecting users to view their tribute, I keep getting a 404 page not found error.
Netlify support mentioned that this happens with SPAs (React, Vue, Angular, etc.) because they rely on client-side routing, and direct URL access to routes (e.g., /tribute
) makes Netlify look for files that don’t physically exist.
Their suggested fix was to add a redirect rule so Netlify always serves index.html
for all routes. They provided two solutions: adding a _redirects
file by adding the code (/* /index.html 200) or modifying netlify.toml
. ([[redirects]]
from = "/"
to = “/index.html”
status = 200)*
I tried these fixes, but the issue persists. Has anyone else encountered this problem or found a reliable solution? Any help would be greatly appreciated!
This is my site My website
@WOb77773 The issue is as you’ve already diagnosed, (you need an appropriate rewrite).
This is easy to prove because you have the page /create
If you go to the root, and navigate to it, it works.
If you go directly to it, via URL, or refresh, you get the 404
, e.g.
https://mybeautifulmomcom.netlify.app/create
The fix is also as you’ve already diagnosed.
The fact the rewrite didn’t work will be because you made some other mistake when trying.
Perhaps the _redirects
or netlify.toml
file being in the wrong location?
If using a _redirects
file, you need to ensure it ends up in your Publish directory after build.
If using the netlify.toml
it should be in your Base directory.
Check your build log, it will give an indication of if it found rewrites/redirects (and how many it found).
Hey @nathanmartin , thank you for responding to my post.
I looked into what you suggested, but I’m still having trouble. Right now, I have the _redirects
file in my public
directory. I originally had two _redirects
files—one in dist
and one in public
—but after removing the one in dist
, the issue still persists.
I also checked my netlify.toml
file and saw that it was trying to add redirect rules as well. To avoid conflicts, I removed those lines of code and redeployed the site, but the problem remains.
One thing I find strange is that when I initially deploy the site, Netlify does detect the redirect rule, but the site doesn’t fully load. Specifically, when I go to the checkout page, the checkout looks different than usual. I’m not sure if this is related, but it’s something I noticed. To fix the checkout issue I clear cache and redeploy the site but when the site redeploys, it doesn’t detect any redirect rules.
Would appreciate any further guidance! Thanks again. (btw it won’t let me upload 2 pictures but after I clear the cache, all build settings would be marked as complete instead of skipped. I found that when they are skipped, the checkout won’t load properly. But after doing this, netlify doesn’t detect any redirects.)
@WOb77773 We’re obviously in different time zones, but it looks like you got it sorted out.
If I visit your /create
page directly now, it loads correctly.
While it sounds like you had a bit of a mess, it is possible to have a _redirects
file and netlify.toml
.
If you do, the rules apply according to the Rule processing order outlined in the documentation here:
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.