Launch webpack-dev-server and docker-compose at the same time on Windows Terminal and display them in another pane

specification

--Launch webpack-dev-server on the front and docker-compose on the back in separate panes of Windows Terminal. ――It looks like the image below.

code

1. Set the command to start webpack-dev-server in npm-script

--Define the command name srv: w.

package.json

  "scripts": {
    "srv:w": "webpack-dev-server & webpack"
  },

2. Windows Terminal execution batch

--The path is set as a variable for readability. --Set "C: \ Develop \ Project1 " as the project root. --Place "front" and "back" directories under the project root. --Place front resources (including webpack) in "front". --Place back resources (including docker-compose) in "back".

run_all.bat

@echo off
::=================
::Path definition
::=================
set PROJECT_DIR=C:\Develop\Project1\
set FRONT_DIR=%PROJECT_DIR%front\
set BACK_DIR=%PROJECT_DIR%back\

::===================================================================
::Webpack with WindowTerminal-dev-server and docker-Run comose in separate tabs
::====================================================================
wt -d %FRONT_DIR% cmd /k npm run srv:w ; split-pane -V -d %BACK_DIR% cmd /k docker-compose up 

--When you start the above batch, Windows Terminal will start and the server and container will start in separate panes.

Remarks

--The article to run Windows Terminal from the command line is below.

-▶ Reference: Execute Windows Terminal with a command, and then execute the command in it.