Nuxt.js: Generate static site with local CMS not working after deploy

[stursby]

So I'm trying to use Nuxt with a local install of Craft CMS to generate a static site (and eventually a headless CMS). It works just fine locally... because it has access to the local API endpoints on my machine. nuxt generate works too, as it can reach the API, however, when I deploy the static output from the /dist folder, my links between pages fail because it's still trying to hit my local API. I though that the nuxt generate would inject the necessary data for that page, and I could still use the nice "SPA" style page transitions, but with all static content (maybe I'm wrong here?).

Any thoughts would be helpful, thanks!

_{This question is available on Nuxt.js community (#c912)}

[Atinux]

Hi @stursby

Sadly it's not possible to do this automatically with Nuxt.js (I hoped to do it when we were working on nuxt generate).

Actually, the only way to achieve this is to use normal <a> instead of <nuxt-link> so the client-side navigation is not triggered but we loose the SPA feeling.

Another way will be to set a custom logic for client-side in your asyncData or fetch.

For example, on server-side, you store the result of your API call into static/data/*.json and send back the result (I believe you can use an axios interceptor for that). On client side, you make an AJAX call to to /data/*.json.

To notify me, please mention me or I will miss this thread.

[luminarious]

I'm in a similar boat with one of my team's projects, I was hoping it would be possible to disconnect the CMS completely. Looks like I need to figure out a way to emulate having an API.

[samburgers]

+1. We would also love to have this feature. For our use case, we have no need (or ability) to connect to the content API after generate has been run and the static site deployed.

[samburgers]

Just adding mention of @Atinux as advised ^^

[Atinux]

I talked with @pi0 and himself has the same need, we might create a module to save the API results into dist/ when nuxt generate and use these results on navigating on client-side :rocket:

[stursby]

@pi0 Any thoughts on this? Would love to be able to generate a full static site (powered by a headless CMS) w/ Nuxt!

[pi0]

@stursby It is already planned for after 1.0 release, Stay tuned :)

[stursby]

@pi0 Alright, thanks for the update!! 🙌

[stursby]

Hey @pi0 @Atinux, was working on this again today... still stuck. Wondering if you could provide any tips! I set up a demo repo here --> https://github.com/stursby/nuxt-static

And the live demo URL is here --> https://nuxt-static.netlify.com/

Again, I'm using nuxt generate in my build script which works fine... however, after build, the /users/* routes (routes that fetch data) still require the live API endpoint even though the data is inside each page, in the window.__NUXT__ object.

Is there no way for the client side <nuxt-link>/SPA-style transitions to check for the __NUXT__ object and use that to build out those routes?

Any ideas would be much appreciated!

[Atinux]

Hi @stursby

I created an example with this logic, check out https://nuxt-static.surge.sh

I made a PR on your repo, I let you check it: https://github.com/stursby/nuxt-static/pull/1

One thing, this is possible only with rc5 of nuxt (introducing process.static) (coming soon).

[stursby]

@Atinux, whoa, this is great!! Ok, so I tried it locally with "nuxt": "^1.0.0-rc4" and not exporting the JSON files like on https://nuxt-static.surge.sh ... when is "coming soon" on the rc5 😉 . Thanks for taking a look at this, really appreciate it! 💯

[Atinux]

We only have to make few fixes for Windows and ready to release. I hop
tomorrow :)

In the meantime you can clone Nuxt.js, run: npm link

And in your repo: npm link nuxt

That's how I did :)

On Thu, 17 Aug 2017 at 19:07, charlie hield [e-mail]
wrote:

@Atinux https://github.com/atinux, whoa, this is great!! Ok, so I tried
it locally with "nuxt": "^1.0.0-rc4" and not exporting the JSON files
like on https://nuxt-static.surge.sh ... when is "coming soon" on the rc5
😉 . Thanks for taking a look at this, really appreciate it! 💯

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/1051#issuecomment-323135190, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AA3OFOCfeiQBsXEAMknf_YVpB2LeW4hyks5sZHNqgaJpZM4ORdWG
.

[stursby]

@Atinux Ok, so I linked rc5... but my build still isn't showing any JSON in /dist/data ... or even a /dist/data folder at all. What am I missing? I merged the PR and updated my repo to reflect. Could you take a look?

Here's the structure of /dist after running yarn build

[stursby]

Still trying to get rc5 to work.

I _thought_ I was doing it correctly... here's some output

nuxt hield$ cat package.json | grep version
  "version": "1.0.0-alpha.5",
nuxt hield$ yarn link
yarn link v0.27.5
warning There's already a module called "nuxt" registered.
Done in 0.09s.
nuxt hield$ ..
node_modules hield$ ..
nuxt-static hield$ yarn link nuxt
yarn link v0.27.5
success Using linked module for "nuxt".
Done in 2.55s.
nuxt-static hield$ yarn dev
yarn dev v0.27.5
$ nuxt
sh: nuxt: command not found
error Command failed with exit code 127.
nuxt-static hield$

[pi0]

Please try

• Ensure yarn install and yarn build is done in cloned nuxt project
• Unlink old clone using yarn unlink nuxt and yarn link again.
• Make sure nuxt is in your project's package.json (so that nuxt binary will be installed)
• Link nuxt to your project using yarn link nuxt

[stursby]

@pi0 Still having issues... here's _exactly_ what I'm doing (starting from a fresh install of nuxt-static) --> https://asciinema.org/a/cXYxZ0Fauj836saIDPHbY0wKs

[pi0]

This parts are wrong :)

bash-3.2$ cd node_modules/ 
bash-3.2$ rm -rf nuxt/                                                                                           
bash-3.2$ git clone https://github.com/nuxt/nuxt.js.git nuxt                                                     

You need to clone nuxt somewhere outside of cloned nuxt-static repo. Yarn link will take care of creating system links.

https://yarnpkg.com/lang/en/docs/cli/link

[stursby]

@pi0 Ok, I think I've got it linked correctly (thanks for the tips, haven't done that before). Now when trying to run yarn build (which in turn runs nuxt generate) I get the following error:

nuxt-static hield$ yarn build
yarn build v0.27.5
$ nuxt generate
[nuxt] Generating...
  nuxt:build App root: /Users/hield/Desktop/sandbox/nuxt-static +0ms
  nuxt:build Generating /Users/hield/Desktop/sandbox/nuxt-static/.nuxt files... +1ms
  nuxt:build Generating files... +8ms
  nuxt:build Generating routes... +5ms
  nuxt:build Building files... +23ms
Build completed in 6.906s

[nuxt:build:client]
 Hash: afc62377482a1e3167ba
Version: webpack 2.6.1
Time: 6904ms
                                Asset       Size  Chunks             Chunk Names
0.nuxt.bundle.c352fe75c3ae23e2d18a.js    64.1 kB       0  [emitted]  pages/users
1.nuxt.bundle.988b1435e3b66d971b3a.js    64.1 kB       1  [emitted]  pages/users-id
2.nuxt.bundle.c570a34d6dc0b01df115.js     1.3 kB       2  [emitted]  pages/index
3.nuxt.bundle.3bc07752a36cac042e73.js    1.38 kB       3  [emitted]  layouts/default
4.nuxt.bundle.f90718928bfff37d819f.js  735 bytes       4  [emitted]  pages/about
vendor.bundle.786304f95057720a1c4d.js     128 kB       5  [emitted]  vendor
  nuxt.bundle.e1ddba6be5a6203e4f37.js      22 kB       6  [emitted]  app
     manifest.afc62377482a1e3167ba.js    1.59 kB       7  [emitted]  manifest
                           index.html  132 bytes          [emitted]  
                 client-manifest.json    5.91 kB          [emitted]  

ERROR in ./plugins/axios.js
Module not found: Error: Can't resolve 'fs' in '/Users/hield/Desktop/sandbox/nuxt-static/plugins'
 @ ./plugins/axios.js 29:20-33
 @ ./~/babel-loader/lib?{"presets":["vue-app"],"babelrc":false,"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./pages/users/index.vue
 @ ./pages/users/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js

ERROR in ./~/mkdirp/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/hield/Desktop/sandbox/nuxt-static/node_modules/mkdirp'
 @ ./~/mkdirp/index.js 2:9-22
 @ ./~/mkdirp-promise/lib/index.js
 @ ./plugins/axios.js
 @ ./~/babel-loader/lib?{"presets":["vue-app"],"babelrc":false,"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./pages/users/index.vue
 @ ./pages/users/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js

ERROR in 0.nuxt.bundle.c352fe75c3ae23e2d18a.js from UglifyJs
Invalid assignment [./~/mkdirp-promise/lib/index.js:6,0][0.nuxt.bundle.c352fe75c3ae23e2d18a.js:2129,39]

ERROR in 1.nuxt.bundle.988b1435e3b66d971b3a.js from UglifyJs
Invalid assignment [./~/mkdirp-promise/lib/index.js:6,0][1.nuxt.bundle.988b1435e3b66d971b3a.js:2129,39]
Error: Webpack build exited with errors
    at /Users/hield/Desktop/nuxt-static/nuxt/dist/nuxt.js:1161:44
    at /Users/hield/Desktop/nuxt-static/nuxt/node_modules/webpack/lib/Compiler.js:272:15
    at Compiler.emitRecords (/Users/hield/Desktop/nuxt-static/nuxt/node_modules/webpack/lib/Compiler.js:367:37)
    at /Users/hield/Desktop/nuxt-static/nuxt/node_modules/webpack/lib/Compiler.js:265:12
    at /Users/hield/Desktop/nuxt-static/nuxt/node_modules/webpack/lib/Compiler.js:360:11
    at next (/Users/hield/Desktop/nuxt-static/nuxt/node_modules/tapable/lib/Tapable.js:154:11)
    at Compiler.compiler.plugin (/Users/hield/Desktop/nuxt-static/nuxt/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/Users/hield/Desktop/nuxt-static/nuxt/node_modules/tapable/lib/Tapable.js:158:13)
    at Compiler.afterEmit (/Users/hield/Desktop/nuxt-static/nuxt/node_modules/webpack/lib/Compiler.js:357:8)
    at Compiler.<anonymous> (/Users/hield/Desktop/nuxt-static/nuxt/node_modules/webpack/lib/Compiler.js:352:14)
    at /Users/hield/Desktop/nuxt-static/nuxt/node_modules/async/dist/async.js:421:16
    at iteratorCallback (/Users/hield/Desktop/nuxt-static/nuxt/node_modules/async/dist/async.js:998:13)
    at /Users/hield/Desktop/nuxt-static/nuxt/node_modules/async/dist/async.js:906:16
    at /Users/hield/Desktop/nuxt-static/nuxt/node_modules/graceful-fs/graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:135:15)
error Command failed with exit code 1.
nuxt-static hield$ 

[stursby]

Updated: couldn't get yarn link to work... but got npm link to work! Thanks for the help @pi0 and @Atinux !

[Atinux]

rc5 is out :)

[samburgers]

Have been following all the 100% static site issue/threads, and still seems like there is no definitive way to configure this. Any update on the correct way to setup a 100% static generated site, that doesn't rely on external content API's beyond the initial generate process?

I had initially thought it might just be something that was already handled here:

mode: "spa|universal|static"

[Atinux]

@samburgers we plan to add a support for full static generation, the mode will be "universal" but we will add an option like "generate.static: true` to avoid calling any API on the client-side.

[samburgers]

thanks @Atinux this would be a killer feature, and i think would end up being the dominant use case for Nuxt projects. looking forward to the announce!

[DreaMinder]

just wanted to say that this feature is relevant for every rendering mode. Even for SPA in some cases.
It solves more issues then you think. Yes, nice to have API calls cached statically, so you don't have to make API running all the time.
But also it improves consistency. Lets say you have entered prerendered page filled with API-data. Then in SPA-mode you have navigated to same page. Content of the page may be different between prerendered and client-rendered page if API-data has been changed. For some cases it is critical, it confuses users.
And in some cases window.__NUXT__ payload inside of server-rendered page is huge. If it would be extracted to external json file (or external route for universal mode), it would improve crawler performance, and make time to first paint faster, which is in most cases more important than time to interactive. We could try to use server push to make payload delivery as fast as inline payload.

[khalwat]

This is a big feature for me @DreaMinder FWIW -- because my use case is Vue on the frontend communicating to a "headless" CMS on the backend... so I'd really like to be able to have, say, the "blog index" page statically rendered with the latest 5 blogs that were pulled in via API from the CMS.

[simonswiss]

@khalwat I might be missing something key - but if you look at this demo page, the content is pulled from a Craft site via ElementAPI, and rendered statically via generate. https://boring-spence-c30577.netlify.com/demos/craft

The FAQs are in HTML on the static page. Isn't that what you're trying to achieve? I haven't tried a multi page setup, so I guess the issue is when you load a new route with nuxt-link and it does an API call?

In that case, yes a universal mode would be sweet, and allow you to build sites with local CMS, NotionHQ or whatever data input you can think of!

[sanscheese]

@Atinux with the option "generate.static: true" planned for future, should this issue be reopened? or is there another issue being used to track this feature request?

[Asparagirl]

bump

[Atinux]

You may want to look at https://github.com/cmacmillanmarin/nuxt_boilerplate/blob/master/modules/scraper.js

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.