2

I have a website built with a Strapi/Nuxt stack. I can make it totally static, instead of pre-rendering pages, but I still need to retrieve the images or other assets from Strapi, so I still do need a server. During the "compilation", the Strapi API is fetched and the contents used to pre-render all the pages I want: would be possible to also download all the assets into the dist directory during the nuxt generate operation?

kissu
  • 40,416
  • 14
  • 65
  • 133
piLeoni
  • 131
  • 13
  • I was wondering something like that, but was wondering if there was some pre-built tool. Maybe through webpack? – piLeoni May 26 '21 at 10:35
  • Hi, kind of: working on that idea I found that is pretty easy to integrate a download function also in the asyncData methods in single components or in the store, but you still have to change all the links manually. That is why i was assuming would be a job for webpack, maybe with some loader middleware, or in general I would have assumed that someone solved the problem already to avoid reinventig the wheel. – piLeoni May 27 '21 at 13:49
  • Nobody actually download all the assets locally because they should not be there. You access it through a CDN (from Strapi or Cloudinary or whatever). In case you wish to optimize the image, you can also make it on the fly during the build time. If you want to have the images locally, why would you even move them to Strapi? If you have them on Strapi only, why would you move them locally? A static website totally does external calls after it's loaded, this is all JAMstack is actually about. – kissu May 27 '21 at 13:54
  • For example, I could run Strapi locally to compose my contents by time to time, and then freeze everything by downloading all the assets I need and publish the static website without the needs of an external server, ifthe website does not need it (talking about a portfolio). "Nobody" seems a wide group of people, maybe is just nobody in Bordeaux. – piLeoni May 27 '21 at 14:52
  • You already can run Strapi locally and do anything with it. Not sure if there are a lot of limitations but it should be fine. As for a server, you can host it for free on Heroku, it will take some time to spin up but it will be free. If you're a dev, you should be fine without even hosting it (or even without a CMS). If you don't want to selfhost your own solution, there are also some other headless CMS like Prismic who are totally online and do not require any personal hosting. Forestry is different but nice too. Check some here, the choice is large: https://jamstack.org/headless-cms/ – kissu May 27 '21 at 15:05
  • Ok, back to the question: existing tools to fetch all the linked contents in nuxt? – piLeoni May 27 '21 at 15:41
  • This is not related to Nuxt. Any Node.js package can fit, just look on github/NPM for any of them that looks decent and maintained enough. Just added a new one to my answer. Then, you could also make some benchs/look for differences between the 2, there are quite a good amount of tools for this online. – kissu May 27 '21 at 15:45
  • Actually I found it quite misleading: you basically suggest to parse the same source with node and download the assets locally, and then change the links to the local paths. Nuxt config file is just a trigger. Instead I found webpack being the right approach: with assets modules you can write your own generators to download each asset and change the path to it or, even better, with the html-loader you can parse any asset requested by the generated server side generated html. – piLeoni Jun 02 '21 at 11:15

1 Answers1

2

During the build, you can query Strapi's API and get the assets URL, nothing blocking you here.
Otherwise, you could also download the file itself and write it down into your project.
Here is one my answer that you can get some ideas from: How to access remote data and write it into a file during Nuxt build?

It's not Webpack's job to do this neither. As a pre-build tool, I guess that you can use nodejs-file-downloader and use it at the top of your nuxt.config.js file.

This one looks great and is active: https://github.com/hgouveia/node-downloader-helper

kissu
  • 40,416
  • 14
  • 65
  • 133