Question: hooks *after* compile – but *before* run

[dwelch2344]

This is a Question

Description

New to plugin development, so apologies if we're missing something incredibly obvious. We're attempting to write a plugin that runs after webpack but before deploy / offline / etc, but can't seem to hit the hook. We can run after validate, just fine (with after:webpack:validate:validate)

Plugin thus far is dead simple. Uncomment the validate hook to see it in action. So far the plugin is just running in .serverless_plugins – and is imported after serverless-webpack (though we've tried before as well)

Are we missing something obvious? Or is there not a hook for the compilation?

Thanks

'use strict';

class ServerlessPlugin {
  constructor(serverless, options) {    
    this.serverless = serverless;
    this.options = options;

    this.commands = {
      welcome: {
        usage: 'Helps you start your first Serverless plugin',
        lifecycleEvents: [
          'hello',
        ],  
        commands: {
          compile: {
            type: 'entrypoint',
            lifecycleEvents: [
              'compile',
            ],
          },
        }
      },      
    };

    this.hooks = {
      // 'after:webpack:validate:validate': this.validate.bind(this),
      'webpack:compile:compile': this.debug.bind(this),
      // 'before:offline:start': this.debug.bind(this),
      // 'offline:start': this.debug.bind(this),
      'before:offline:start': this.debug.bind(this),
      // 'before:offline:start:init': this.debug.bind(this),      
    };
  }

  validate(){
    for(let i = 0; i < 15; i++){
      console.log('validate')
    }
  }

  debug(){
    throw new Error('i should blow up here debug')
  }


  compile(){
    throw new Error('i should blow up here compile')
  }
}

module.exports = ServerlessPlugin;

Additional Data

• Serverless-Webpack Version you're using:
  ^4.2.0
• Webpack version you're using:
  ^3.10.0
• Serverless Framework Version you're using:
  ^1.25.0
• Operating System:
  Mac OS X - Sierra (scared to upgrade to High Sierra)

[HyperBrain]

Hi @dwelch2344 , thanks for asking.

This hook is wrong:
'webpack:compile:compile': this.debug.bind(this),
because it "overwrites" the compile step (in fact the bahavior is undefined in this case because an overwrite/replacement is currently not supported by Serverless).

In case you want to hook into some serverless lifecycle event, you always have to hook besides the offered hook. In your case this would be:
before:webpack:compile:compile or after:webpack:compile:compile depending if you want to be invoked before or after the webpack compile step. This is true for all hooks you implement, regardless if they hook Serverless or plugin events.

The order of the plugin array in your serverless.yml defines the order of invocations. Plugin hooks are invoked exactly in the order given there. What is important for your plugin is, that it should be listed AFTER the webpack plugin, because it hooks its events.

Additionally, you can invoke Serverless with SLS_DEBUG="*" serverless ... during debugging. It will print all invoked commands then and you can check what's going on in regards to liefecycles.

[dwelch2344]

Hi @HyperBrain – thanks for your quick reply and (obviously) all your awesome work :)

So, I'd actually tried that as well but had adjusted it from my sample plugin as I was hammering on it. Changing the example at hand to the suggested after:webpack:compile:compile only seems to run when running serverless webpack from the CLI.

Is there another event / hook to listen to for running in offline (i.e. to see the latest source after webpack runs again, but before offline is updated)

Below's my console output with debug enabled and after:webpack:compile:compile set, if it might be helpful.

