npm wait for port/command before executing next (concurrently)

Question

So in my npm package I currently have this script:

"start": "concurrently --kill-others \"npm run dev\" \"electron .\""

The problem is that since the server wouldn't be up yet when electron runs its command, it shows up as blank. This is resolved by reloading the app once the server starts.

So I was wondering if there was a way to wait for the server to start by detecting the port or some other method so that I don't have to do the reload myself.

Here's how I'm setting up the url (trying to implement Vue into it).

let format = live ?
    url.format({
        pathname: path.join(__dirname, 'dist/index.html'),
        protocol: 'file:',
        slashes: true
    })
    :
    'http://localhost:8080'
// Specify entry point to default entry point of vue.js
win.loadURL(format);

Answer 1

The key here is to get your dev server up immediately and then implement auto reload or hot module replacement.

Have you looked at electron-webpack? Then your start script would look like:

    "dev": "electron-webpack dev"

And your main.js:

  const url = process.env.NODE_ENV !== 'production'
    ? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`
    : `file://${__dirname}/index.html`

  window.loadURL(url)

I'll recommend you to checkout electron-webpack-quick-start for an example of implementation.

Answer 2

You can use readyator if you want to wait for ports (or URLs) to be ready before starting your script.

Installation: npm i readyator

Waiting for port 80 to be ready before starting Electron with readyator:

readyator 80 "electron ."

It also comes with a handy Node.js API:

import {runWhenReady} from 'readyator';

await runWhenReady([80], 'electron .');