Merge pull request #2330 from lbryio/simpler-dev-start

Consolidate dev commands and startup

.gitignore

@@ -1,10 +1,10 @@
 .DS_Store
 /node_modules
 /dist
-/static/lbrynet
+/static/lbrynet*
 /static/daemon
 /static/locales
 yarn-error.log
 package-lock.json
 .idea/
-/build/daemon*
+/build/daemon*

package.json

@@ -23,7 +23,8 @@
     "compile:electron": "webpack --progress --config webpack.electron.config.js",
     "compile:web": "webpack --config webpack.web.config.js",
     "compile": "yarn compile:electron && yarn compile:web",
-    "dev:electron": "webpack-dev-server --hot --progress --config webpack.electron.config.js",
+    "dev": "yarn dev:electron",
+    "dev:electron": "cross-env NODE_ENV=development node ./src/platforms/electron/devServer.js",
     "dev:web": "webpack-dev-server --open --hot --progress --config webpack.web.config.js",
     "dev:internal-apis": "LBRY_API_URL='http://localhost:8080' yarn dev:electron",
     "run:electron": "electron ./dist/electron/main.js",
@@ -105,12 +106,14 @@
     "@babel/plugin-transform-flow-strip-types": "^7.2.3",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@hot-loader/react-dom": "16.8",
     "@lbry/color": "^1.0.2",
     "@lbry/components": "^2.2.4",
     "async-exit-hook": "^2.0.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
     "babel-plugin-add-module-exports": "^1.0.0",
+    "chalk": "^2.4.2",
     "copy-webpack-plugin": "^4.6.0",
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.0",
@@ -150,6 +153,7 @@
     "webpack-config-utils": "^2.3.1",
     "webpack-dev-middleware": "^3.6.0",
     "webpack-dev-server": "^3.1.14",
+    "webpack-hot-middleware": "^2.24.3",
     "webpack-merge": "^4.2.1",
     "webpack-node-externals": "^1.7.2",
     "yarnhook": "^0.2.0"

src/platforms/electron/devServer.js

@@ -0,0 +1,68 @@
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const middleware = require('webpack-dev-middleware');
+const express = require('express');
+const app = express();
+
+// TODO: Spawn separate threads so realtime status logging can be used
+// without overwriting information/execptions logged by the compilers
+const logRealtime = str => {
+  let lineCount = (str.match(/\n/) || []).length + 1;
+  console.log('\u001B[' + lineCount + 'F\u001B[G\u001B[2K' + str);
+};
+
+console.log(
+  chalk.magenta(
+    `Compiling ${chalk.underline('main')} and ${chalk.underline('render')}, this will take a while.`
+  )
+);
+
+let [mainConfig, renderConfig] = require('../../../webpack.electron.config.js');
+
+renderConfig = merge(renderConfig, {
+  entry: { ui: ['webpack-hot-middleware/client'] },
+  plugins: [new webpack.HotModuleReplacementPlugin()],
+  resolve: {
+    alias: { 'react-dom': '@hot-loader/react-dom' },
+  },
+});
+
+const mainCompiler = webpack(mainConfig);
+const mainInstance = middleware(mainCompiler, {
+  logLevel: 'warn',
+  writeToDisk: filename => {
+    // console.log(`Writing '${filename}'.`);
+    return true;
+  },
+});
+
+const renderCompiler = webpack(renderConfig);
+const renderInstance = middleware(renderCompiler, {
+  logLevel: 'warn',
+  publicPath: '/',
+});
+app.use(require('webpack-hot-middleware')(renderCompiler));
+app.use(renderInstance);
+
+app.listen(8080, () => {
+  console.log(chalk.yellow.bold('Renderer listening on port 8080 (still compiling)'));
+});
+
+mainInstance.waitUntilValid(() =>
+  console.log(chalk.green(`${chalk.underline('main')} compilation complete.`))
+);
+renderInstance.waitUntilValid(() =>
+  console.log(chalk.green(`${chalk.underline('render')} compilation complete.`))
+);
+
+mainInstance.waitUntilValid(() => {
+  console.log(chalk.yellow('Spawning electron...'));
+
+  const electron = require('electron');
+  const proc = require('child_process');
+
+  const child = proc.spawn(electron, ['./dist/electron/main.js']);
+});

webpack.electron.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 const baseConfig = require('./webpack.base.config.js');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -58,7 +59,7 @@ const mainConfig = {
 const renderConfig = {
   target: 'electron-renderer',
   entry: {
-    ui: './src/ui/index.jsx',
+    ui: ['./src/ui/index.jsx'],
   },
   output: {
     filename: '[name].js',

yarn.lock

@@ -775,6 +775,16 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
   integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
 
+"@hot-loader/react-dom@16.8":
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/@hot-loader/react-dom/-/react-dom-16.8.4.tgz#aefe598ca26005c1ec3ac11d92d54ff3c1cd219c"
+  integrity sha512-S+5x4HJEMV7p2FzgUBEzrgiNJJeN4m5auTL3rZbmGsuyGt3Tgg8zgz6Mt1Udj8dKDxaryixDSNh0d/63TMqizg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.4"
+
 "@lbry/color@^1.0.2":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@lbry/color/-/color-1.1.0.tgz#00d9474de64bafa507d07f137dbe5754ee65c4e6"
@@ -8263,7 +8273,7 @@ querystring-es3@^0.2.0:
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
   integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
 
-querystring@0.2.0:
+querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
   integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
@@ -9096,6 +9106,14 @@ scheduler@^0.13.3:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.13.4:
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.4.tgz#8fef05e7a3580c76c0364d2df5e550e4c9140298"
+  integrity sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.3:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
@@ -10772,6 +10790,16 @@ webpack-dev-server@^3.1.14:
     webpack-log "^2.0.0"
     yargs "12.0.2"
 
+webpack-hot-middleware@^2.24.3:
+  version "2.24.3"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.24.3.tgz#5bb76259a8fc0d97463ab517640ba91d3382d4a6"
+  integrity sha512-pPlmcdoR2Fn6UhYjAhp1g/IJy1Yc9hD+T6O9mjRcWV2pFbBjIFoJXhP0CoD0xPOhWJuWXuZXGBga9ybbOdzXpg==
+  dependencies:
+    ansi-html "0.0.7"
+    html-entities "^1.2.0"
+    querystring "^0.2.0"
+    strip-ansi "^3.0.0"
+
 webpack-log@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"