[Server bundle]: add a possibility to include the node_modules deps with the server bundle
During the CI, when you build the final artifact, after you can't actually run it independently (at least server side) if depends on some node_modules packages. The offer is to provide some option to make it possible to bundle all the dependencies into the final artifact for the server side part.
I'd very much like this feature as well. Currently it looks like most but not all app files are bundled but none of the node modules are bundled. When deploying an SSR artefact you therefore have to either have node modules globally installed on the hosting destination, run npm install on the hosting destination or bundle the folder yourself. None of these make deploying a smooth experience and the node_modules folder can be huge ( > 100mb).
If webpack could bundle, minify and tree-shake an SSR bundle you can then run directly with node (rather than nuxt-cli start) it would make deploy faster, cheaper, easier and more secure while also reducing the possibility of mismatched package versions between test, staging and production.
If the capability already exists then that's great news! But I couldn't find any documentation on the
--standalone
flag for
nuxt build
. I found an option for
--analyse
in the build api docs that isn't mentioned in
https://nuxtjs.org/guide/commands
but nothing on
--standalone
.
//nuxt.js
const { Nuxt } = require('nuxt-start')
const config = require('./nuxt.config.js')
const nuxt = new Nuxt({ ...config, dev: false })
module.exports = (req, res) => nuxt.ready().then(() => nuxt.server.app(req, res))
//index.js
const sls = require('serverless-http')
const binaryMimeTypes = require('./binaryMimeTypes')
const nuxt = require('./nuxt')
module.exports.nuxt = sls(nuxt, {
binary: binaryMimeTypes
however, upon running and making the first request to the app, I am presented with the following error: Error: Cannot find module '@nuxtjs/axios'
This is the first module inside nuxt.config.js#modules
my expectation would be that nuxt build --standalone
results in an artefact that contains everything needed to run the application
Put modules into devModules instead of modules if they are not required for runtime (axios is build only)
Standalone deployment is in the plan
I actually got this working, the issue was how I was bootstrapping nuxt-start
in standalone
mode
//nuxt.js
const { Nuxt } = require('nuxt-start')
const nuxt = new Nuxt({ dev: false })
module.exports = (req, res) => nuxt.ready().then(() => nuxt.server.app(req, res))
The key here is to NOT include the nuxt.config.js
and only set dev: false
I have successfully deployed a Nuxt SSR app to AWS Lambda, serving _nuxt
and static
off AWS S3 transparently through API Gateway
Put modules into devModules instead of modules if they are not required for runtime (axios is build only)
Standalone deployment is in the plan
Have you got any news or insider information about this feature?
May be something like roadmap or release plan for this feature?
@lionskape both buildModules
(formerly devModules
) and --standalone
flags are now stable, documented and tested.
We are also working on new target: 'serverless'
option to make deployments even more portable.
in nuxt 2.9, i will add '@nuxt/typescript-build' in buildModule. in package.json @nuxt/typescript-build is devDependencies.
use to npm install --production
on deploy server and nuxt start
, throw to
Error: Cannot find module '@nuxt/typescript-build'
Require stack:
- node_modules/@nuxt/core/dist/core.js
- node_modules/nuxt/dist/nuxt.js
- server/index.js
at Resolver.requireModule (node_modules/@nuxt/core/dist/core.js:627:31)
at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:163:36)
at promise.then (node_modules/@nuxt/utils/dist/utils.js:1796:43)
at process._tickCallback (internal/process/next_tick.js:68:7)
at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
why is the buildModule still needed during runtime?
I actually got this working, the issue was how I was bootstrapping nuxt-start
in standalone
mode
//nuxt.js
const { Nuxt } = require('nuxt-start')
const nuxt = new Nuxt({ dev: false })
module.exports = (req, res) => nuxt.ready().then(() => nuxt.server.app(req, res))
The key here is to NOT include the nuxt.config.js
and only set dev: false
I have successfully deployed a Nuxt SSR app to AWS Lambda, serving _nuxt
and static
off AWS S3 transparently through API Gateway
@shainegordon any way you could share your working codes with me? struggling to make it work in AWS lambda
Hi folks,
I am struggling with a similar scenario. I am running nuxt on AWS Lambda and when I bundle my lambda (with webpack) it does not includes some modules in the bundle causing it fail in runtime.
The workaround was to include an import in the serverless file
import './serverless-requires';
and it includes some modules that Nuxt is not bundling in the dist/server
bundle, for example:
import 'nuxt-env';
I am building with --standalone
flag with "nuxt": "^2.12.2"
Greetings,
I deploy my Nuxt website on GCloud Kubernetes using a Docker image. The recommended way I have found in every blog posts or tutorials is to copy the entire source in the image, install all the node_modules and build the Nuxt app there. It resulted in a ~800MB image (from node:alpine 117MB, so almost 700MB of sources, deps and built files) !
The recommended minimal Dockerfile was :
FROM node:alpine
ENV APP_ROOT /app
RUN mkdir ${APP_ROOT}
WORKDIR ${APP_ROOT}
# copy the entire source
ADD . ${APP_ROOT}
# install all the node packages
RUN yarn
# build nuxt app here
RUN yarn build
CMD [ "yarn", "start" ]
The installation of all the node_modules were resulting in ~450Mo of fresh layers that needed to be pushed to our docker repository for each deployment, and then pulled by kubernetes. Not really efficient !
I tried to find a way to dramatically reduce the docker image size and build more efficient image (new layers that weight only few Mo).
At the present time, I did not found any clear documentation about nuxt build --standalone
and the way to deploy the resulting built files.
Then I have come across this issue. The previous answers led me to the solution but I used a slightly different method that I'll share here for the record.
So here is my method:
In my project, I create a directory called deploy
with 3 files:
nuxt.config.js
import morgan from 'morgan'; // i use morgan in production to log every incoming requests
export default {
dev: false,
server: {
port: process.env.PORT || 8080,
host: process.env.HOST || '0.0.0.0',
// the only extra config needed here are the server middlewares
serverMiddleware: [
morgan('combined'),
{ path: '/health', handler: '~/api/health.js' },
{ path: '/data/cities', handler: '~/api/data/handler.js' },
package.json. Declare dependencies needed in serverMiddleware (in middleware api/data/handler.js
I use mongodb
):
"scripts": {
"start": "nuxt-start"
"dependencies": {
"mongodb": "^3.5.9",
"morgan": "^1.10.0",
"nuxt-start": "^2.13.1"
start.sh
Nuxt-start 2.13.1 keeps asking permission for "anonymous usage analytics sharing" for improvement. In thus need to automatically pass No, that's why i need this shell file to start.
yarn start << EOF
Build the Nuxt app locally using standalone
flag
nuxt build --standalone
Copy the only needed files in the docker image, install nuxt-start and the few server depencies, run start.sh. The Docker file is:
FROM node:alpine
ENV APP_ROOT /src
RUN mkdir ${APP_ROOT}
WORKDIR ${APP_ROOT}
# copy the content of deploy directory
COPY deploy ${APP_ROOT}
# copy the generated .nuxt
COPY .nuxt ${APP_ROOT}/.nuxt
# copy your static directory
COPY static ${APP_ROOT}/static
# copy the server middleware files
COPY api ${APP_ROOT}/api
# install only nuxt-start and the few server depencies
RUN yarn
CMD [ "sh", "start.sh" ]
Final image size => 266MB (For the record, I have 90MB of images and videos in /static dir).
Hope this will help.
Best regards.
Hi @qnp Indeed it would worth trying multistage builds as @shainegordon mentioned :)
Here is an example: https://github.com/nuxt/nuxt.js/blob/dev/examples/docker-build/Dockerfile
yarnclean file can also help: https://github.com/nuxt/nuxt.js/blob/dev/examples/docker-build/.yarnclean
The current base for image size is ~134MB
Yes indeed,
Thanks for the links, I have hence used this method using the given Dockerfile and .yarnclean.
However the image size for my Nuxt project is 528MB.
Hence the former method I explained above is much better for me :-)
Hi guys, one year later...
@pi0 I suggest to document it first and keep it experimental for another 1-2 minors relaxed
What do you think about adding nuxt build --standalone
to the docs? It will save a lot of time for people who has to dive into stackoverflow and github issues to find this.