How to automate development tasks using NPX
"Give me six hours to chop down a tree and I will spend the first four sharpening the axe." - Abraham Lincoln
When I look at what I do as a developer, most of the things are repeated actions that I don’t automate because “this is the last time I need to do this”. Editing a file, restarting some server, switching to the browser, refreshing and navigating it. Then I make another small change and do the same process again.
There is a bias I see throughout my work. It goes like this: I feel that the task is almost finished, so I don’t automate. But then it is not, and I find myself working on the same task an hour and 20 refreshes later. If I look back what I did in that hour, I mostly wasted time on things I could automate in 5 minutes.
To battle this, the best thing is to make these automations as easy as possible. Did you know that in economics there is an enormous difference between ridiculously cheap and free? The same applies to scripts. The difference between creating a
package.json and add some scripts versus a one-liner that can be copy-pasted can not be overestimated.
In this mindset, I learned about NPX, the NPM package runner. This is the perfect tool for one-liners as you get the full ecosystem of the CLI tools in the NPM repository but you don’t need to install anything. Just learn some of the most helpful tools and you will be able to automate the mundane work when you start working on a task.
NPX can replace globally installed packages. Instead of the usual route of doing an
npm i -g package then use the
package, you can achieve the same with
There are a few configurations NPX supports. When you need multiple packages installed specify them with
-p <package>. In this case, you need to define the package to run separately:
npx -p package1 -p package2 package-to-run
webpack to run but it is a peer dependency, so you need to install both:
npx -p webpack -p webpack-cli webpack-cli
The default case of
npx package translates to:
npx -p package package
If you need to run a specific version of a package, define it with
The downside of using NPX is that it runs an install every time which takes a few seconds. In cases when you need it to run as fast as possible, this can be a problem.
Let’s see a few use-cases for NPX! And contrary to all other articles about NPX, this list won’t include
nodemon to be an indispensable tool in my toolkit. It watches files and whenever they change it runs a command. Simple, and I’m sure there are million other ones, but with NPX
nodemon can be run as a one-liner and it just works.
To run the project every time a source file is changed, use:
npx nodemon --watch src/ --exec "npm run"
One source of problems is that it watches only js files. To specify other extensions, use the
-e <extensions> argument. For a React+TS project, you’d want
Another gem that supercharges the development workflow:
npx livereload . -d
No more alt-tab, ctrl-r. By the time you get there, the browser is already refreshed.
Note that you need a browser extension installed and activated.
JS obfuscation can not be easier than this:
npx typescript main.ts --out main.js
While it is better to have a
package.json and have scripts that run Webpack, it is nevertheless possible to run it without all that:
npx -p webpack -p webpack-cli webpack-cli main.js
Serve the current directory as a web server:
Do you also have an API along with your static assets? Specify another URL that will be used for everything but the local files:
npx http-server --proxy http://api
In case you need HTTPS, generate a self-signed certificate and specify that:
npx devcert-cli generate localhost && http-server -S -C localhost.cert -K localhost.key
To run your code through a minifier:
npx terser file.js > file.min.js
Check for new versions
How to know if a dependency has a new version? Run this:
To run two things in parallel, use the
npx concurrently "<command1>" "<command2>"
You can easily run
livereload together with this:
npx concurrently "npx livereload . -d" "npx http-server"
To have a minified script printed out in a more readable format, use the
npx js-beautify main.js
Syntax highlighting can also easy readability:
You can also combine the above two:
npx js-beautify main.js | npx cli-highlight
Easily compile SCSS into CSS:
npx node-sass custom.scss
eslint with the default configuration:
npx eslint main.js
Easily format your code without installing anything with
npx prettier main.js
npx standard --fix
To show your work to someone, tunnel a local port through the internet with
npx localtunnel --port 8080
By combining it with
http-server you can showcase a local project without installing anything:
npx concurrently "npx localtunnel --port 8080" "http-server"
When you need to code short functions, setting up a full-fledged
package.json and all the dependencies and scripts just to use a better technology usually does not pay off. But with the above simple one-liners, you can easily compose useful short scripts.
Have you ever wanted to use Typescript for Lambda?
To continually compile and exec your code, you can use this script:
npx nodemon --watch main.ts --exec "npx --quiet typescript main.ts && node main.js"
And when you are ready to deploy, compile and minify with this script:
npx typescript main.ts --out >(npx terser > res.js)
I’ve been using NPX packages for quite a while, and I see enormous benefits. With just a few tools I can automate most of the non-creative work I do. That leaves me with more time to do my job.