prod server for deployment

README.md

@@ -47,6 +47,39 @@ demo-app
 └── webpack.config.prod.js
 ```
 
+```
+create-react-webpack demo-app -e
+```
+
+It incules the node server for deploying into production into your `demo-app`, with below file footprint.
+
+```
+demo-app
+├── README.md
+├── node_modules
+├── package.json
+├── .gitignore
+├── .babelrc
+├── .eslintrc.json
+├── .eslintignore
+├── .prettierrc
+├── .prettierignore
+├── public
+│   ├── favicon.ico
+│   ├── index.html
+│   └── manifest.json
+├── server
+│   └── index.js
+├── src
+│   ├── App.css
+│   ├── App.js
+│   ├── App.spec.js
+│   └── index.js
+├── webpack.config.base.js
+├── webpack.config.dev.js
+└── webpack.config.prod.js
+```
+
 ## Available Scripts
 
 After creating project directory you can run following scripts:-
@@ -56,6 +89,11 @@ After creating project directory you can run following scripts:-
 builds the application for production to the `dist` folder inside directory.<br>
 Uses webpack `prod` `config` along with `base` `config`
 
+### `npm start`
+
+Start the production server on default port `3000`.<br>
+Read files from `dist` folder.
+
 ### `npm run dev`
 
 Start the development server on default port `8080`.<br>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-react-webpack",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "create-react-webpack ",
   "main": "scripts/create.js",
   "bin": {
@@ -14,6 +14,10 @@
     "type": "git",
     "url": "git+https://github.com/AlokTakshak/create-react-webpack.git"
   },
+  "keywords": [
+    "React",
+    "Webpack"
+  ],
   "author": "Alok Takshak",
   "license": "ISC",
   "bugs": {

scripts/constants.js

@@ -1,9 +1,14 @@
 const CLEAN_NPM_CACHE = "npm cache clean  --force";
 const SPECIALCHAR = RegExp("/[!@#$%^&*()-=_,.?~:;\\{}|<>]/g");
-const UNNECESSORYFOLDERS = RegExp("^node_modules|build|dist$", "i");
+const UNNECESSORY_FOLDERS_FOR_DEV = RegExp(
+  "^node_modules|build|dist|server$",
+  "i"
+);
+const UNNECESSORY_FOLDERS_FOR_PROD = RegExp("^node_modules|build|dist$", "i");
 
 module.exports = {
   CLEAN_NPM_CACHE,
   SPECIALCHAR,
-  UNNECESSORYFOLDERS
+  UNNECESSORY_FOLDERS_FOR_DEV,
+  UNNECESSORY_FOLDERS_FOR_PROD
 };

scripts/create.js

@@ -4,11 +4,13 @@ const { CLEAN_NPM_CACHE, SPECIALCHAR } = require("./constants");
 const {
   installDependencies,
   getDependencies,
-  getDevDependencies
+  getDevDependencies,
+  getProdDependencies
 } = require("./dependencies");
 
 var args = process.argv.slice(2);
 var dirName = args[0];
+var end_to_end = args[1];
 
 if (dirName[0].match("^[A-Z0-9]")) {
   throw new Error(
@@ -24,14 +26,18 @@ if (dirName[0].match("^[A-Z0-9]")) {
   //using process.cwd for getting current path
   const TEMPLATE_PATH = path.join(__dirname, "../template");
   let destination = path.join(process.cwd() + "/" + args[0]);
-  copyDirectory(TEMPLATE_PATH, destination);
+  const prod = end_to_end == "-e";
+
+  copyDirectory(TEMPLATE_PATH, destination, prod);
 
   let commands = [],
     options;
 
   commands.push(CLEAN_NPM_CACHE);
   commands.push(getDependencies());
+  prod && commands.push(getProdDependencies());
   commands.push(getDevDependencies());
+
   options = { cwd: destination, stdio: "inherit" };
 
   installDependencies(commands, options);

scripts/dependencies.js

@@ -25,6 +25,7 @@ const DEV_DEPENDENCIES = [
   "webpack-manifest-plugin",
   "webpack-merge"
 ];
+const PROD_DEPENDENCIES = ["express", "express-static-gzip"];
 
 /**
  * Returns npm command for installing dependencies
@@ -48,6 +49,17 @@ function getDevDependencies() {
   return installCommand;
 }
 
+/**
+ * Returns npm command for installing  prod dependencies
+ */
+function getProdDependencies() {
+  var installCommand = "npm install --save";
+  PROD_DEPENDENCIES.forEach(dependency => {
+    installCommand += ` ${dependency} `;
+  });
+  return installCommand;
+}
+
 /**
  *
  * @param {Array<String>} commands list of commands needs to be executed
@@ -69,4 +81,9 @@ function installDependencies(commands, options) {
   }
 }
 
-module.exports = { installDependencies, getDependencies, getDevDependencies };
+module.exports = {
+  installDependencies,
+  getDependencies,
+  getDevDependencies,
+  getProdDependencies
+};

scripts/helper.js

@@ -1,34 +1,44 @@
 const fs = require("fs");
 const path = require("path");
 const chalk = require("chalk");
-const { UNNECESSORYFOLDERS } = require("./constants");
+const {
+  UNNECESSORY_FOLDERS_FOR_DEV,
+  UNNECESSORY_FOLDERS_FOR_PROD
+} = require("./constants");
 
 /**
  * @summary copies the directory content from source to destination directory
  * @param {String} source path of source file
  * @param {String} destination  path of destination file
+ * @param {boolean} prod  tells if user require prod environment
  */
-function copyDirectory(source, destination) {
+function copyDirectory(source, destination, prod) {
+  let UNNECESSORY_FOLDERS = prod
+    ? UNNECESSORY_FOLDERS_FOR_PROD
+    : UNNECESSORY_FOLDERS_FOR_DEV;
+
   createDirectory(destination);
 
   var content = fs.readdirSync(source);
   for (let i = 0; i < content.length; i++) {
     let currentFile = fs.lstatSync(path.join(source, content[i]));
 
-    if (String(content[i]).match(UNNECESSORYFOLDERS)) {
+    if (String(content[i]).match(UNNECESSORY_FOLDERS)) {
       continue;
     } else if (currentFile.isDirectory()) {
       copyDirectory(
         path.join(source, content[i]),
-        path.join(destination, content[i])
+        path.join(destination, content[i]),
+        prod
       );
     } else if (currentFile.isSymbolicLink()) {
       var symlink = fs.readlinkSync(source, content[i]);
       fs.symlinkSync(symlink, path.join(destination, content[i]));
     } else {
       copyFile(
         path.join(source, content[i]),
-        path.join(destination, content[i])
+        path.join(destination, content[i]),
+        prod
       );
     }
   }
@@ -38,11 +48,15 @@ function copyDirectory(source, destination) {
  * @summary copies the file content from source to destination file
  * @param {String} source path of source file
  * @param {String} destination  path of destination file
+ * @param {boolean} prod  tells if user require prod environment
  */
-function copyFile(source, destination) {
+function copyFile(source, destination, prod) {
   var inputFile, outputFile;
   if (source.match(".json$")) {
     inputFile = JSON.parse(fs.readFileSync(source, "utf8"));
+    if (prod && source.match("package.json$")) {
+      inputFile.scripts.start = "node server/";
+    }
     fs.writeFileSync(destination, JSON.stringify(inputFile, null, 2), "utf8");
   } else {
     inputFile = fs.createReadStream(source);

startApp.sh

@@ -5,6 +5,7 @@ const child_process = require("child_process");
 
 var args = process.argv.slice(2);
 var dirName = args[0];
+var end_to_end = args[1];
 
 var p=path.join(__dirname,"scripts/create.js")
-child_process.execSync(`node ${p} ${dirName}`,{  stdio: "inherit" });
+child_process.execSync(`node ${p} ${dirName} ${end_to_end}`,{  stdio: "inherit" });

template/public/index.html

@@ -9,6 +9,6 @@
     <title>React App</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="root"></div>
   </body>
 </html>

template/server/index.js

@@ -0,0 +1,24 @@
+const express = require("express");
+const expressStaticGzip = require("express-static-gzip");
+const path = require("path");
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+app.use(
+  "/",
+  expressStaticGzip(path.join(process.cwd(), "dist"), {
+    enableBrotli: true,
+    orderPreference: ["br", "gz"]
+  })
+);
+app.use(express.static(path.join(process.cwd(), "dist")));
+app.use("/", express.static(path.join(process.cwd(), "public")));
+
+app.get("/", (req, res) => {
+  res.header = res.sendFile(path.join(process.cwd(), "dist", "index.html"));
+});
+
+app.listen(PORT, () => {
+  console.log(`Started listening on port: ${PORT}`);
+});

template/src/App.css

@@ -9,3 +9,25 @@ html {
 *:after {
   box-sizing: inherit;
 }
+
+.app {
+  background-color: antiquewhite;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 98vh;
+  width: 100%;
+}
+
+.button {
+  background-color: red;
+  border-radius: 20px;
+  color: white;
+  font-size: 20px;
+  font-weight: bold;
+  margin: 10px;
+  outline: none;
+  padding-left: 20px;
+  padding-right: 20px;
+}

template/src/App.js

@@ -12,23 +12,27 @@ class App extends Component {
 
   render() {
     return (
-      <div>
+      <div className="app">
         <h1>Hello World!</h1>
         <h2>{`Count : ${this.state.count}`}</h2>
-        <button
-          onClick={() => {
-            this.setState(state => ({ count: state.count + 1 }));
-          }}
-        >
-          +
-        </button>
-        <button
-          onClick={() => {
-            this.setState(state => ({ count: state.count - 1 }));
-          }}
-        >
-          -
-        </button>
+        <div>
+          <button
+            className="button"
+            onClick={() => {
+              this.setState(state => ({ count: state.count + 1 }));
+            }}
+          >
+            +
+          </button>
+          <button
+            className="button"
+            onClick={() => {
+              this.setState(state => ({ count: state.count - 1 }));
+            }}
+          >
+            -
+          </button>
+        </div>
       </div>
     );
   }

template/src/index.js

@@ -7,5 +7,5 @@ ReactDOM.render(
     <App />
   </React.StrictMode>,
 
-  document.getElementById("app")
+  document.getElementById("root")
 );

template/webpack.config.prod.js

@@ -8,10 +8,9 @@ module.exports = merge(baseConfig, {
   mode: "production",
   plugins: [
     new CompressionPlugin({
-      filename: "[path].br[query]",
-      algorithm: "brotliCompress",
+      filename: "[path].gz[query]",
+      algorithm: "gzip",
       test: /\.(js|css|html|svg)$/,
-      compressionOptions: { level: 11 },
       threshold: 10240,
       minRatio: 0.8,
       deleteOriginalAssets: false