From 8067cf92663cb07df2953dfdf45007eccbb4f013 Mon Sep 17 00:00:00 2001 From: Justkant Date: Thu, 8 Oct 2015 03:01:46 +0800 Subject: [PATCH 1/3] Update to react 0.14 Update some modules that follow the react update. Fix problem with history and server-side rendering. --- api/api.js | 2 +- package.json | 16 ++++++++-------- src/client.js | 7 +++---- src/helpers/Html.js | 4 ++-- src/server.js | 7 +++---- 5 files changed, 17 insertions(+), 19 deletions(-) diff --git a/api/api.js b/api/api.js index c4773cd..ccdcde1 100644 --- a/api/api.js +++ b/api/api.js @@ -44,7 +44,7 @@ if (config.apiPort) { console.error(err); } console.info('----\n==> 🌎 API is running on port %s', config.apiPort); - console.info('==> 💻 Send requests to http://localhost:%s', config.apiPort); + console.info('==> 💻 Send requests to http://localhost:%s ', config.apiPort); }); } else { console.error('==> ERROR: No PORT environment variable has been specified'); diff --git a/package.json b/package.json index 90be953..ccfaac1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "author": "Quentin 'Kant' Jaccarino", "name": "whatashop", - "version": "0.1.0", + "version": "0.1.1", "description": "Online Shopping Application", "homepage": "https://github.com/Justkant/WhatAShop#readme", "license": "MIT", @@ -89,22 +89,22 @@ "body-parser": "1.14.1", "express": "4.13.3", "file-loader": "0.8.4", - "history": "1.12.1", + "history": "1.12.2", "http-proxy": "1.11.2", "jsonwebtoken": "^5.4.0", "lru-memoize": "1.0.0", "map-props": "1.0.0", - "multireducer": "1.0.0", + "multireducer": "1.0.1", "piping": "0.3.0", "pretty-error": "1.2.0", "query-string": "2.4.2", - "react": "^0.14.0-rc1", + "react": "^0.14.0", "react-document-meta": "2.0.0-rc2", - "react-dom": "0.14.0-rc1", + "react-dom": "0.14.0", "react-redux": "3.1.0", "react-router": "1.0.0-rc1", "redux": "3.0.2", - "redux-form": "2.0.1", + "redux-form": "2.1.0", "serialize-javascript": "1.1.2", "serve-favicon": "2.3.0", "serve-static": "1.10.0", @@ -131,7 +131,7 @@ "eslint-plugin-react": "3.5.1", "json-loader": "0.5.3", "karma": "0.13.10", - "karma-chrome-launcher": "0.2.0", + "karma-chrome-launcher": "0.2.1", "karma-cli": "0.1.1", "karma-firefox-launcher": "0.1.6", "karma-mocha": "0.2.0", @@ -140,7 +140,7 @@ "karma-webpack": "1.7.0", "mocha": "2.3.3", "react-a11y": "0.2.6", - "react-addons-test-utils": "0.14.0-rc1", + "react-addons-test-utils": "0.14.0", "react-hot-loader": "1.3.0", "react-transform-hmr": "1.0.1", "redux-devtools": "2.1.5", diff --git a/src/client.js b/src/client.js index efe310a..eac1b4b 100644 --- a/src/client.js +++ b/src/client.js @@ -4,7 +4,7 @@ import 'babel/polyfill'; import React from 'react'; import ReactDOM from 'react-dom'; -import createHistory from 'history/lib/createBrowserHistory'; +import { createHistory } from 'history'; import createStore from './redux/create'; import ApiClient from './helpers/ApiClient'; import universalRouter from './helpers/universalRouter'; @@ -43,13 +43,12 @@ history.listenBefore((loc, callback) => { .then((callback)); }); -render(location, history, store); +render(location, history, store, !dest.firstChild); if (process.env.NODE_ENV !== 'production') { window.React = React; // enable debugger - const reactRoot = window.document.getElementById('content'); - if (!reactRoot || !reactRoot.firstChild || !reactRoot.firstChild.attributes || !reactRoot.firstChild.attributes['data-react-checksum']) { + if (!dest || !dest.firstChild || !dest.firstChild.attributes || !dest.firstChild.attributes['data-react-checksum']) { console.error('Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.'); } } diff --git a/src/helpers/Html.js b/src/helpers/Html.js index acde1e2..7194f96 100644 --- a/src/helpers/Html.js +++ b/src/helpers/Html.js @@ -16,13 +16,13 @@ import DocumentMeta from 'react-document-meta'; export default class Html extends Component { static propTypes = { assets: PropTypes.object, - component: PropTypes.object, + component: PropTypes.node, store: PropTypes.object } render() { const {assets, component, store} = this.props; - const content = ReactDOM.renderToString(component); + const content = component ? ReactDOM.renderToString(component) : ''; return ( diff --git a/src/server.js b/src/server.js index be4f4e0..e020b51 100644 --- a/src/server.js +++ b/src/server.js @@ -1,7 +1,7 @@ import Express from 'express'; import React from 'react'; import ReactDOM from 'react-dom/server'; -import createLocation from 'history/lib/createLocation'; +import { createMemoryHistory } from 'history'; import config from './config'; import favicon from 'serve-favicon'; import httpProxy from 'http-proxy'; @@ -47,7 +47,7 @@ app.use((req, res) => { } const client = new ApiClient(req); const store = createStore(client); - const location = createLocation(req.path, req.query); + const location = createMemoryHistory().createLocation(req.originalUrl); universalRouter(location, undefined, store, true) .then(({component, redirectLocation}) => { @@ -65,8 +65,7 @@ app.use((req, res) => { } console.error('ROUTER ERROR:', pretty.render(error)); res.send('\n' + - ReactDOM.renderToString(} - store={store}/>)); + ReactDOM.renderToString()); }); }); From 948d17222a16c9c3d830d2d7e316f1ce379a3955 Mon Sep 17 00:00:00 2001 From: Justkant Date: Thu, 8 Oct 2015 03:44:12 +0800 Subject: [PATCH 2/3] Fix production build Add cache to travis ci on the node_modules directory to speed up build times --- .travis.yml | 4 ++++ package.json | 3 +++ webpack/prod.config.js | 4 +++- 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index e868f8d..825debc 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,6 +6,10 @@ node_js: sudo: false +cache: + directories: + - node_modules + before_script: - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start diff --git a/package.json b/package.json index ccfaac1..b314fa4 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "start-prod": "node ./node_modules/better-npm-run start-prod", "start-prod-api": "node ./node_modules/better-npm-run start-prod-api", "build": "webpack --verbose --colors --display-error-details --config webpack/prod.config.js", + "postinstall": "webpack --display-error-details --config webpack/prod.config.js", "lint": "eslint -c .eslintrc src", "start-dev": "node ./node_modules/better-npm-run start-dev", "start-dev-api": "node ./node_modules/better-npm-run start-dev-api", @@ -41,6 +42,7 @@ "env": { "NODE_PATH": "./src", "NODE_ENV": "production", + "PORT": 3000, "APIPORT": 3030 } }, @@ -129,6 +131,7 @@ "eslint-config-airbnb": "0.1.0", "eslint-loader": "1.0.0", "eslint-plugin-react": "3.5.1", + "extract-text-webpack-plugin": "^0.8.2", "json-loader": "0.5.3", "karma": "0.13.10", "karma-chrome-launcher": "0.2.1", diff --git a/webpack/prod.config.js b/webpack/prod.config.js index 09a5883..a956663 100644 --- a/webpack/prod.config.js +++ b/webpack/prod.config.js @@ -3,6 +3,7 @@ var path = require('path'); var webpack = require('webpack'); var CleanPlugin = require('clean-webpack-plugin'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); var autoprefixer = require('autoprefixer-stylus'); var strip = require('strip-loader'); @@ -29,7 +30,7 @@ module.exports = { loaders: [ {test: /\.js$/, exclude: /node_modules/, loaders: [strip.loader('console.log', 'debug'), 'babel']}, {test: /\.json$/, loader: 'json-loader'}, - {test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'}, + {test: /\.styl$/, loader: ExtractTextPlugin.extract('style', 'css-loader!stylus-loader') }, {test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240'} ] }, @@ -47,6 +48,7 @@ module.exports = { plugins: [ new CleanPlugin([relativeAssetsPath]), + new ExtractTextPlugin('[name]-[chunkhash].css', {allChunks: true}), new webpack.DefinePlugin({ __CLIENT__: true, __SERVER__: false, From 754f99a6a86754aefe9fcfb057c093a779f8127e Mon Sep 17 00:00:00 2001 From: Justkant Date: Thu, 8 Oct 2015 04:01:45 +0800 Subject: [PATCH 3/3] Bump node engines and fix travis node version --- .travis.yml | 3 +-- package.json | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/.travis.yml b/.travis.yml index 825debc..8a28b37 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,8 +1,7 @@ language: node_js node_js: - - "4.1" - - "4.0" + - "4" sudo: false diff --git a/package.json b/package.json index b314fa4..03e758c 100644 --- a/package.json +++ b/package.json @@ -155,6 +155,6 @@ "webpack-hot-middleware": "2.4.1" }, "engines": { - "node": "4.0.0" + "node": "4.1.2" } }