Production redirect running 404 error on page refresh (Bolt.new) - netlify.toml

Support
, ,
1

Netlify newbie here.

Netlify domain: bulkazorg.netlify.app
Production domain: bulkaz.org

Issue: after deploying with Bolt.new, page refresh (other than the homepage) leads to 404 error.

Steps to reproduce: open BKCCI - Bulgarian-Kazakhstan Chamber of Commerce and Industry > refresh the page

Actions taken:
I have tried for hours editing both _redirects in the root, and editing the netlify.toml file. Here is my current toml file code:

# Netlify configuration file

# Build settings
[build]
  command = "npm run build"
  publish = "dist"
  environment = { NODE_VERSION = "20" }

# Handle client-side routing
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  force = true
  headers = { Cache-Control = "no-cache" }

# Global headers
[[headers]]
  for = "/*"
    [headers.values]
    Cache-Control = "public, max-age=0, must-revalidate"
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Methods = "GET, POST, PUT, DELETE, OPTIONS"
    Access-Control-Allow-Headers = "Content-Type, Authorization"

# Asset headers
[[headers]]
  for = "/assets/*"
    [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

Thank you in advance for your help!

2

@Sulitzer Is your netlify.toml file being detected?
Check your deploy log, it will indicate if it was and what configuration your build ran with.
The deploy log documentation is here:
https://docs.netlify.com/site-deploys/overview/#deploy-log

You should ensure your netlify.toml is in the right spot, the documentation for that is here:
https://docs.netlify.com/configure-builds/file-based-configuration/#file-location

3

@nathanmartin Nathan, thanks for your help so far. How can I ensure that the netlify.toml file is being detected? Should I look for it in the Deploy File Browser?

I have confirmed the file’s location is in the root folder, I’ve even added some dependency that checks if the file is there during the build.

Here is what I get from the deploy log:

12:44:45 PM: Unpacking archive
12:44:46 PM: Starting post processing
12:44:46 PM: Post processing - Forms
12:44:46 PM: Post processing - header rules
12:44:46 PM: Post processing - redirect rules
12:44:46 PM: Post processing done
12:44:46 PM: Section completed: postprocessing
12:44:49 PM: Site is live ✨

I have also added another /test redirect, which doesn’t work.

# Redirects
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  force = true
  headers = { Cache-Control = "no-cache" }

[[redirects]]
  from = "/test"
  to = "/"
  status = 200

Any ideas?

4

@Sulitzer Is that the full build log?

When you say “root folder” do you mean “root of the repository”? or “root of the publish directory”?

At this stage my guess is it may still be in the wrong spot.

A quick and simple test would be to change the build command in the netlify.toml to something nonsensical e.g. npm run nothing

If it runs that command (and obviously fails), you would know it saw the netlify.toml.

If it still runs npm run build then you know it’s not seeing the netlify.toml and likely getting the command from the Netlify UI Build Configuration.

If you can’t get the netlify.toml to work, you could always try the alternative _redirects format.
https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file

5

@nathanmartin

Is that the full build log?

You tell me, is there another more extensive build log in Netlify?

I mean “root of the repository” and not “root of the publish directory”.
From what I understand, the root of the publish directory must be the /dist folder in a standard Bolt.new web app.

When changed the build command to ‘npm run nothing’, it still runs ‘npm run build’. Where exactly is the Netlify UI Build configuration, is it a default settings? Here are all the settings I see:

image
image272×261 3.47 KB

The only place where I see configurable build settings are when I try to connect a repository for continuous deployment via Git, Bitbucket, etc. Is this something that you recommend in this case?

Why wouldn’t I get it to work, if there is a way, and what is the difference between the two? I’ve checked the article in the Netlify docs file, but it doesn’t explain the difference between the two approaches, it’s a technical article. So how can I make an informed decision about it? Please help.

Thank you in advance!

7

I’ll preface all this with, I don’t work for Netlify, I do not have any special access.

You tell me, you can see it within your account, I cannot.

This seems correct, I only asked because…
The “root of the repository” (specifically the Base directory) is correct for a netlify.toml
The “root of the publish directory” is correct for a _redirects file

See the documentation here (specifically the screenshot):
https://docs.netlify.com/configure-builds/overview/#build-settings

configure-builds-edit-build-settings-ui
configure-builds-edit-build-settings-ui1476×1396 60.6 KB

You may have a value set there, which is used when no netlify.toml is detected.
(Although if you created the site with Bolt, I’m unfamiliar with how it sets those values.)

I don’t work with AI, as such I’m a poor choice to provide recommendations for your workflow.

I can’t really say, but you may simply find it “too difficult” as you’re using AI and thus may not have a technical background. You may find it easier to use one approach over the other.

For the differences between the two ways to define redirects you can consult the documentation here:
https://docs.netlify.com/routing/redirects/

Yes, many things to do with development are “technical”.
To make an informed decision you can do research and “skill up”.
If you aren’t interested in doing that, you could ask another LLM for its opinion.

8

@nathanmartin Nathan, I finally managed to fix this using a _redirects in the public folder. :face_exhaling:

_redirects file content:
/* /index.html 200

I am still confused why it didn’t work with the netlify.toml. What I noticed is that during the build, Netlify constantly skipped the ‘Build’ step even after editing the netlify.toml file and there was no way to reset this process or refresh cache through the Netlify UI.

9

I can’t say for certain, as I have zero visibility, but it’s probably just wrong somehow.

If it’s named the right thing, in the right location, and in the right format, then I’d expect it to work, I’ve never seen it not work.

Whatever feature you were looking for, it probably does exist, I can’t direct you to it as I’m not entirely sure what you’re describing.

Glad you were able to get it sorted though with the _redirects file as I suggested, and best of luck on your future travels.

1 Like
10

What I noticed is that during the build, Netlify constantly skipped the ‘Build’ step

You’ve hit the nail on the head here - Bolt.new are currently creating deploys by uploading the already-built files, rather than using Netlify’s build API. This is similar to how drag & drop deploys are made in the Netlify UI.

This may be something that changes in future, and I’m sure the Bolt team would welcome your feedback on it!