Webpack dev server: Hook or mechanism for trigger command once that the server is running

Question

In my development workflow I open 2 terminal windows for running in one my npm start task, once that the server is running at the second window I run a cucumberjs's functional test suite and this worked as i expected. But my problem is that in my CI environment I need run this in a single process. I've been trying this:

npm start | cucumberjs --require test/functional/ --compiler js:babel-register test/functional/

The problem with this is the task npm start take a while for run and at the same time the cucumber task try to access to localhost:3000 (the url when the webpack-dev-server runs) but the server isn't ready yet and the tests fail.

So, How can I deal with this?

The project: https://github.com/gpincheiraa/angularjs-tdd-jest/tree/dev

package.json

  ...

  "scripts": {
    "start": "npm run stubs & webpack-dev-server",
    "dev": "npm start -- --open",
    "stubs": "stubby -w -d stubs/fakeserver.yml -s 5000",
    "tdd": "cross-env NODE_PATH=./src jest --watch --verbose",
    "test": "cross-env NODE_PATH=./src jest --coverage --verbose",
    "test:functional": "cucumberjs --require test/functional/ --compiler js:babel-register test/functional/",
    //I want in the test:functional-ci task run the npm start and once that is serving the project, run npm run test:functional task
    "test:functional-ci": "cross-env NODE_ENV=staging npm run test:functional",
    "test-debug": "cross-env NODE_PATH=./src node --inspect --inspect-brk node_modules/.bin/jest -i",
    "build": "webpack",
    "check-coverage": "npm test | http-server -so -p 9000 coverage/lcov-report"
  },

  ...

webpack.config.js

module.exports = {
    entry: [
      'core-js/shim',
      'babel-polyfill',
      'angular',
      './src/index.js'
    ],
    output: {
        path: 'dist',
        filename: 'index.bundle.js'
    },
    module: {
        loaders: [
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
        { test: /\.(html)$/, loader: 'html-loader' },
        { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }]
    },
    cache: true,
    devtool: 'eval-source-map',
    devServer: {
        filename: "index.bundle.js",
        contentBase: "./src",
        port: 3000,
        watch: true,
        publicPath: "/",
        historyApiFallback: true,
        stats: {
            colors: true,
            chunks: false
        }
    }
};

Answer 1

Finally I can't solve my problem directly with some webpack option. On my CI system I run the following:

package.json

"scripts": {
    "start": "sh -c \"npm run stubs & webpack-dev-server\"",
    ...
    "test:functional": "cucumberjs --require test/functional/ --compiler 
    ...

.travis.yml

before_script: npm start & sleep 7
script: npm run test:functional

So when i run npm start & sleep 7, I'm giving 7 seconds to npm start for that the task do their job and then I run the npm run test:functional script.

This is my repo: https://github.com/gpincheiraa/angularjs-tdd-jest and this is the result in the CI travis log: https://travis-ci.org/gpincheiraa/angularjs-tdd-jest/jobs/271532237