Automatically compile TypeScript sources and copy static (template)files

3
votes

While debugging an express server my 'build & run' process consists of 3 steps:

  • Compiling TypeScript sources using tsc
  • Copy static files like images and templates to dist/
  • Run the compiled server.js file

Each of these steps can be automated using a watch mode, but I'm struggling to combine the three together. I managed to get it working by using tsc-watch to watch the TypeScript sources, cpx to copy the static files and finally nodemon to restart the server. This approach works but there are a couple of issues:

  • cpx only watches files that existed at the time it started (I think tsc-watch does this too sometimes, it's a little weird)
  • This approach requires 3 commands in 3 seperate terminals, which is just plain inconvenient
  • Both cpx & tsc-watch do not handle Ctrl+C exit correctly, causing all sorts of issues

I found some other questions that relate to this subject, but none of them fix the aforementioned issues (although they did tell me about cpx & tsc-watch). I don't want to use concurrently because it can cause timing issues and it mixes console output from the different processes (most notably tsc-watch and the actual server).

Using tsc-watch'es --onSuccess to copy the static files is not sufficient, since changes in the template files won't be picked up on. This can be worked around by changing a comment in a source file, but this triggers a complete recompile (restarting the server). Using webpack's watch mode wouldn't be sufficient either since it doesn't pick up on new files and contaminates the console output even more.

Are there any solutions to this that I may have missed? Should I just write a script that automatically opens the 3 required terminals?

1
node.jstypescriptexpressejsnodemon
I may not be able to help you reach your end goal, but I have been using ts-node-dev which uses ts-node under the hood. I believe you can add your onSuccess to your tsconfig.json. ts-node-dev will watch and restart your server when you make changes to .ts files. – Busch

1 Answers

0
votes

I ended up going for webpack with the copy-webpack-plugin.

Although the watch mode is unfortunately broken at the time of writing, it seems like it fits my needs almost perfectly:

  • This approach requires only 2 terminals (one for webpack, the other for nodemon). It's not perfect, but it's a lot better than 3.
  • New files should be picked up automatically (although currently not working 100% correctly)
  • A change in static files shouldn't cause a complete recompile that would cause the server to restart (again this currently doesn't work 100% correctly)
  • Webpack handles Ctrl+C exits gracefully
  • And the most important reason for me: copy-webpack-plugin allows me to specify how I want my files to be copied in more detailed with the context option