Starter boilerplate for nuxt and netlify-cms doesn't work when run as a local static site

Hey guys! I’m very new to both netlify-cms and nuxt (but not to vuejs)

I wanted to try out nuxt with netlify-cms, so I deployed the starter nuxt.js boilerplate from here: Start with a Template | Netlify CMS | Open-Source Content Management System

It created a github repository that was automatically deployed to netlify (GitHub - maxmarcon/cbe). All good.

I built and started the site locally in dev mode, and I added a couple of blog posts. I can see the blog posts both on my local site in dev mode and on the deployed site, which is accessible here:

But I observed a bug when deploying the local site as a static site:

npx nuxt generate -t static
npx nuxt start -t static

when I open the local site and I click on the “Blog” tab, I see the 2 blog posts that I created.

However, if I reload the page http://localhost:3000/blog (the url of the blog tab), I see this:

No blog posts as you can see.

Everything works fine if I start the local page in dev or server mode.

I find this behavior all the more bizarre because the version deployed on netlify is also a static site (it’s netlify after all), but the reload of the blog page works fine there.

I dug around quite a bit trying to find the reason behind this problem, but with no sucess.

I hope some of the more expert netlify-cms and nuxt users can help me out here.

Here is the output of my npx nuxt generate -t static command.

Thanks!
Max

It works just fine for me. However, I used npm run dev. The posts are visible when clicked on Blog tab, after a refresh and when manually entering the URL.

Thanks for your answer!

As I mentioned, everything works fine for me as well in dev or server-side rendered mode. The problem arises only when I run in statically rendered mode npx nuxt generate -t static && npx nuxt start -t static.
Try that one out if you can.

Just did npm run generate followed by npm run start and that runs fine too.

Great! But why don’t you try to do what I did? :slight_smile:

npx nuxt generate -t static && npx nuxt start -t static

Again, the problem appears when you are running the site in full static mode

Mainly because I don’t have or use npx. But, if the problem is so so specific, maybe (just maybe), it’s not so important.

I’d give your command a go too.

So the problem seems to be that Nuxt is generating the page at /blog.html instead of /blog/. You can try navigating to localhost:3000/blog.html and see that the page loads fine. /blog/ doesn’t have have index.html to serve the content from, thus the error probably.

If you know how to configure it to render the page at /blog/ instead of /blog.html, I guess that would fix the issue. Meanwhile, I’ll keep looking.

Thank you! That was a very very helpful insight :+1:

If I set generate.subFolders: true in the config I do indeed get the /blog/index.html page, which correctly shows the blog posts upon reload. However, reloading from /blog still doesn’t show the blog posts (apparently is not triggering /blog/index.html ?)

I would push back on the problem being too specific: full static mode is the mode that the website deployed on netlify will be running on, so there is value in my opinion in being able to try out the same configuration locally. Dev mode uses server-side rendering which is not what happens when you deploy your blog on netlify.

It would be interesting to know why the static version of the site deployed on netlify doesn’t exhibit these issues.

Yeah, this is why I thought the issue was specific, since it worked when deployed and in the dev servers of the previous commands. But I saw the issue with your command, so got what you meant. Apologies for the confusion.

I guess, you can achieve that using redirects?

Yes redirect is the key. I guess the netlify webserver must have an internal redirect to index.html or blog.html if it doesn’t find the document you are looking for.

And I guess the local nuxt start server doesn’t, which is weird. In fact, if I serve the content under /dist with another local webserver (and subFolders=true), I get the desired behavior.

In my opinion, generate.subFolders=false should be removed from the config.

Thank you for you help!