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

• Inspired by - Open Multiple Terminal Tabs on npm Start with ttab and npm-run-all

Commands

• ttab
• concurrently
• How to open files via Terminal

Photo

• Photo by Daniel Seßler on Unsplash