Custom maintenance page during site generation

[sts-ryan-holton]

What problem does this feature solve?

When generating a static site via the: npm run build && npm run generate command it'll generate the site in a dist/ folder. However, I noticed earlier today that if you've got quite a number of pages, this process can take anywhere from 30 seconds to a minute to complete, during which time the site is inaccessible.

Particularly when using Nuxt JS alongside MAMP Pro to create a custom host, e.g: http://mylocalsite.clone/ which points to the dist/ directory, during static site creation the host just gives an error, this isn't great particularly when having potentially hundreds of users loading the site

What does the proposed changes look like?

I'm not too sure on the exact reliable approach or workaround to this, however I can somewhat see having a custom maintenance page and potentially a maintenance mode which could be enabled/disabled via the console which would show something more friendlier whilst the site is being generated and then would return to normal once complete.

_{This feature request is available on Nuxt community (#c8924)}

[dappiu]

EDIT: I initially missed that you're using nuxt generate but what I wrote applies with minor modifications also to your case, in particular way substituting "nuxt start" with "your apache/nginx/whatever HTTP server"

EDIT 2: taken by guilt for EDIT 1, I took a look to the docs: the destination directory of nuxt generate is controlled by the option generate.dir, not buildDir

Oh lord, don't do such a thing. What if the build fails after having deleted the entire .nuxt directory with your old build? Please exploit the buildDir config option, and do something like that:

export default {  // nuxt.config.js
  buildDir: process.env.BUILD_DIR === 'temp' ? '.nuxt-tmp' : '.nuxt',

then you launch you build process like BUILD_DIR=temp npm build (adapt to your needs), and after that —where you're continuing to serve the old version undisturbed— you can do something like that (BASH style, adapt to your needs)

if [ -d ".nuxt-old" ]; then
    rm -r .nuxt-old
fi
mv .nuxt .nuxt-old
mv .nuxt-tmp .nuxt

If you put this on a script, stopping the "nuxt start" process just after "nuxt build" ended and before moving folders, the time upon you have the new build running is virtually indistinguishable than rebuilding over the old directory and restarting "nuxt start" at the end.

And if the new build is somehow crappy? You can switch folder and you kept the crappy build up just the time you took to notice it! Think about it.

[sts-ryan-holton]

@dappiu Many thanks for your reply, I'm very new/green to bash scripts and aren't sure whether I'll be able to follow the scripting side of this, could you provide a working example potentially and also how I would run that?

Also, I couldn't find generate.dir in the docs? I'm using Nuxt JS 2.4.5

[dappiu]

Also, I couldn't find generate.dir in the docs? I'm using Nuxt JS 2.4.5

This is what you're looking for: https://nuxtjs.org/api/configuration-generate/#dir The generate property is not on the default nuxt.config.js file, you should add it on your own.

@dappiu Many thanks for your reply, I'm very new/green to bash scripts and aren't sure whether I'll be able to follow the scripting side of this, could you provide a working example potentially and also how I would run that?

Well, I don't know MAMP but since you're using generate and not build/run, I think that something like this should be enough:

1. Let MAMP serve files from the dist/ folder
2. Add the generate.dir option in nuxt.config.js, pointing the generate dir to something else than dist, for example:

// nuxt.config.js
export default {
  // ... your other options here ...
  generate: {
    dir: 'dist-temp'
  }
}

3. Run the nuxt generate command like you always did. Now the generated site will be on dist-temp rather than in dist. MAMP is still serving the old website.
4. Now you have to switch dist and dist-temp folder. In a shell I would write something like mv dist dist-old && mv dist-temp dist. But here's a catch: moving folders like that will change the inode of the dist directory and MAMP may complain of having lost access to the files (or may not, just give a try). In this case a restart is enough. If that's the case, to prevent this you could do one of these two things: i) Stop MAMP before switching dirs, switch dirs, start MAMP again, OR ii) Leave the dist folder in place, but move away all of its content. Then move all the content of the dist-temp directory inside the empty dist. In this way the mv command from before would be transformed as in mkdir dist-old && mv dist-temp/* dist/.

I missed the MAMP thing when I read the comment the first time, but I don't know why you're talking about hundreds of users ... you shouldn't use MAMP to serve a website in production, I think MAMP is designed just to help during the development phase. I suggest you to use a full-blown web server to serve static files in production, or using a static files hosting service, for example read this: https://nuxtjs.org/faq/deployment-aws-s3-cloudfront/ (or, you can skip the CloudFront part and just use S3, like in this article https://medium.freecodecamp.org/deploy-a-nuxt-app-to-s3-in-5-minutes-515a161eb74f )

The web is full of resources for these kind of things, just do a little search

[danielroe]

We are approaching the Nuxt 2 EOL date (June 30, 2024) - see this article for more information. I'm closing this issue as it's marked as a Nuxt 2 related enhancement and it's not a critical issue.

That doesn't mean it might not be relevant for Nuxt 3. If it is, please feel free to open a new issue (or just comment, and I can reopen it). 🙏

Thank you for your understanding and for your contribution to Nuxt! 🎉