Module 13: Production Build

GhettoGeek · Jul 24, 2019 · 375cdc4 · 375cdc4
1 parent 1f044c0
commit 375cdc4
Show file tree

Hide file tree

Showing 22 changed files with 358 additions and 12 deletions.
diff --git a/buildScripts/build.js b/buildScripts/build.js
@@ -0,0 +1,36 @@
+// Runs a production webpack config
+
+/* eslint-disable no-console */
+import webpack from 'webpack';
+import webpackConfig from '../webpack.config.prod';
+import chalk from 'chalk';
+
+process.env.NODE_ENV = 'production';
+
+console.log(chalk.blue('Generating minified bundle for production. This will take a moment'));
+
+webpack(webpackConfig).run((err, stats) => {
+  if (err) {
+    console.log(chalk.red(err));
+    return 1;
+  }
+
+  const jsonStats = stats.toJson();
+
+  if (jsonStats.hasErrors) {
+    return jsonStats.errors.map(error => console.log(chalk.red(error)));
+  }
+
+  if (jsonStats.hasWarnings) {
+    console.log(chalk.yellow('Webpack generated the following warnings'));
+    jsonStats.warnings.map(warnings => console.log(chalk.yellow(warnings)));
+  }
+
+  console.log(`Webpack stats: ${stats}`);
+
+  // If we got this far, the build succeeded
+  console.log(chalk.green('Your app has been built for production and written to /dist'));
+
+  return 0;
+});
+
diff --git a/buildScripts/distServer.js b/buildScripts/distServer.js
@@ -0,0 +1,40 @@
+// This is not for production use
+// It is just to See how Distribution will look like
+
+import express from 'express';
+import path from 'path';
+import open from 'open';
+import compression from 'compression';
+
+/* eslint-disable no-console */
+
+const port = 3000;
+const app = express();
+
+app.use(express.static('dist'));
+
+// Use compression to see file Size that will be sent over wire
+// Enable GZIP
+app.use(compression());
+
+app.get('/', function(req, res){
+  res.sendFile(path.join(__dirname, '../dist/index.html'));
+});
+
+app.get('/users', function(req, res) {
+  // Hard coding for simplicity
+  res.json([
+    {"id": 1, "firstName": "Bor", "lastName":"Smith", "email": "[email protected]"},
+    {"id": 2, "firstName": "Tammy", "lastName":"Norton", "email": "[email protected]"},
+    {"id": 3, "firstName": "Tina", "lastName":"Lee", "email": "[email protected]"}
+  ]);
+});
+
+
+app.listen(port, function(err){
+  if (err) {
+    console.log(err);
+  } else {
+    open('http://localhost:' + port);
+  }
+})
diff --git a/buildScripts/generateMockData.js b/buildScripts/generateMockData.js
@@ -0,0 +1,18 @@
+
+/* eslint-disable no-console */
+
+import jsf from 'json-schema-faker';
+import {schema} from './mockDataSchema';
+import fs from 'fs';
+import chalk from 'chalk';
+
+const json = JSON.stringify(jsf(schema));
+
+fs.writeFile("./src/api/db.json", json, function (err){
+  if (err) {
+    return console.log(chalk.red(err));
+  } else {
+    console.log(chalk.green("Mock data generated"));
+  }
+});
+
diff --git a/buildScripts/mockDataSchema.js b/buildScripts/mockDataSchema.js
@@ -0,0 +1,34 @@
+export const schema = {
+  "type": "object",
+  "properties": {
+    "users": {
+      "type": "array",
+      "minItems": 3,
+      "maxItems": 5,
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "number",
+            "unique": true,
+            "minimum": 1
+          },
+          "firstName": {
+            "type": "string",
+            "faker": "name.firstName"
+          },
+          "lastName": {
+            "type": "string",
+            "faker": "name.lastName"
+          },
+          "email": {
+            "type": "string",
+            "faker": "internet.email"
+          }
+        },
+        required: ['id', 'firstName', 'lastName', 'email']
+      }
+    }
+  },
+  required: ['users']
+}
diff --git a/buildScripts/srcServer.js b/buildScripts/srcServer.js
@@ -21,7 +21,17 @@ app.use(require('webpack-dev-middleware')(compiler, {
 
 app.get('/', function(req, res){
   res.sendFile(path.join(__dirname, '../src/index.html'));
-})
+});
+
+app.get('/users', function(req, res) {
+  // Hard coding for simplicity
+  res.json([
+    {"id": 1, "firstName": "Bor", "lastName":"Smith", "email": "[email protected]"},
+    {"id": 2, "firstName": "Tammy", "lastName":"Norton", "email": "[email protected]"},
+    {"id": 3, "firstName": "Tina", "lastName":"Lee", "email": "[email protected]"}
+  ]);
+});
+
 
 app.listen(port, function(err){
   if (err) {

diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link href="/main.9e9547eefa0b2d5a3e20a300eb8bbc56.css" rel="stylesheet"></head><body><h1>Users</h1><table><thead><th>&nbsp;</th><th>Id</th><th>First Name</th><th>Last Name</th><th>Email</th></thead><tbody id="users"></tbody></table><script type="text/javascript" src="/vendor.9e5918d19a6d78d2bc3b.js"></script><script type="text/javascript" src="/main.753a23cfc1b854ef4b82.js"></script></body></html>
diff --git a/dist/main.753a23cfc1b854ef4b82.js b/dist/main.753a23cfc1b854ef4b82.js
diff --git a/dist/main.753a23cfc1b854ef4b82.js.map b/dist/main.753a23cfc1b854ef4b82.js.map
diff --git a/dist/main.9e9547eefa0b2d5a3e20a300eb8bbc56.css b/dist/main.9e9547eefa0b2d5a3e20a300eb8bbc56.css
diff --git a/dist/main.9e9547eefa0b2d5a3e20a300eb8bbc56.css.map b/dist/main.9e9547eefa0b2d5a3e20a300eb8bbc56.css.map
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link href="/main.9e9547eefa0b2d5a3e20a300eb8bbc56.css" rel="stylesheet"></head><body><h1>Users</h1><table><thead><th> </th><th>Id</th><th>First Name</th><th>Last Name</th><th>Email</th></thead><tbody id="users"></tbody></table><script type="text/javascript" src="/vendor.9e5918d19a6d78d2bc3b.js"></script><script type="text/javascript" src="/main.753a23cfc1b854ef4b82.js"></script></body></html>