Copying missing files during a typescript build on deploy

Published on January 03, 2021

Tagged: #typescript #devops

Follow me on twitter for more posts like this

If you build your nodeJS project using typescript, it’s important to know that the typescript compiler tsc will only include files that are .js or .ts.

If you have an issue where you deploy or build a typescript project and you get a file not found issue or similar, it’s probably because you missed that typescript does not process these kinds of files for you.

If you need to include files like XML (.xml) or images in your typescript project build output, you will have to copy them manually before or after the build process.

This is one way to copy assets in a typescript build.

1. Install copyfiles

copyfiles is an npm package so install it using your favorite package manager

yarn install -D copyfiles

# or

npm install --save-dev copyfiles

2. Add a copy files script

Add a script to your package.json file to copy the files you need. There are many options for copy files so check out their documentation, but this is what I typically use.

You can see here that I also have a "build" script that will be called to build the application.

I assume you will output the typescript build to build folder but this will be unique for your project. The last option in the "copyMySpecialFiles" script should match where you want the files to go!

{
  "scripts": {
    "build": "tsc -outDir build",
    "copyMySpecialFiles": "copyfiles --error --up 1 src/the-path/to-my/special-files/*.* build"
  }
}

I’m adding the script copyMySpecialFiles. This copies all the files in the folder to build. The --up 1 tells copyfiles not to include the folder path when it copies. --error fails when there is an error. This is important to highlight unexpected issues when copying by stopping your build.

2. Add a post build script

Here i’m adding a special postbuild script. This script will automatically be run by tsc when the typescript build is successful. You don’t have to explicitly call this anywhere. If postbuild exists, tsc will call it for you.

{
  "scripts": {
    "build": "tsc -o build",
    "copyMySpecialFiles": "copyfiles --error --up 1 src/the-path/to-my/special-files/*.* build",
    "postbuild": "yarn run copyMySpecialFiles"
  }
}

And that’s it! you can use this to copy any required pdfs, images, excel files etc to the build output for you typescript Node.js application.

Darragh ORiordan

Hi! I'm Darragh ORiordan.

I live and work in Sydney, Australia enjoying the mountains and the ocean.

I build and support happy teams that create high quality software for the web.

Contact me on Twitter!


Read more articles like this one...

List of article summaries

#typescript

How to write an ESLint plugin in TypeScript

I use NestJS at my day job. It’s a complicated framework sometimes and there are lots of things that devs “just have to remember” or there will be bugs in your application that you won’t see until runtime.

I wanted to remove this cognitive load from NestJS engineers so that they can focus on valuable work instead. I wrote an ESLint plugin to alert developers directly in their IDE or editor when these common issues exist - (Available on NPM) https://www.npmjs.com/package/@darraghor/eslint-plugin-nestjs-typed

Here is what I learned about writing ESLint plugins in typescript for typescript while building the plugin.

#typescript

Create an only ever true boolean type in typescript

Integrating with an API where a boolean can only be undefined or true I needed to type it. It’s easy enough but I just wanted to jot it down in case any one else needs this in the future.

#typescript

How to change the type of output for a property filter in typescript

If you have an iterable filter on a property in typescript you might have a slightly different model coming out of the filter based on the filter condition.

By setting the types correctly you can potentially save having to add manual typing hints in whatever follows the filter.

It’s easier to show this with code so see below!

Thanks to one of my colleagues for suggesting this one in a code review.