Debugging with inspector protocol because Node.js v8.5.0 was detected.
node --inspect-brk=22885 node_modules/.bin/serverless --experimental-modules -P 5000 -s dev offline 
Debugger listening on ws://127.0.0.1:22885/5ddf1f6f-af92-4241-8604-00f212e3812a
Debugger attached.
Serverless: Load command run
Serverless: Load command config
Serverless: Load command config:credentials
Serverless: Load command create
Serverless: Load command install
Serverless: Load command package
Serverless: Load command deploy
Serverless: Load command deploy:function
Serverless: Load command deploy:list
Serverless: Load command deploy:list:functions
Serverless: Load command invoke
Serverless: Load command invoke:local
Serverless: Load command info
Serverless: Load command logs
Serverless: Load command login
Serverless: Load command logout
Serverless: Load command metrics
Serverless: Load command print
Serverless: Load command remove
Serverless: Load command rollback
Serverless: Load command rollback:function
Serverless: Load command slstats
Serverless: Load command plugin
Serverless: Load command plugin
Serverless: Load command plugin:install
Serverless: Load command plugin
Serverless: Load command plugin:uninstall
Serverless: Load command plugin
Serverless: Load command plugin:list
Serverless: Load command plugin
Serverless: Load command plugin:search
Serverless: Load command emit
Serverless: Load command config
Serverless: Load command config:credentials
Serverless: Load command rollback
Serverless: Load command rollback:function
Serverless: Load command webpack
Serverless: Load command offline
Serverless: Load command offline:start
Serverless: Load command welcome
Serverless: Invoke offline
Serverless: Invoke webpack:validate

null: dirname
null: Object {handler: "./handler.js"}
Serverless: Bundling with Webpack...
Time: 1107ms
         Asset     Size  Chunks             Chunk Names
    handler.js  9.78 kB       0  [emitted]  handler
handler.js.map  10.3 kB       0  [emitted]  handler
   [0] external "source-map-support/register" 42 bytes {0} [not cacheable]
   [1] ./src/util/bagbak.js 2.8 kB {0} [built]
   [2] ./handler2.js 559 bytes {0} [built]
   [3] ./src/api/members.js 2.77 kB {0} [built]
   [4] external "babel-runtime/core-js/object/get-own-property-descriptor" 42 bytes {0} [not cacheable]
   [5] external "babel-runtime/core-js/json/stringify" 42 bytes {0} [not cacheable]
   [6] external "babel-runtime/helpers/classCallCheck" 42 bytes {0} [not cacheable]
   [7] external "babel-runtime/helpers/createClass" 42 bytes {0} [not cacheable]
   [8] external "babel-runtime/helpers/defineProperty" 42 bytes {0} [not cacheable]
   [9] external "babel-runtime/core-js/object/assign" 42 bytes {0} [not cacheable]
  [10] external "babel-runtime/core-js/object/keys" 42 bytes {0} [not cacheable]
  [11] external "babel-runtime/core-js/object/get-own-property-names" 42 bytes {0} [not cacheable]
  [12] external "babel-runtime/core-js/object/get-prototype-of" 42 bytes {0} [not cacheable]
Serverless: Watching for changes...
Serverless: Starting Offline: dev/us-east-1.

null: [offline] options:
null: Object {host: "localhost", location: ".webpack/service", port: 5000, prefix: "/", stage: "dev", …}
[offline] globalBabelOptions: undefined
[offline] funOptions {
  "funName": "getAll2",
  "handlerName": "getAll",
  "handlerPath": "/Users/dave/workspace/hexly/platform/v3/api/.webpack/service/handler",
  "funTimeout": 30000
} 
[offline] getAll2 runtime nodejs6.10 
Serverless: Routes for getAll2:
Serverless: GET /members2
[offline] funOptions {
  "funName": "sales",
  "handlerName": "sales",
  "handlerPath": "/Users/dave/workspace/hexly/platform/v3/api/.webpack/service/handler",
  "funTimeout": 30000
} 
[offline] sales runtime nodejs6.10 
Serverless: Routes for sales:
Serverless: GET /sales
Serverless: Offline listening on http://localhost:5000

[dwelch2344]

Sorry it took me so long to file a PR / update the issue. So, as usual, the plugin's working great and doing exactly what it should :) However, now that we know how things work, we'd like to suggest a simple enhancement.

Just opened PR #319 to address what we'd like. Hopefully closing this is the right move :)