Nuxt.js static app is loading indefinitely

Question

I just finished a Nuxt.js project, and I want to deploy it on a web server. So, I executed the command nuxt generate to have a static app. Before this, everything was working perfectly, but now nothing is working : the page is loading indefinitely with a rotating black and gray round in the center of the page.
Here is a picture

EDIT:
I am hosting my app on OVHcloud, and here is a public repo of my app : https://github.com/maximehamou/public.mh-info.fr.

Here is my nuxt.config.js

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,
  target: "static",

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "Accueil | MH info",
    htmlAttrs: {
      lang: "fr",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    script: [{ src: "https://kit.fontawesome.com/048c7a73f1.js/" }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ["./css/general.css"],

  server: {
    port: 4000,
  },
};

Here is my package.json

{
  "name": "mh-info.fr",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "sass": "sass -w scss:css"
  },
  "dependencies": {
    "buttercms": "^1.2.9",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "sass": "^1.54.9",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  }
}

Usually, it's safer to have a CI flow in place initially, then start coding because it will make the errors easier to debug (because of the incremental approach). So yeah, we will need quite several things here: `nuxt.config.js`, `package.json`, the place you're hosting your app on, possibly a public github repo and to know if the app works properly (locally) once it's build. — kissu, Oct 29 '22 at 17:18
A CI flow is what happens once you have pushed your code changes. So it can be a Gitlab pipeline, Github actions or anything configured by a devops team to bundle your app. Of course, a simple `yarn generate` is also totally fine as a CI (Continuous Integration). — kissu, Oct 30 '22 at 14:31
I already tried, but the articles are not loaded (404 page). However, when I execute a yarn start in my local app, everything is working. — MH info, Nov 08 '22 at 10:44
Do you have a public Github repo? I'm pretty sure I can make this one work just fine on Netlify (besides the `scripts` directory of course). — kissu, Nov 08 '22 at 11:05
Sorry but the page is loaded but it is not working well (in addition, when we refresh the page, it is not working) — MH info, Nov 09 '22 at 19:58
You probably missed what to read since the last update, I've hence deleted the past sections of my answer. Also, the linked URL works fine. If it doesn't, it's a network/browser issue at that point. PS: I will not buy a VPS for an answer, sorry. Especially since it's totally worthless here, for real. — kissu, Nov 09 '22 at 20:03
It is not working properly for me. I will write you by email. — MH info, Nov 09 '22 at 20:20

kissu · Answer 1 · 2022-11-09T20:02:10.863

0

Update regarding my latest changes on a cloned version of your project.

I achieved to have something properly working here: https://kissu-makes-great-sites.netlify.app/fr/tous-les-articles

Main conclusion is that there is a LOT of things to fix/improve on.
You're not writing your app as you should with Vue (even less in a Nuxt way).

There is too much to cover into a single response, so I recommend that you ping me on Twitter, Discord or by email if you want a more in-depth explanation/mentoring on how to fix all of this.

PS: I speak french, lived there for 20 years.

edited Nov 09 '22 at 20:02

answered Oct 30 '22 at 14:28

kissu

40,416
14
65
133

When I use yarn start, it is working, but when I deploy it on OVH, no. And when I use ssr true, I get a ReferenceError : window is not defined. – MH info Oct 30 '22 at 14:37
And I prefer to use a hosting in OVH. I have another project with Nuxt, deployed on OVH that is working properly (https://yogi-dream.fr) – MH info Oct 30 '22 at 14:44
@MHinfo yeah, because it will put your Nuxt app into an isomorphic mode (running your code in both server and client), hence why `window` undefined error as [explained here](https://stackoverflow.com/a/67751550/8816585). The querySelectors are not helping on that aspect. If you want to pay for your hosting, you do you. I still recommend that you fallback to SSG tho, especially for this kind of website. As for OVH, since you're french you can always check that one to get a debugging lead: https://community.ovh.com/t/deployer-un-projet-nuxt-js-ssr-sur-cloudweb-multisites/28255/12 – kissu Oct 30 '22 at 15:17
I deleted ssr false, and it is working. Now the js files in _nuxt folder are returning a 404 error while the files exist at this url. – MH info Oct 30 '22 at 19:16
[`ssr` is at `true` by default](https://nuxtjs.org/docs/configuration-glossary/configuration-ssr#the-ssr-property), so by removing it you basically set it to `ssr: true`. Still, this is not relevant to our main issue. Let's focus on trying to deploy it on OVH since it's where you want it to be hosted. How do you want it, SPA-only or SSG? If you want it as SSG, you'll need to refactor some parts of your app, the ones with the `window` mainly. @MHinfo – kissu Oct 30 '22 at 19:22
By removing ssr false, the page is loaded, so that that is relevant because that is a solution to one of the problems. The new problem is that the files in _nuxt folder are not loaded and are returning a 404 error while they exist. – MH info Oct 30 '22 at 19:30
You also need to `yarn start` on the server once the dist is pushed. Static files cannot be used just like that, they need a small server still. @MHinfo – kissu Oct 31 '22 at 00:47
But how to start a yarn start on a normal OVH server (personal hosting plan). It’s weird because I have another Nuxt project without yarn start that is working properly. – MH info Oct 31 '22 at 14:36
@MHinfo check the other's configuration (configuration of the app on the platform) or maybe a config file in the project. – kissu Oct 31 '22 at 15:49
I didn’t finded… – MH info Nov 01 '22 at 20:02
Can't help further with what you gave me and I don't really want to pay for a server myself haha. – kissu Nov 01 '22 at 21:11

Nuxt.js static app is loading indefinitely

1 Answers1