How to Automate Your Dev Environment With Tmuxinator

Increase productivity and make running your local environment a painless experience

The Problem

Whether you’re a hobbyist, a corporate developer, or an entrepreneur, you’ve surely run into the following problem: You want to start coding, so you need to get your app up and running.

cd dev/myapp/client
npm start

Now open another terminal for the server.

cd dev/myapp/server
nodemon

And maybe another couple of terminals for an API server and any other services you need to run locally. Now you want to install a package or commit some changes you made. Your open terminals are all busy with build tasks, so you’ll need to open up another terminal, navigate to the directory you need, and then do the same each time any other directory has changes. Ugh!

You could of course open 2 terminals for each directory (one for the build task and one for running commands) but this can get messy fast. I personally found this very tedious and made it annoying to work on personal projects for short intervals of time due to all the setup.

This can be a lot to set up every time

There has to be a better way!

Tmux is a great start to the solution. It allows multiple terminal sessions to be run within a single window and has nifty ways to organize panes and easily create new windows that are easy to navigate. The most powerful feature in my opinion is that you can write scripts to set up terminals in specific positions and run specific commands on each.

For many years this is what I used to automate my dev environments. This was a huge step up as I could now launch all of my terminals in different directories running different commands in the layout I wanted, all with a single command! But writing these scripts was still tedious, especially if I wanted to radically change the layout.

Our Hero Arrives: Tmuxinator

Tmuxinator is an incredible tool that handles tmux configuration so you don’t even need to write scripts for all of that juicy setup! Automating your dev environment has never been easier.

How to Use

Tmuxinator can be installed from your unix package manager, but is hosted directly as a Ruby gem and is generally most up-to-date there.

gem install tmuxinator

You’ll also need to have tmux installed and your $EDITOR variable set. If you’re not sure, run echo $EDITOR and see if there’s any output. To set your editor to vim, run export EDITOR='vim'. For VS Code, it’s export EDITOR='code'. To make this change permanent, add that line to your ~/.bashrc.

Now let’s create a new tmuxinator configuration for our project:

tmuxinator new myapp

Replace “myapp” with the name of your project. The configuration file will be created in ~/.config/tmuxinator/myapp.yml (or in your current directory if you used the --local flag). The config file will auto-open in your chosen editor where you can now see how simple configuring tmuxinator really is!

There’s a lot of lines above that provide additional configuration options but aren’t needed for a simple setup. I wanted to create a 2 window setup (1 window for build tasks and 1 for directory commands) with 2 panes each (1 for client and 1 for server), so here’s my resulting tmuxinator config:

You can see the 2 windows I have defined: “main” and “build”. Within each, I have my 2 panes “client” and “server”. Then it’s simply a matter of defining what commands I want to run in each pane on startup and we’re done!

To run our configuration, we simply run:

tmuxinator start myapp

Additional Configuration

This is of course just a simple example of the powerful capabilities of tmuxinator. For more layouts, refer to tmux’s listing of layouts. And lastly, take a look at tmuxinator’s own documentation for customization. Happy hacking!