[UPDATE 2017/09/04] Thanks to for pointing out the hosts.json option to added extra directories to the host watch list. We no longer need to use Remy Sharp’s nodemon to restart the host.

For front end development we’ve become used to automatic rebuild and run as TypeScript source files are edited. Webpack, for example, can be configured to watch files, transpile and reload into the dev server. That’s fast and efficient and hot module reloading makes things even smoother. A key to the speed is that only those files that change are processed, just like the old days with make for compiled languages (and unlike gulp, grunt etc).

The Azure Function Core Tools host will fortunately monitor files and reload as required when a function app is running in the host. It only processes JavaScript files and there are no hooks to allow adding transpilation from TypeScript (see note below). But that’s not a real problem as the TypeScript compiler has a --watch option which will recompile and update the .js files, which then cause the host to reload them. We just need to run tsc and the function host as parallel tasks and npm-run-all handles that for us.

By default the host only watches the files that contain function entry points, not any other files they include. That’s a problem if like me you have refactored so modules are shared between the Functions. However there is a handy watchDirectories option in host.json that lets you add extra directory trees to be monitored.

My build process is to have the source in functionApp\src and build is in 2 steps into functionApp\build ;

• Copy all the .json files.
• Compile with tsc. The tsconfig.json uses the outDir option to compile **/*.ts.

Modules shared between functions are in _modules folder. All the required dev config files and node_modules are in functionApp. See this example for full details.

Here’s a fragment of package.json that implements the watch, along with the build and start host scripts.

The very handy npm-run all lets us run both the build and Function host in parallel. As tsc --watch compiles all files before it watches them the host will reload all files after starting (I guess we could add a delay to stop this, but that is hacky and fragile)

The hosts.json entry is as follows:

Here’s full details of the available host.json options.

Footnote:

As an aside, I do plan to try changing the Core Tools to run .ts as well as .js files and then launch with ts-node which will set node to transpile and load the resulting  .js as part of require('./module.ts') handling. That will allow the processing of individual files as they change.

Categories: Uncategorized

Tagged as: Functions TypeScript