0

I have a simple vue / nuxt project that I would like to serve from AWS lambda. For this, I'd like to group everything into a single file.

I see that Nuxt is splitting the files in order to only load what matters at a given time, but the app is a single page, is for internal use and loading time / memory usage is completely irrelevant.

My question is 2 fold:

  • how can I disable the file splitting
  • is there a way to pack everything into a single index.html file? I didn't find a solution on the web because the moment I start to research solutions, I keep finding posts about SSR which is also totally irrelevant to my case.
RobC
  • 22,977
  • 20
  • 73
  • 80
Thomas
  • 10,933
  • 14
  • 65
  • 136
  • Do you want to go full static or is SPA only enough? – kissu May 13 '21 at 20:55
  • completely static: I'd like to have a single index.html file with all the script embedded in it. Essentially without having a webserver, just a static file – Thomas May 13 '21 at 20:59
  • So, isn't `target: static` and `ssr: false` enough in this case? You will need JS to have any content but at least, everything will be backed into a single JS file. Pretty much the basic setup of an SPA app. – kissu May 13 '21 at 21:03
  • unfortunately, this will give me a project that is still with multiple js files (and where the index.html will expect a webserver to serve other files). I'm looking for a way to pack things so that the index.html can be opened locally in a browser (or served as a single file from aws' lambda) – Thomas May 13 '21 at 21:10
  • I've added 2 articles specific to hosting on lambda to my answer. Not sure about the benefits of running it there rather on Netlify/Vercel/alike. Is it better in some way? – kissu May 13 '21 at 21:19
  • Hi, did I helped somehow? – kissu May 17 '21 at 09:39
  • This didn’t work, the code still ends up split into 2 JS files and a html file. – Thomas May 17 '21 at 10:29
  • What about my previous comment? – kissu May 17 '21 at 10:31
  • same, there is no way to make a single file from this system apparently – Thomas May 17 '21 at 19:15
  • Not sure about the benefits of running it there rather on Netlify/Vercel/alike. Is it better in some way? – kissu May 17 '21 at 21:22
  • @kissu: I'm not sure about the benefits, but it's an enterprise mandate. I found that lambda allows to run docker images so that may be the solution, instead of trying to deliver a single file to the browser. But I'm surprised there are no solutions to do this though. – Thomas May 17 '21 at 22:29
  • You could make it into a Docker but I guess that it may be painful if you're not used to work in micro-services. For my part, I find that deploying the file to Netlify is simple as possible, free and totally performant (which will not be the case if you keep it in one single file, for obvious reasons). What again is the issue which leads you to want everything in only one file? – kissu May 18 '21 at 05:18
  • I deal with docker all the time but this is pretty much the first time I deal with front end from scratch, that’s why I’m not very familiar with the options; I assumed packaging everything into a single file would be something common but it doesn’t look like it. With docker I can bundle the web server but the downside will be aws lambda’s startup time – Thomas May 18 '21 at 08:56
  • Having one file or not is totally unrelated to Docker. You should not have a single file for your app, this is not how frontend works because of performance, various formats like .png, .css, .vue and a whole lot of other reasons. You will get a single entry point in case of a pure SPA (webpack will load them async), but there will not be a single file still (after the project is built). Now, if you use Docker or don't, will not change the end result that needs to be served. I'm not sure of how lambda works but looking at my linked article (answer), it generates all the needed Nuxt structure. – kissu May 18 '21 at 09:06
  • In case of an SPA: you will have your entry point (`app.html` or `app.js` not sure) and the rest will load from it. But it's totally fine to have several files there. There is no 1-file limit of any sort to my knowledge. Because again, it will just be super poorly optimized (if even being able to load at all). Netlify, Vercel, Surge and alike are totally fine to have **several** static files after the build. Not sure why AWS would not be able to do that. Did you tried the linked article? Is it buggy once you have deployed it (without and with Docker)? – kissu May 18 '21 at 09:08
  • The reason for one file is that this has to run on lambda, so I assumed that if I can pack everything in a single file, I can just return that file directly to a browser and not have a web server in the first place, the same way I would return a picture or a static html file, etc. Since I discovered docker is possible then none of these things matter anymore, I can make a container with yarn and be done with it. The only downside is the slow startup but it’s not important, it’s meant to be used by a closed group of people – Thomas May 18 '21 at 13:55
  • There is a `target: static` mode in Nuxt that will basically serve static files the same way as of an image or an HTML file. No node.js server required. – kissu May 18 '21 at 14:01

1 Answers1

1

For the split part, this one with all set to false should be enough: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#splitchunks

Like this

export default {
  build: {
    splitChunks: {
      layouts: false,
      pages: false,
      commons: false
    }
  }
}

This one should also help: https://github.com/nuxt/nuxt.js/issues/2363

You also can have the whole control of the webpack config here: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#optimization

As for hosting on Lambda, you can check those 2 articles:

kissu
  • 40,416
  • 14
  • 65
  • 133
  • 1
    The `splitChunks` reduces the number of `.js` files in `dist/_nuxt/`, but there are still several such files, not a single `.html` with all the files embeded – Michal Skop Aug 10 '21 at 20:15