Home
Support Forums

Direct links to SPA page don't work - the support docs are quite vague

Hi!

I’m having the exact problem as described here:

But the answer, and linked, support docs, are pretty vague. I’m working with NUXT and it would be very helpful to know where to create the file and if it is possible to include some logic. The reason is that I only use the SPA version on the preview branch, main is pure static (SPA only for Storyblok preview). Something like [context.preview.environment] that I use in netlify.toml would do the trick.

Any help is highly appreciated!

Hi @henrikhansson,

Which pages are you having this problem with? I am trying to reload various pages of your website and they all seem to load fine.

Do you mean something like this (when visiting /#/visuals directly or refreshing the page after navigating to it)?

Hi! All pages, they just seem to load fine since they pick up most of the index page (not the video).

For example: https://digital-creative-preview-aa2532.netlify.app/#/visuals

Reloaded it shows the index page but without the video
Navigate to it and it shows the actual page.

Directly and refreshing. Navigating to it works perfectly.

If I navigate to /#/about I see

But if I refresh this page, I see

I have not experienced such behaviour with my NuxtJS projects. Although I also don’t have a # in any of my URLs (not sure if that is a factor.)

Oh yeah, I see the issue.

I’m not sure how you’re rendering the page. Is there a reason why you can’t go full static for this branch as well?

The # is in the URL since it’s in SPA.

Yes, I need it to be in SPA since I use it for Storyblok preview mode. Would rather go full static but in this case I don’t have a choice.

You might need at catch-all redirect ie.

/*    /index.html    200

a la History pushstate and single-page apps

Yes, the docs and the original post I referred to says this, but the question is where? I tried to add a _redirects file to the root of my NUXT project but it has no effect.

A _redirects file needs to exist in the directory that is published, so you would put it into the static directory so it gets copied during build/generate.

Alternatively you can have a netlify.toml in your project root (you may already) and put the redirect rule into it instead.

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

Thank you, but unfortunately I can’t get it to work. I have tried both putting the code in netlify.toml and _redirects file in the static directory but it has no effect. The current build has the _redirects file.

I believe this has something to do with how Nuxt is handling routing and page generation login within the JS that it’s bundling. I’m not sure if it’s relying on server to be able to render page or something, but nothing looks off from our end. You only have an index.html and we’re serving it fine. We don’t know how your website is generating the pages internally.

You might get better answers from NuxtJS discussions, forums, etc. I do not have a a better answer to this.

Thank you for your reply. I will see if the NUXT community has a solution to this problem and report back if I find anything.

Instead of using SPA the solution is to use the NUXT preview mode.

To make it even more elegant you can set an environmental variable in netlify.toml

[context.preview.environment]
  SITE_ENV = "preview"

And in nuxt.config.js

  env: {
    isPreview: process.env.SITE_ENV === 'preview',
  },

And use it in preview.client.js

export default function ({ query, enablePreview }) {
    if (process.env.isPreview) {
        enablePreview()
    }
}

Hi, @henrikhansson. Thanks for taking the time to share your solution.

If someone does what to try the _redirects solution using Nuxt, the Nuxt documentation says that this file (_redirects or netlify.toml) should go into the “static directory”:

I also want to explain why we don’t document this in more detail in the public documentation at Netlify.

Netlify is static site generator (SSG) agnostic - meaning you can use any SSG you like at Netlify. We have no opinion about which SSG you use and we do not try to limit what can be used.

There are also literally about 200 different SSGs that can be used to build sites at Netlify and creating exact instructions for even the top twenty SSGs and then keeping all twenty sets of instructions up to date as those SSGs evolve and grow is a Sisyphean task at best. For this reason, if people have questions about this, we troubleshoot here in the support forums and allow this content to serve as that documentation.

Hopefully, if someone is web searching for “Netlify Nuxt SPA redirects” in the future they will find this forum topic and see both the solutions mentioned here. So, we use public docs for the general case and then the support forums to answer and “How do I do this with <insert SSG name here>?” questions.

1 Like