Development workflows using tmux and tmuxinator
Tags: productivity, tmux, tmuxinator, webdev
Published: 2021-11-07 18:10:29

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: <kbd>Ctrl</kbd> + <kbd>a</kbd> + <kbd>%</kbd>
2. Create horizontal pane: <kbd>Ctrl</kbd> + <kbd>a</kbd> + <kbd>“</kbd>
3. Switch between panes: <kbd>Ctrl</kbd> + <kbd>a</kbd> + <kbd><- -></kbd>
4. Close down pane: exit or <kbd>Ctrl</kbd> + <kbd>a</kbd> + <kbd>x</kbd>

## Tmux window commands

1. Create new window: <kbd>Ctrl</kbd> + <kbd>a</kbd> + <kbd>c</kbd>
2. Switch between windows:<kbd>Ctrl</kbd> + <kbd>a</kbd> + <kbd>n</kbd>  OR <kbd>Ctrl</kbd> + <kbd>a</kbd> + <kbd>p</kbd>
3. Switch between windows: <kbd>Ctrl</kbd> + <kbd>a</kbd> + <kbd>0</kbd> OR <kbd>Ctrl</kbd> + <kbd>a</kbd> + <kbd>1</kbd>
4. Rename windows: <kbd>Ctrl</kbd> + <kbd>a</kbd> + <kbd>,</kbd>
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: <kbd>Ctrl</kbd> + <kbd>a</kbd> + <kbd>d</kbd>
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
<pre>
react_project:
      root: ~/Documents/react-practice/todo-app
      layout: even-horizontal
      panes:
        - npm start
        - git status
</pre>
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.
<pre>
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
</pre>

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

Tmux session for todo app with different windows and panes.
![Todo App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eewxt03tg4rcw6bgoj8p.jpg)

To close the todo app tmux session.
```tmuxinator stop todo```

Hope this will help you.
Thank you for reading