7 Utilities I Use to Boost Development Workflow Productivity
As a developer, efficiency is key. Being a full-stack developer myself, I’ve always thought of replacing boring tasks with automation.
What could happen if I just keep writing new code in a Python file, and it gets evaluated every time I save it? Isn’t that a productivity boost?
'Hot Reload' is that valuable feature of the modern development process that automatically reloads or refreshes the code after you make changes to a file. This helps the developers see the effect of their changes instantly and avoid manually restarting or refreshing the browser.
Over these years, I’ve used tools like entr to keep docker containers on the sync every time I modify docker-compose.yml file or keep testing with different CSS designs on the fly with browser-sync.
1. entr
entr (Event Notify Test Runner) is a lightweight command line tool for monitoring file changes and triggering specified commands. It’s one of my favorite tools to restart any CLI process, whether it be triggering a docker build or restarting a python script or keep rebuilding the C project.
For developers who are used to the command line, entr provides a simple and efficient way to perform tasks such as building, testing, or restarting services in real time.
Key Features
- Lightweight, no additional dependencies.
- Highly customizable
- Ideal for use in conjunction with scripts or build tools.
- Linux only.
Installation
All you have to do is type in the following command in the terminal:
sudo apt install -y entr
Usage
Auto-trigger build tools: Use entr to automatically execute build commands like make, webpack, etc. Here's the command I use to do that:
ls docker-compose.yml | entr -r docker build
Here, -r
flag reloads the child process, which is the run command ‘docker build’.
Automatically run tests: Automatically re-run unit tests or integration tests after modifying the code.
ls *.ts | entr bun test
2. nodemon
nodemon is an essential tool for developers working on Node.js applications. It automatically monitors changes to project files and restarts the Node.js server when files are modified, eliminating the need for developers from restarting the server manually.
Key Features
- Monitor file changes and restart Node.js server automatically.
- Supports JavaScript and TypeScript projects
- Customize which files and directories to monitor.
- Supports common web frameworks such as Express, Hapi.
Installation
You can type in a single command in the terminal to install the tool:
npm install -g nodemon
If you are installing Node.js and npm for the first on Ubuntu-based distributions. You can follow our Node.js installation tutorial.
Usage
When you type in the following command, it starts server.js and will automatically restart the server if the file changes.
nodemon server.js
3. LiveReload.net
LiveReload.net is a very popular tool, especially for front-end developers. It automatically refreshes the browser after you save a file, helping developers see the effect of changes immediately, eliminating the need to manually refresh the browser.
Unlike others, it is a web–based tool, and you need to head to its official website to get started. Every file remains in your local network. No files are uploaded to a third-party server.
Key Features
- Seamless integration with editors
- Supports custom trigger conditions to refresh the page
- Good compatibility with front-end frameworks and static websites.
Usage
It's stupidly simple. Just load up the website, and drag and drop your folder to start making live changes.
4. fswatch
fswatch is a cross-platform file change monitoring tool for Linux, macOS, and developers using it on Windows via WSL (Windows Subsystem Linux). It is powerful enough to monitor multiple files and directories for changes and perform actions accordingly.
Key Features
- Supports cross-platform operation and can be used on Linux and macOS.
- It can be used with custom scripts to trigger multiple operations.
- Flexible configuration options to filter specific types of file changes.
Installation
To install it on a Linux distribution, type in the following in the terminal:
sudo apt install -y fswatch
If you have a macOS computer, you can use the command:
brew install fswatch
Usage
You can try typing in the command here:
fswatch -o . | xargs -n1 -I{} make
And, then you can chain this command with an entr command for a rich interactive development experience.
ls hellomake | entr -r ./hellomake
The “fswatch” command will invoke make to compile the c application, and then if our binary “hellomake” is modified, we’ll run it again. Isn’t this a time saver?
5. Watchexec
Watchexec is a cross-platform command line tool for automating the execution of specified commands when a file or directory changes. It is a lightweight file monitor that helps developers automate tasks such as running tests, compiling code, or reloading services when a source code file changes.
Key Features
- Support cross-platform use (macOS, Linux, Windows).
- Fast, written in Rust.
- Lightweight, no complex configuration.
Installation
On Linux, just type in:
sudo apt install watchexec
And, if you want to try it on macOS (via homebrew):
brew install watchexec
You can also download corresponding binaries for your system from the project’s Github releases section.
Usage
All you need to do is just run the command:
watchexec -e py "pytest"
This will run pytests every time a Python file in the current directory is modified.
6. BrowserSync
BrowserSync is a powerful tool that not only monitors file changes, but also synchronizes pages across multiple devices and browsers. BrowserSync can be ideal for developers who need to perform cross-device testing.
Key features
- Cross-browser synchronization.
- Automatically refreshes multiple devices and browsers.
- Built-in local development server.
Installation
Considering you have Node.js installed first, type in the following command:
npm i -g browser-sync
Or, you can use:
npx browser-sync
Usage
Here is how the commands for it would look like:
browser-sync start --server --files "/*.css, *.js, *.html"
npx browser-sync start --server --files "/*.css, *.js, *.html"
You can use either of the two commands for your experiments.
This command starts a local server and monitors the CSS, JS, and HTML files for changes, and the browser is automatically refreshed as soon as a change occurs. If you’re a developer and aren't using any modern frontend framework, this comes handy.
7. watchdog & watchmedo
Watchdog is a file system monitoring library written in Python that allows you to monitor file and directory changes in real time. Whether it's file creation, modification, deletion, or file move, Watchdog can help you catch these events and trigger the appropriate action.
Key Features
- Cross-platform support
- Provides full flexibility with its Python-based API
- Includes watchmedo script to hook any CLI application easily
Installation
Install Python first, and then install with pip using the command below:
pip install watchdog
Usage
Type in the following and watch it in action:
watchmedo shell-command --patterns="*.py" --recursive --command="python factorial.py" .
This command watches a directory for file changes and prints out the event details whenever a file is modified, created, or deleted.
In the command, --patterns="*.py" watches .py files, --recursive watches subdirectories and --command="python factorial.py" run the python file.
Conclusion
Hot reloading tools have become increasingly important in the development process, and they can help developers save a lot of time and effort and increase productivity. With tools like entr, nodemon, LiveReload, Watchexec, Browser Sync, and others, you can easily automate reloading and live feedback without having to manually restart the server or refresh the browser.
Integrating these tools into your development process can drastically reduce repetitive work and waiting time, allowing you to focus on writing high-quality code.
Whether you're developing a front-end application or a back-end service or managing a complex project, using these hot-reloading tools will enhance your productivity.
Bhuwan Mishra is a Fullstack developer, with Python and Go as his tools of choice. He takes pride in building and securing web applications, APIs, and CI/CD pipelines, as well as tuning servers for optimal performance. He also has a passion for working with Kubernetes.