Updated on January 4, 2022 in #javascript

Creating an esbuild Plugin to Efficiently Copy Static Files

We'll compare the MD5 hash of the source and dest files and only copy files that changed. The plugin is available on NPM's registry.

I recently created an esbuild plugin called esbuild-copy-static-files. You can yarn or npm install it and it’s listed here https://www.npmjs.com/package/esbuild-copy-static-files.

In this video we’ll go over both using it and how it works.

# Demo Video

Timestamps

• 0:24 – How I prefer to organize my assets
• 2:13 – What this plugin does and how it efficiently copies files
• 3:16 – A quick look at a basic esbuild config
• 5:04 – Configuring the plugin with a custom destination directory
• 6:29 – Demonstrating live reload with Phoenix
• 7:23 – Configuration options for this plugin
• 9:46 – How MD5 hashes are calculated
• 10:25 – Skimming the README file, how to install it, etc.
• 12:05 – High level overview of creating an esbuild plugin
• 14:12 – Copying new files while esbuild’s watcher is running

References Links

• https://github.com/nickjj/esbuild-copy-static-files
• https://github.com/nickjj/docker-flask-example
• https://github.com/nickjj/docker-django-example
• https://github.com/nickjj/docker-phoenix-example
• https://github.com/nickjj/docker-rails-example
• https://github.com/nickjj/docker-node-example
• https://github.com/nickjj/docker-play-example

Are you going to use this plugin? Let me know below.