[UPDATE 2017/09/04] Thanks to @LindyDonna 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).
--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
- Copy all the .json files.
- Compile with tsc. The
outDiroption to compile
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.
"build:func": "ncp functionApp/src functionApp/build --filter \\w\\.json && tsc -p functionApp",
"start:funchost": "cd functionApp/build && func host start --debug vscode && cd ../..",
"watch:func": "npm-run-all -p \"build:func -- --watch\" start:funchost"
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)
hosts.json entry is as follows:
Here’s full details of the available
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.