Startup your development environment with a single command

Simplify Your Dev Workflow with Tmux and Tmuxinator

👋 Hi, this is Sagar. I write about software engineering, improving developer productivity, and career growth.

---

As developers, we often find ourselves repeating the same setup tasks every day: opening multiple terminals, navigating to different directories, and starting various services. While it might not seem time-consuming now, switching between projects or working with multiple services can make these repetitive tasks tiresome and inefficient.

In this week’s newsletter, I will walk you through the steps to leverage tmux and tmuxinator to initialize your entire development environment with a single command.

Tmux

tmux short for terminal multiplexer is a tool that enables a number of terminals to be created, accessed, and controlled from a single screen.

Installation:

sudo apt install tmux

Once installed, you can start tmux with

tmux

You now have a shell running inside tmux and you can start a new shell without having to launch a new terminal window.

You can read about how you can fully utilize and customize tmux here. If you want to see what my configurations look like, you can find it at https://github.com/sagarPakhrin/.dotfiles/

Starting your dev env

Let’s say you have a simple nodejs API running in docker with docker compose.
Let’s get this api up and running.

1. Launch tmux from your project root.

tmux

2. Open a horizontally split pane and adjust the layout.

Ctrl-b + "

Ctrl-b + Ctrl-↓ 
# (without leaving the ctrl key, keep pressing ↓ until you like the layout)

In tmux, Ctrl-b is called the prefix. So, going forward, anytime you see prefix, it means Ctrl-b

Your tmux panes should look something like this.

3. You can switch between the panes with the command prefix + ↓ or prefix + ↑

4. Run the dev server on the bottom pane and editor in the top pane. Switch to the bottom pane and run your dev server. Since I’m using docker, I’ll run

docker compose up -d
docker compose -f api

prefix + ↑ 
nvim

# or 
code .

Now, it will be a pain if we have to keep doing this every time we need to start the dev environment, so let’s automate this with tmuxinator

Tmuxinator

tmuxinator is a tool that helps create and manage tmux sessions and even run commands with a simple YAML configuration.

Installation:

sudo apt install tmuxinator

Set the default editor by placing this in your `.bashrc` or `.zshrc` and restart the terminal

export EDITOR='nvim'

Now let’s start creating the configuration.

tmuxinator new <name-of-your-project>

I’ll call my project node101

tmuxinator new node101

Edit the sample yml to look like this and save and quit the editor

name: node101
root: ~/Projects/node101

windows:
  - editor:
      layout: main-horizontal
      panes:
        - nvim
        - docker compose up -d; docker compose logs -f api

Finally, you can start up your development environment with a single command.

tmuxinator node101

Bonus

Custom layouts:

You can resize the panes and view the layout using the command
tmux list-windows which will give us the result

0: editor* (2 panes) [161x45] [layout a210,161x45,0,0[161x33,0,0,0,161x11,0,34,1]] @0 (active)

Copy the layout, edit node101, and change the layout.

tmuxinator edit node101

name: node101
root: ~/Projects/node101

windows:
  - editor:
      layout: a210,161x45,0,0[161x33,0,0,0,161x11,0,34,1]
      panes:
        - nvim
        - docker compose up -d; docker compose logs -f api

Create an alias:
Create an alias for tmuxinator so your command becomes shorter

Place this in your bash or zsh profile

alias txs='tmuxinator'
alias txe='tmuxinator edit'

Now you can launch your tmux sessions with

txs node101

# or edit with 
txe node101

Sample template

# /Users/sagar/.config/tmuxinator/fullstack.yml

name: fullstack
root: ~/Projects/fullstack/backend/

# start session with this window open startup_window: backend
startup_window: backend

windows:
  - frontend:
	  root: ~/Projects/fullstack/frontend/
      layout: e82f,189x52,0,0[189x40,0,0,0,189x11,0,41,3]
      panes:
        - nvim
        - npm run dev
  - backend:
      root: ~/Projects/fullstack/backend/
      layout: e82f,189x52,0,0[189x40,0,0,0,189x11,0,41,3]
      panes:
        - nvim
        - docker compose -f ../docker-compose.yml up -d

Conclusion

We’ve looked into how tmux and tmuxinator can be used to easily start up your development environment and get you directly into coding and problem-solving.
Simple optimizations like this can speed up your development workflow and help you focus on what matters most.