AWS Elastic Beanstalk - How to build bundle JS using npm and webpack

Question

I have a node js app deployed at elasticbeanstalk. Installed and symlinked node, npm and webpack. But when running npm run build-prod which itself calls the script webpack --config /var/app/current/webpack.prod.config.js. Getting the following error with exit status -2. The same happens if I run the webpack command directly too. I'm looking out for solutions.

[2016-07-26T06:57:36.301Z] INFO  [9731]  - [Application update app-5c81-160726_122417@24/AppDeployStage0/EbExtensionPostBuild/Infra-EmbeddedPostBuild/postbuild_0_site_web/Command 06_npm_run_build_prod] : Activity execution failed, because:
  > [email protected] build-prod /tmp/deployment/application
  > webpack --config /var/app/current/webpack.prod.config.js


  npm ERR! Linux 4.4.14-24.50.amzn1.x86_64
  npm ERR! argv "/opt/elasticbeanstalk/node-install/node-v4.4.6-linux-x64/bin/node" "/bin/npm" "run" "build-prod"
  npm ERR! node v4.4.6
  npm ERR! npm  v2.15.5
  npm ERR! file sh
  npm ERR! path sh
  npm ERR! code ELIFECYCLE
  npm ERR! errno ENOENT
  npm ERR! syscall spawn sh
  npm ERR! [email protected] build-prod: `webpack --config /var/app/current/webpack.prod.config.js`
  npm ERR! spawn sh ENOENT
  npm ERR!
  npm ERR! Failed at the [email protected] build-prod script 'webpack --config /var/app/current/webpack.prod.config.js'.
  npm ERR! This is most likely a problem with the site-web package,
  npm ERR! not with npm itself.
  npm ERR! Tell the author that this fails on your system:
  npm ERR!     webpack --config /var/app/current/webpack.prod.config.js
  npm ERR! You can get information on how to open an issue for this project with:
  npm ERR!     npm bugs site-web
  npm ERR! Or if that isn't available, you can get their info via:
  npm ERR!
  npm ERR!     npm owner ls site-web
  npm ERR! There is likely additional logging output above.
  npm ERR! Linux 4.4.14-24.50.amzn1.x86_64
  npm ERR! argv "/opt/elasticbeanstalk/node-install/node-v4.4.6-linux-x64/bin/node" "/bin/npm" "run" "build-prod"
  npm ERR! node v4.4.6
  npm ERR! npm  v2.15.5
  npm ERR! code ELIFECYCLE

---

container config file:

container_commands:
  01_node_symlink:
    command: "ln -sf `ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin/node /bin/node"

  02_npm_symlink:
    command: "ln -sf `ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin/npm /bin/npm"

  03_npm_install_global_packages:
    command: "npm install webpack webpack-cli -g"

  04_webpack_symlink:
    command: "ln -sf `ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin/webpack /bin/webpack"

  #05_webpack_run_build_prod:
    #command: "webpack --config /var/app/current/webpack.prod.config.js --progress --colors"

  06_npm_run_build_prod:
    command: "npm run build-prod"

---

Scripts in package.json

"scripts": {
    "build": "webpack --config webpack.local.config.js --progress --colors",
    "build-local": "webpack --config webpack.prod.config.js --progress --colors",
    "build-prod": "webpack --config /var/app/current/webpack.prod.config.js",
    "server": "node app.js",
    "dev-server": "node dev-app.js"
  }

And when I uncomment 05 that is run the webpack command directly it ends with error Error: "/var/app/current/site-web/static/assets/app/index.js" is not in the SourceMap.

The build script is successful at local but blocked on all the ways at production. Couldn't figure out how to run webpack command to build the JS on AWS beanstalk environment. Isn't the ideal way of building the JS file?

node: 4.4.6 npm: 2.15.5 webpack: latest

Answer 1

I'm still new to elastic beanstalk and having similar issues myself but I noticed your tasks for symlinking node, npm, etc, are in the form of container_commands.

According to the official docs, "They run after the application and web server have been set up and the application version file has been extracted, but before the application version is deployed."

Maybe try using commands: instead of container_commands:. See link I shared.

Maybe the fact that these commands aren't running until after the application and web server have already been set up is why it may not be working for you?

Again, I'm still new to elastic beanstalk but maybe that can help.

Answer 2

I had issues with global npm installs (in my case react-scripts). What I did as a workaround was to install the dependent package as declared in package.json and then symlink to it (located at /tmp/deployment/application/node_modules/.bin on EC2) in the .ebextensions config file:

   03_react_scripts_symlink:
        command: "ln -sf /tmp/deployment/application/node_modules/.bin/react-scripts /bin/react-scripts"

   04_npm_run_build_prod:
        command: "sudo npm run build"

Answer 3

I think the approach is faulty. Webpack and Webpack-cli are devDependencies of package.json.
You should set your env variable to NPM_USE_PRODUCTION=false in order for EB to install devDependencies as well.

see more here: https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/nodejs-platform-packagejson.html

Answer 4

Finally, I managed to run the build script at the staging dir. It's not a permanent solution but it works.

05_webpack_run_build_prod:
    command: "cd /tmp/deployment/application && sudo webpack --config webpack.prod.config.js --progress --colors"