watch with serverless offline

[isitgeorge]

This is a Question

Description

When using this plugin with Serverless offline, it transpiles as expected but is it possible to trigger a retranspile when a change is detected? Currently have to restart the serverless offline wrapper.

Thanks!

[SyedRFarhan]

I've been having trouble with this too. I use nodemon as a workaround. Here are the scripts:

"serve": "sls offline -P 4000",
"serve:watch": "nodemon -e js,ts,jsx,tsx -x yarn run serve",

[furudean]

This used to work for me, but after updating my package version it stopped working.

[isitgeorge]

This used to work for me, but after updating my package version it stopped working.

webpack used to watch and rebuild automatically?

[furudean]

Serverless offline with serverless-webpack did have the watch thing work, yeah

[soda0289]

Do you know which version broke watch?

[AshUK]

serverless-offline:
  useChildProcesses: true

[haroonKhan-10p]

facing the same issue. Using nodemon as a workaround works fine. But it is not as fast as serverless-webpack

[isitgeorge]

Published a little module that I was using internally to solve this, since asking the original question - https://www.npmjs.com/package/serverless-offline-multi but would be great to work out how/when the webpack watch broke

[polson]

Also wondering how to do this

[haroonKhan-10p]

webpack-watch is fixed by this: working on macOS Catalina.
Update serverless.yml to add custom attribute like this:

custom:
  serverless-offline:
    useChildProcesses: true

[furudean]

@AshUK @haroonKhan-10p Worth noting that these are not fixes, more so workarounds. They massively degrade performance, especially for larger projects.

[polson]

@haroonKhan-10p that unfortunately didn't do anything for me.

The issue for me is that webpack does watch and transpile correctly, but serverless offline uses cached files and not the new ones. I think the issue lies with the serverless-offline plugin

I think we will have to dig into the plugin and see if there's some way to fix it. I looked into it yesterday and I don't really see the problem, but I'll keep digging.

Also see this related issue: dherault/serverless-offline#931

And this one: dherault/serverless-offline#864

[francisu]

And this one: dherault/serverless-offline#864
The above is what broke it. This was a change introduced in serverless-offline 6.0.0

[ZentPeople]

https://github.com/dherault/serverless-offline/releases/tag/v9.0.0

from serverless-offline v 9.0.0 hard reloading is not supported by default. To support hot reloading, you have to use the below flag

--reloadHandler

[cullylarson]

This is happening for me too. Modifying files does not trigger a rebuild. Running sls offline --stage development. Versions:

"serverless": "^3.24.1"
"serverless-offline": "^11.2.3"
"serverless-webpack": "^5.10.0"

I tried useChildProcesses: true and including --reloadHandler (sls offline --reloadHandler --stage development). Neither made a difference.

EDIT: The issue turned out to be that our bundles were too big. We were in the process of moving to a monorepo and nodeExternals no longer marked some packages as external and they were bundled. For some reason it was too much for serverless-webpack or something. Anyway, including --reloadHandler in the sls offline command is all we needed to include to resolve this.

If anyone else runs into this issue, adding this to webpack.config.js is was fixed the underlying, "bundles are too big" issue for us:

externals: [
  nodeExternals(),
  // we need another nodeExternals for the root-level node_modules since
  // that's where most of our externals will be
  nodeExternals({
    modulesDir: path.resolve(__dirname, "path/to/root/node_modules"),
  }),
],

[jrobichaud]

According to the documentation

reloadHandler

Reloads handler with each request.

--reloadHandler does not activate a reload when a file changes, it reloads regardless after each request.

This has the side effect to adds delays between each requests.

[iSeiryu]

I solved it by adding this to my serverless.yml

plugins:
  - serverless-plugin-typescript
  - serverless-offline
...
custom:
  serverlessPluginTypescript:
    tsConfigFileLocation: './tsconfig.build.json'

and running

sls offline start --config serverless.yml --reloadHandler

Packages:

"serverless-esbuild": "^1.23.3",
"serverless-offline": "^11.6.0",
"serverless-plugin-typescript": "^2.1.4",

[thetrevdev]

According to the documentation

reloadHandler
Reloads handler with each request.

--reloadHandler does not activate a reload when a file changes, it reloads regardless after each request.

This has the side effect to adds delays between each requests.

Feel free to use this plugin to only reload after a webpack compilation.
It just wires up the two hooks: webpack:compile:watch:compile -> offline:functionsUpdated

https://www.npmjs.com/package/serverless-webpack-offline-reload

[j0k3r]

@thetrevdev if this is working solution maybe this can be directly integrated into serverless-webpack (with condition about enable it or not depending if serverless-offline is part of the project)? WDYT?

[thetrevdev]

It looks like webpack watch is only initiated from serverless-offline. I see no issue with directly integrating this.

It would just be an update to a single line of code. I'll leave the plugin as a stop gap and maybe someone wants to champion a PR with the single line of code below.

https://github.com/serverless-heaven/serverless-webpack/blob/master/index.js#L224

'webpack:compile:watch:compile':   BbPromise.bind(this)
          .then(() => this.serverless.pluginManager.spawn('offline:functionsUpdated'))