Starting Front-End and Back-End Scripts at the Same Time

When you need to start a backend and transpile your front-end code for development purposes, here is a handy script to do both at the same time.

I recently starting playing with a new project where I have decided to use Aurelia as a single page application and power the backend with Django.

In order to start things up, I generally will have two terminal windows - one for running the backend (Django) and on for running the front-end (Aurelia).

As I was pondering ideas on how to be more efficient when starting up my dev environment, my first thought was to use docker. I've done this in the past and it works well enough. But I wanted to skip docker and just run them natively on my machine.

I've often used tmux to run multiple terminals, so I thought maybe I could create a script to start these processes in tmux.

I created a file named dev with the following contents:

1#!/bin/bash
2
3tmux kill-server
4tmux new-session -d zsh
5tmux new-session -d zsh
6tmux split-window -h zsh
7tmux send -t 0:0.0 'sleep 10 ; open http://localhost:8084 ; open http://localhost:8085 ; exit' C-m
8tmux send -t 1:0.0 "poetry run ./backend/manage.py runserver 8084" C-m
9tmux send -t 1:0.1 "npm start" C-m
10tmux -2 attach-session -d

Now, to get started developing, I just run ./dev. This will open tmux with a split window - one running Django and one that transpiles and runs my Aurelia project. Notice the first command will just sleep for 10 seconds, then open two browser tabs pointing to my front-end and backend homepages.

To kill it, I simply detach from tmux (Ctrl + b, d) and then run tmux kill-server