Preparando la aplicación para producción y deploy a now.sh

sergiodxa · Nov 13, 2016 · 0880044 · 0880044
1 parent dc9b90a
commit 0880044
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -4,6 +4,8 @@
   "description": "Proyecto para el curso de React.js",
   "main": "webpack.config.js",
   "dependencies": {
+    "babel-plugin-transform-regenerator": "6.16.1",
+    "babel-runtime": "6.18.0",
     "isomorphic-fetch": "2.2.1",
     "list": "0.8.2",
     "react": "15.3.2",
@@ -16,6 +18,9 @@
     "babel-eslint": "7.1.0",
     "babel-loader": "6.2.7",
     "babel-plugin-transform-es2015-modules-commonjs": "6.18.0",
+    "babel-plugin-transform-es2015-template-literals": "6.8.0",
+    "babel-plugin-transform-runtime": "6.15.0",
+    "babel-preset-es2015": "6.18.0",
     "babel-preset-es2016": "6.16.0",
     "babel-preset-es2017": "6.16.0",
     "babel-preset-latest-minimal": "1.1.2",
@@ -34,8 +39,13 @@
     "webpack": "1.13.3"
   },
   "scripts": {
+    "deploy": "now",
+    "deploy:statics": "now ./built/statics/",
+    "start": "npm run bff",
     "bff": "node ./built/server/index.js",
-    "sfs": "list ./built/statics --port 3001 --cache 0"
+    "build": "NODE_ENV=production webpack",
+    "sfs": "list ./built/statics --port 3001 --cache 0",
+    "watch": "NODE_ENV=development webpack -w"
   },
   "repository": {
     "type": "git",

diff --git a/source/api.js b/source/api.js
@@ -1,7 +1,7 @@
 import fetch from 'isomorphic-fetch';
 
 
-const baseUrl = 'http://jsonplaceholder.typicode.com';
+const baseUrl = 'https://jsonplaceholder.typicode.com';
 
 
 const api = {

diff --git a/source/layout.html b/source/layout.html
@@ -13,12 +13,12 @@
   />
   <link
     rel="stylesheet"
-    href="http://localhost:3001/styles.css"
+    href="${scope.domain}/styles.css"
   />
 </head>
 
 <body>
   <div id="render-target">${scope.content}</div>
-  <script src="http://localhost:3001/app.js"></script>
+  <script src="${scope.domain}/app.js"></script>
 </body>
 </html>
diff --git a/source/server.jsx b/source/server.jsx
@@ -10,6 +10,12 @@ import layout from './layout.html';
 
 import messages from './messages.json';
 
+
+const domain = process.env.NODE_ENV === 'production'
+  ? 'https://platzi-react-sfs.now.sh'
+  : 'http://localhost:3001';
+
+
 function requestHandler(request, response) {
   const locale = request.headers['accept-language'].indexOf('es') >= 0 ? 'es' : 'en';
   const context = createServerRenderContext();
@@ -46,7 +52,7 @@ function requestHandler(request, response) {
   }
 
   response.write(
-    layout({ content: html, title: 'Aplicación' }),
+    layout({ content: html, title: 'Aplicación', domain }),
   );
 
   return response.end();

diff --git a/webpack/webpack.client.config.js b/webpack/webpack.client.config.js
@@ -1,12 +1,15 @@
+const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 
-module.exports = {
+const config = {
   entry: './source/client.jsx',
   output: {
     filename: 'app.js',
     path: './built/statics',
-    publicPath: 'http://localhost:3001/',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? 'https://platzi-react-sfs.now.sh'
+      : 'http://localhost:3001/',
   },
   module: {
     preLoaders: [
@@ -27,7 +30,15 @@ module.exports = {
         exclude: /node_modules/,
         query: {
           presets: ['es2016', 'es2017', 'react'],
-          plugins: ['transform-es2015-modules-commonjs'],
+          env: {
+            production: {
+              plugins: ['transform-regenerator', 'transform-runtime'],
+              presets: ['es2015'],
+            },
+            development: {
+              plugins: ['transform-es2015-modules-commonjs'],
+            },
+          },
         },
       },
       {
@@ -37,10 +48,16 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['', '.js', '.jsx', '.css'],
+    extensions: ['', '.js', '.jsx', '.css', '.json'],
   },
   target: 'web',
   plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+      },
+    }),
+    new webpack.optimize.OccurrenceOrderPlugin(true),
     new ExtractTextPlugin('../statics/styles.css'),
   ],
   eslint: {
@@ -49,3 +66,21 @@ module.exports = {
     emitWarning: true,
   },
 };
+
+
+if (process.env.NODE_ENV === 'production') {
+  config.plugins.push(
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+      },
+      mangle: {
+        except: ['$super', '$', 'exports', 'require'],
+      },
+    })
+  );
+}
+
+
+module.exports = config;
diff --git a/webpack/webpack.server.config.js b/webpack/webpack.server.config.js
@@ -1,6 +1,18 @@
+const fs = require('fs');
+const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
-module.exports = {
+
+const nodeModules = fs
+  .readdirSync('node_modules')
+  .filter(x => ['.bin'].indexOf(x) === -1)
+  .reduce(
+    (modules, module) => Object.assign(modules, { [module]: `commonjs ${module}` }),
+    {}
+  );
+
+
+const config = {
   entry: './source/server.jsx',
   output: {
     filename: 'index.js',
@@ -29,24 +41,67 @@ module.exports = {
         exclude: /(node_modules)/,
         query: {
           presets: ['latest-minimal', 'react'],
+          env: {
+            production: {
+              plugins: ['transform-regenerator', 'transform-runtime'],
+              presets: ['es2015'],
+            },
+            development: {
+              presets: ['latest-minimal'],
+            },
+          },
         },
       },
       {
         test: /\.css$/,
         loader: ExtractTextPlugin.extract('style', 'css?modules'),
       },
     ],
+    postLoaders: [
+      {
+        test: /\.html$/,
+        loader: 'babel',
+        query: {
+          plugins: ['transform-es2015-template-literals'],
+        },
+      },
+    ],
   },
   resolve: {
-    extensions: ['', '.js', '.jsx', '.css'],
+    extensions: ['', '.js', '.jsx', '.css', '.json', '.html'],
   },
   target: 'node',
   plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+      },
+    }),
+    new webpack.optimize.OccurrenceOrderPlugin(true),
     new ExtractTextPlugin('../statics/styles.css'),
   ],
   eslint: {
     configFile: './.eslintrc',
     emitError: true,
     emitWarning: true,
   },
+  externals: nodeModules,
 };
+
+
+if (process.env.NODE_ENV === 'production') {
+  config.plugins.push(
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+      },
+      mangle: {
+        except: ['$super', '$', 'exports', 'require'],
+      },
+    })
+  );
+}
+
+
+module.exports = config;