Merge pull request #85 from BeAPI/feature/multiple-bs-instances

Feature/multiple bs instances

Author: Cocola

.gitignore

@@ -73,4 +73,8 @@ dist/
 src/conf-img/*.csv
 
 ### yarn
-yarn.lock
+yarn.lock
+
+### config
+.port
+.bs-port

package-lock.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/BeAPI/beapi-frontend-framework"
   },
   "scripts": {
-    "start": "node_modules/.bin/concurrently -k -n \"Webpack,PHP Server\" -p \"[{name}]\" -c \"green, blue\" \"node_modules/.bin/webpack --mode=development --watch\" \"php -S localhost:9090\"",
+    "start": "node_modules/.bin/concurrently -k -n \"Webpack,PHP Server\" -p \"[{name}]\" -c \"green, blue\" \"node_modules/.bin/webpack --mode=development --watch\" \"sh server.sh\"",
     "build:dev": "node_modules/.bin/webpack --mode=development && npm run icon && npm run favicon",
     "build:prod": "npm run clean && node_modules/.bin/webpack --mode=production && npm run icon && npm run favicon",
     "build": "npm run clean && node_modules/.bin/webpack --mode=production && npm run build:dev",

package.json

@@ -0,0 +1,19 @@
+#!/bin/bash
+PORT=9090
+BSPORT=3000
+
+while [ -n "$(lsof -Pi :${PORT} -sTCP:LISTEN -t)" ]; do
+    ((PORT++))
+done
+
+while [ -n "$(lsof -Pi :${BSPORT} -sTCP:LISTEN -t)" ]; do
+    ((BSPORT += 2))
+done
+
+echo "BS will run on port ${BSPORT}"
+
+echo $PORT > ".port"
+echo $BSPORT > ".bs-port"
+
+echo "Server is running on port ${PORT} and BrowserSync on port ${BSPORT}"
+php -S localhost:${PORT}

server.sh

@@ -1,3 +1,4 @@
+const fs = require('fs')
 const config = require('./webpack.settings')
 const path = require('path')
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
@@ -10,7 +11,15 @@ const PhpOutputPlugin = require('./src/js/vendor/webpack-php-output')
 const SoundsPlugin = require('sounds-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const WebpackProgressOraPlugin = require('webpack-progress-ora-plugin')
+const getServerPort = function(portFile) {
+  try {
+    require('fs').accessSync(portFile, fs.R_OK | fs.W_OK)
 
+    return parseInt(fs.readFileSync(portFile, 'utf8'))
+  } catch (e) {
+    return false
+  }
+}
 const webpackConfig = {
   entry: config.entry,
   output: {
@@ -179,7 +188,8 @@ module.exports = (env, argv) => {
       }),
       new BrowserSyncPlugin(
         {
-          proxy: 'http://[::1]:' + config.port,
+          port: getServerPort('./.bs-port') || 3000,
+          proxy: 'http://[::1]:' + (getServerPort('./.port') || 9090),
           files: [
             {
               match: config.refresh,

webpack.config.js

@@ -6,7 +6,6 @@ module.exports = {
     'editor-style': './src/scss/editor-style.scss',
   },
   assetsPath: path.resolve(__dirname, 'dist/assets'),
-  port: 9090,
   dev: process.env.NODE_ENV === 'dev',
   refresh: [
     'dist/**/*.php',