← Today I Learned

Holy tabs Batman

Programmatically open new tabs in your terminal, and open your browser to http://localhost:3000 with one npm script.

  • nextjs
  • docker
  • ttab
  • concurrently
  • npm
  • scripts
Published

May 27, 2021 @ 4:27 AM

Published

May 27, 2021 @ 4:27 AM

Overview

Summary

In this example we have a new next js application. We will add an npm script called lazy to do the following:

  • Open a new tab in your terminal for your development server (npm run tab:dev)
  • Open a new tab in your terminal for your docker container (npm run tab:docker)
  • Open http://localhost:3000 in your default browser (npm run localhost)

Usage

First install the following developer dependencies:

npm install -D concurrently ttab

concurrently allows us to run commands at the same time, and ttab will open the terminal tabs for us. More info on ttab and concurrently. Next we will add the folloiwing scripts to our package.json scripts section:

"scripts": {
    "dev": "next",
    "docker": "docker compose up",
    "tab:dev": "ttab -t \"Next App\" npm run dev",
    "tab:docker": "ttab -t \"Docker\" npm run docker",
    "localhost": "open \"http://localhost:3000\"",
    "lazy": "concurrently \"npm run tab:dev\" \"npm run tab:docker\" \"npm run localhost\"",
}

Now that we have our npm scripts setup, we can run the following:

npm run lazy

Resources

Commands

Photo

All rights reserved 2022