react-isomorphic-boilerplate - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

package.json

 {
   "name": "react-isomorphic-boilerplate",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "src/server/index.js",
@@ -8,8 +8,8 @@ "license": "MIT",
     "start": "DEBUG=*,-nodemon*,-express*,-send nodemon --inspect dist/server/index.js",
-    "clean": "rm -rf dist/assets/*.js",
-    "build:client:dev": "npm run clean && webpack --env=dev --progress --profile --colors",
+    "clean": "rm -rf dist/assets/*",
+    "build:browser:dev": "npm run clean && webpack --env=dev --config=webpack.browser.js --progress --profile --colors",
     "build:server:dev": "webpack --env=dev --config=webpack.server.js --progress --profile --colors",
-    "build:client:dev:w": "npm run clean && webpack -w --env=dev --progress --profile --colors",
+    "build:browser:dev:w": "npm run clean && webpack -w --env=dev --config=webpack.browser.js --progress --profile --colors",
     "build:server:dev:w": "webpack -w --env=dev --config=webpack.server.js --progress --profile --colors",
-    "build:client:prod": "webpack --env=prod --progress --profile --colors",
+    "build:browser:prod": "webpack --env=prod --config=webpack.browser.js --progress --profile --colors",
     "build:server:prod": "webpack --env=prod --config=webpack.server.js --progress --profile --colors",
@@ -69,3 +69,4 @@ "eslint": "eslint ./",
     "webpack": "^3.8.1",
-    "webpack-node-externals": "^1.6.0"
+    "webpack-node-externals": "^1.6.0",
+    "webpack-visualizer-plugin": "^0.1.11"
   },
@@ -72,0 +73,0 @@ "dependencies": {

README.md

@@ -22,3 +22,3 @@ # react-isomorphic-boilerplate
 Run 3 processes to start developing your app:
-1. `yarn run build:client:dev:w`: build client side code and watch file change.
+1. `yarn run build:browser:dev:w`: build browser side code and watch file change.
 2. `yarn run build:server:dev:w`: build server side conde and watch file change.
@@ -74,3 +74,3 @@ 3. `yarn start`: nodemon executing `dist/server.js`, and only watches on it's change,
 Build your code with:
-1. `yarn run build:client:prod`
+1. `yarn run build:browser:prod`
 2. `yarn run build:server:prod`
@@ -77,0 +77,0 @@

src/actions/index.js

@@ -42,2 +42,3 @@ // import { get as _get } from 'lodash';
         debug(err);
+        return err;
       });
@@ -61,2 +62,3 @@ };
         debug(err);
+        return err;
       });
@@ -79,2 +81,3 @@ };
         debug(err);
+        return err;
       });
@@ -81,0 +84,0 @@ };

src/entries/template.js

@@ -7,2 +7,11 @@ import React from 'react';
 
+/**
+ * you can REUSE this template for different entries
+ *
+ * get global variable of server rendered redux state
+ * configure store
+ * then mount to mount point
+ * @param {React Component} A component of route logic
+ *
+ */
 export default function mount(Routes) {
@@ -9,0 +18,0 @@ // Grab the state from a global variable injected into the server-generated HTML

src/routes/main.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
@@ -6,4 +6,5 @@ import PropTypes from 'prop-types';
 import { get as _get, isFunction as _isFunction } from 'lodash';
-import { Route, Redirect, Switch, matchPath } from 'react-router';
+import { matchPath } from 'react-router';
 import { withRouter } from 'react-router-dom';
+import BaseRoute from './base';
 import Nav from '../containers/Nav';
@@ -14,2 +15,3 @@ import Home from '../containers/Home';
 import Footer from '../containers/Footer';
+import FourOFour from '../containers/404';
 import { fetchPosts } from '../actions';
@@ -46,2 +48,5 @@
       component: Demo
+    }, {
+      key: '404',
+      component: FourOFour
     }
@@ -62,4 +67,3 @@ ];
 
-// TODO: handle 404 situation
-export class EntryMainRoute extends Component {
+export class EntryMainRoute extends BaseRoute {
   static propTypes = {
@@ -71,6 +75,6 @@ me: PropTypes.object,
   render() {
-    const { location/*, me*/ } = this.props,
-          routes = getRoutes(),
-          currentRoute = getRoute(location.pathname),
-          redirect = currentRoute.redirect ? _isFunction(currentRoute.redirect) ? currentRoute.redirect() : currentRoute.redirect : false;
+    const { location/*, me*/ } = this.props;
+    const routes = getRoutes();
+    const currentRoute = getRoute(location.pathname);
+    const redirect = currentRoute.redirect ? _isFunction(currentRoute.redirect) ? currentRoute.redirect() : currentRoute.redirect : false;
 
@@ -85,18 +89,3 @@ return (
         <Nav />
-        <Switch>
-          {redirect ? <Redirect to={redirect} /> : null}
-          {routes.map((route) => {
-            const { component: Component, key, ...rest } = route;
-
-            return (
-              <Route key={key} {...rest} render={props => {
-                return (
-                  <div>
-                    <Component {...props} />
-                  </div>
-                );
-              }} />
-            );
-          })}
-        </Switch>
+        {this.renderRoutes(routes, redirect)}
         <Footer />
@@ -103,0 +92,0 @@ </div>

webpack.server.js

 const webpack = require('webpack');
 const path = require('path');
-const devConfig = require('./webpack.dev.js');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
+const baseConfig = require('./webpack.base.js')('server');
 
-const extractCSS = new ExtractTextPlugin({
-  filename: '[contenthash]-[name].css',
-  allChunks: true,
-});
-
-const extractSCSS = new ExtractTextPlugin({
-  filename: '[contenthash]-[name].css',
-  allChunks: true,
-});
-
 module.exports = function(env) {
-  let config = {
-    entry: {
-      server: path.resolve(__dirname, 'src/server')
-    },
+  baseConfig.entry = {
+    server: path.resolve(__dirname, 'src/server')
+  };
 
-    output: {
-      path: path.join(__dirname, '/dist/server'),
-      publicPath: '/assets/',
-      filename: 'index.js'
-    },
+  baseConfig.output = {
+    path: path.join(__dirname, '/dist/server'),
+    publicPath: '/assets/',
+    filename: 'index.js'
+  };
 
-    plugins: [
-      extractCSS,
-      extractSCSS,
-    ],
+  baseConfig.target = 'node';
+  baseConfig.externals = [nodeExternals()]; // in order to ignore all modules in node_modules folder
 
-    resolve: devConfig.resolve,
-    module: devConfig.module,
-    target: 'node',
-    externals: [nodeExternals()] // in order to ignore all modules in node_modules folder
-  };
-
   if (env === 'prod') {
-    config.plugins.push(
+    baseConfig.plugins.push(
       new UglifyJsPlugin({
@@ -49,10 +29,10 @@ uglifyOptions: {
       new webpack.DefinePlugin({
-        'process.env.NODE_ENV': '"production"',
+        'process.env.NODE_ENV': '"production"'
       })
     );
   } else {
-    config.devtool = 'cheap-module-eval-source-map';
+    baseConfig.devtool = 'cheap-module-eval-source-map';
   }
   
-  return config;
+  return baseConfig;
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

468097

increased by0.27%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

49

increased by2.08%

Lines of code

1525

decreased by-1.74%

No dependency changes