Inserting start script

Author: andrelmlins

packages/react-library-scripts/configs/webpack.config.js

@@ -0,0 +1,50 @@
+"use strict";
+
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const resolverPath = require("../utils/resolverPath");
+
+const APP_PATH = resolverPath("src/dev");
+
+const config = {
+  entry: APP_PATH,
+  mode: "development",
+  resolve: {
+    modules: ["node_modules", "src/lib"],
+    extensions: [".ts", ".tsx", ".js", ".json"]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|js)x?$/,
+        loader: "babel-loader",
+        exclude: /node_modules/,
+        options: {
+          presets: [require.resolve("babel-preset-react-app")]
+        }
+      },
+      {
+        test: /\.svg$/,
+        loader: "svg-inline-loader"
+      },
+      {
+        test: /\.scss$/,
+        use: ["style-loader", "css-loader", "sass-loader"]
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      }
+    ]
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: `${APP_PATH}/index.html`
+    })
+  ],
+
+  optimization: { minimize: false }
+};
+
+module.exports = config;

packages/react-library-scripts/package.json

@@ -19,6 +19,10 @@
     "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/preset-env": "^7.6.3",
     "@babel/preset-react": "^7.6.3",
-    "babel-plugin-module-resolver": "^3.2.0"
+    "babel-plugin-module-resolver": "^3.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "open": "^7.0.0",
+    "webpack": "^4.41.2",
+    "webpack-dev-server": "^3.9.0"
   }
 }

packages/react-library-scripts/scripts/start.js

@@ -1,3 +1,26 @@
 "use strict";
 
-console.log("start");
+process.env.BABEL_ENV = "development";
+process.env.NODE_ENV = "development";
+
+const Webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const open = require("open");
+const config = require("../configs/webpack.config.js");
+const verifyPort = require("../utils/verifyPort");
+const resolverPath = require("../utils/resolverPath");
+
+const APP_PATH = resolverPath("src/dev");
+
+const compiler = Webpack(config);
+const server = new WebpackDevServer(compiler, {
+  contentBase: APP_PATH,
+  hot: true
+});
+
+const PORT = process.env.PORT || 3000;
+const baseUrl = "http://localhost";
+
+verifyPort(PORT, baseUrl, newPort => {
+  server.listen(newPort, "localhost", () => open(`${baseUrl}:${newPort}`));
+});

packages/react-library-scripts/utils/portChecker.js

@@ -0,0 +1,21 @@
+const net = require("net");
+
+const portChecker = (port, base, callback) => {
+  const server = net.createServer(socket => {
+    socket.write("Echo server\r\n");
+    socket.pipe(socket);
+  });
+
+  server.listen(port, base);
+
+  server.on("error", () => {
+    portChecker(port + 1, base, newPort => callback(newPort));
+  });
+
+  server.on("listening", () => {
+    server.close();
+    callback(port);
+  });
+};
+
+module.exports = portChecker;