404 errors after migration from Heroku to Netlify

Hello,

I just migrated a Nuxt.js application from Heroku to Netlify. Since Netlify doesn’t allow server side rendering I changed my application to be static. I managed to get the page up and running

https://dialogik.tv

Now when I navigate to a tool in the tools list, everything works fine. But when I open the tool in a new tab/window or navigate to that URL directly, I get a 404 error. (The fact that it works when opening in same tab is due to the internal Vue.js navigation routing system because the load the content internally and just change the URL)

Example: dialogikTV

Since I haven’t had this problem on Heroku, I guess this might be something with the Netlify tech stack. Do you have any ideas how I can solve this issue? Maybe it is just a missing .htaccess or something?

Thanks in advance, kind regards!
dialogik

Hiya and welcome!

Take a look at this guide [Support Guide] I’ve deployed my site but I still see "Page not found”

Most likely you’re just missing a _redirects entry from /* to /index.html!

1 Like

Since this is an SPA, you need a redirect rule to tell Netlify to never leave the root.

In _redirects file

/*                 /index.html

In netlify.toml file

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 301
  force = true

That, unfortunately, seems to kill my whole application. I guess because also *.js and *.css files are redirected to index.html. Any other ideas?

Hi, @dialogik. We have a support guide about this here:

The solution is to make the following rule (using a 200 status not a 301 status).

/*    /index.html   200

Note, that is a “plain 200” rule not a “200!” rule. Do not include the “!” in the rule.

If that doesn’t fix it or if there are other questions, please let us know.

Yeah, the status code 200 helped. Just for everyones information: I used a netlify.toml file (in repository root) instead of a _redirect file in my dist/ folder so I didn’t have to touch the nuxt generated folder after building.

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