Hot reloading not working with serverless-plugin-typescript

[pavlelekic]

Hello, Thank you for this wonderful plugin, however I cannot get the hot reloading working. I did everything like in the docs, but I have typescript re-transpiling on change but then the server doesn’t pick up that change, doesn’t reload. Here is serverless.yml file I’m using

plugins:
  - serverless-plugin-typescript
  - serverless-offline-edge-lambda
  - "@silvermine/serverless-plugin-cloudfront-lambda-edge"

functions:
  lambda:
    handler: src/handlers.lambda1
    lambdaAtEdge:
      eventType: "origin-request"
      pathPattern: "*"
      includeBody: false

custom:
  offlineEdgeLambda:
    path: ".build"

Also, it would be nice to have a working example with deployment working as well.

[robblovell]

I have had trouble with esbuild reload as well. Even if I run an esbuild watcher separately, it doesn't pick up the changes.

Parts of my serverless.ts file:

import { baseServerlessConfiguration, env } from '../../serverless.base';
import { options } from './esbuild.config';
...
plugins: [
    ...baseServerlessConfiguration.plugins as string[],
    'serverless-plugin-existing-cloudfront-lambda-edge',
    'serverless-offline-edge-lambda',
  ],
...
 offlineEdgeLambda: {
      path: '.esbuild/.build',
      port: env?.OFFLINE_PORT_MEDIA || "",
    },
    esbuild: {
      ...options,
      watch: {
        pattern: '(src)/**/*.(ts)',  <--- This is wrong, should be 'src/**/*.(ts)' or 'src/**/*.ts'
        ignore: ['.esbuild', 'test', ]
      },
    },
...

package.json

...
    "serverless-offline-edge-lambda": "^1.2.0",
...

I have tried various things and nothing seems to work.

[robblovell]

Comparing this code to offline serverless, I see that there are different lifecycle hooks in the two plugins.

For serverless-offline:

hooks = {
    'offline:functionsUpdated:cleanup': this.#cleanupFunctions.bind(this),
    'offline:start': this.#startWithExplicitEnd.bind(this),
    'offline:start:end': this.end.bind(this),
    'offline:start:init': this.start.bind(this),
    'offline:start:ready': this.#ready.bind(this),
  }

For serverless-offline-edge-lambda:

this.hooks = {
            'offline:start:init': this.onStart.bind(this),
            'offline:start:end': this.onEnd.bind(this),
            'webpack:compile:watch:compile': this.onReload.bind(this)
        };

There are also different lifecycle events for the start command. For serverless-offline:

lifecycleEvents: ['init', 'ready', 'end'],

For serverless-offline-edge-lambda:

lifecycleEvents: ['init', 'end'],

I think I will play around with these to investigate to at least get build changes accomplished outside of the serverless working as a work around (esbuild and tsc watchers run separately). Perhaps the 'read' event would do the trick...

[robblovell]

I figured out that my pattern for the esbuild watch is wrong, it should be:

pattern: 'src/**/*.ts',

That won't help with the typescript builder, but it's a piece for me...

Still, the plugin is not recognizing that the files have been rebuilt and it is not serving up the newly compiled/bundled files.

[robblovell]

I have a possible solution that uses a watch with a busting of the require cache to implement hot-reload in #515

There is probably a way to work a link between the serverless-esbuild or serverless-typescript plugins, but I couldn't make it work.

[robblovell]

This was merged into the fork in my personal account at https://github.com/robblovell/serverless-offline-edge-lambda, but has not yet made it into the parent fork.

[mattstrom]

I merged your PR into the main fork. It should be published on NPM now too as 1.2.2. Thanks again for the contribution!