Development workflows using tmux and tmuxinator

In this blog, we will setup and startup development environment using tmux and tmuxinator.

As tmuxinator is based on tmux, first we will take a look into tmux and its basic commands, then we will create yml templates for project setup.

Tmux introduction

Tmux stands for Terminal Multiplexer.
Using tmux you can create different windows and panes within one window of one terminal and move around these windows and panes.
It lets you switch between several programs inside one terminal, detach and reattach them to a different terminal at will.

Tmux installation

1. Ubuntu: sudo apt install tmux
2. Windows: Using wsl for ubuntu`
3. OSX: brew install tmux

Open your terminal and start a tmux session by typing
tmux
This will open a tmux window.

Tmux Basic commands

1. Create vertical pane: Ctrl + a + %
2. Create horizontal pane: Ctrl + a + “
3. Switch between panes: Ctrl + a + <- ->
4. Close down pane: exit or Ctrl + a + x

Tmux window commands

1. Create new window: Ctrl + a + c
2. Switch between windows:Ctrl + a + n OR Ctrl + a + p
3. Switch between windows: Ctrl + a + 0 OR Ctrl + a + 1
4. Rename windows: Ctrl + a + ,
5. Exit Windows: exit

Tmux session commands

1. View Tmux session: tmux ls
2. Start new session: tmux new -s docker
3. Rename session: tmux rename-session -t 0 git
4. Detach session: Ctrl + a + d
5. Reattach session: tmux attach -t 0
6. Delete or kill session: tmux kill-session -t docker

That's all the commands we need to get going with tmuxinator.

Tmuxinator

Tmuxinator is a tool that allows you to easily manage tmux sessions by using yaml files to describe the layout of a tmux session, and open up that session with a single command.

Installation: gem install tmuxinator

Tmuxinator commands

Create new template: Tmuxinator new <todo_project_name>
Edit existing template: Tmuxinator edit <project_name>
Start project: Tmuxinator start <project_name>

We have a sample rails project as backend and react project as frontend.

Usually for development purpose we need.

1. editor
2. rails server
3. sidekiq server
4. rails console
5. git for rails project
6. react npm start
7. git for react project

We can create a predefined template using tmuxinator.
To start creating new project template in terminal: tmuxinator new <project name>

A editor is opened with yml file for project setup.

1. Give name to your project
   name: todo

2. You need to define root of the project
   root: ~/Documents/react-practice/todo-api

3. Then you can define you different windows are shown
   and commands to execute in that window.
   server: bundle exec rails s -p 4001
   Above will create a window name server and start the rails server in the specified root folder.

4. You can define panes in window which splits the screen

   react_project:
     root: ~/Documents/react-practice/todo-app
     layout: even-horizontal
     panes:
       - npm start
       - git status
   

   Above will create a window name react_project, change root folder for this window to react app then will start react server and git in 2 horizontal equally split panes.

A sample tmuxinator file for starting rails and react server.

name: todo
root: ~/Documents/react-practice/todo-api

windows:
  - editor: vim .
  - server: bundle exec rails s -p 4001
  - sidekiq: bundle exec sidekiq
  - git: git status
  - rails_console: bundle exec rails console
  - react_project:
      root: ~/Documents/react-practice/todo-app
      layout: even-horizontal
      panes:
        - npm start
        - git status

To start the development setup using tmuxinator in terminal.
tmuxinator start todo

Tmux session for todo app with different windows and panes.

To close the todo app tmux session.
tmuxinator stop todo

Hope this will help you.
Thank you for reading