├── dist
    └── .gitignore
├── static
    ├── dist
    │   └── .gitignore
    └── favicon.ico
├── .gitignore
├── src
    ├── components
    │   ├── Avatar.scss
    │   └── Avatar.js
    ├── containers
    │   ├── routes.js
    │   └── Main.js
    ├── apis
    │   └── github.js
    ├── client.js
    └── server.js
├── .editorconfig
├── configs
    ├── webpack.server-watch.js
    ├── webpack.server.js
    ├── webpack.client.js
    └── webpack.client-watch.js
├── LICENSE.md
├── README.md
└── package.json


/dist/.gitignore:
--------------------------------------------------------------------------------
1 | [^.]*


--------------------------------------------------------------------------------
/static/dist/.gitignore:
--------------------------------------------------------------------------------
1 | [^.]*


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | node_modules/
3 | *.log
4 | *.map
5 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RickWong/react-isomorphic-starterkit/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/src/components/Avatar.scss:
--------------------------------------------------------------------------------
1 | .avatar {
2 | 	img {
3 | 		border-radius: 50%;
4 | 		width: 32px;
5 | 		height: 32px;
6 | 		margin: 0 2px 2px 0;
7 | 	}
8 | }
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig: http://EditorConfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | end_of_line = crlf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | indent_style = tab
11 | tab_width = 4
12 | 


--------------------------------------------------------------------------------
/src/containers/routes.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {Router, Route} from "react-router";
 3 | 
 4 | import Main from "./Main";
 5 | 
 6 | /**
 7 |  * The React Router routes for both the server and the client.
 8 |  */
 9 | module.exports = (
10 | 	<Router>
11 | 		<Route path="/" component={Main} />
12 | 	</Router>
13 | );
14 | 


--------------------------------------------------------------------------------
/src/apis/github.js:
--------------------------------------------------------------------------------
 1 | import fetch from "cross-fetch";
 2 | import fetchPlus from "fetch-plus";
 3 | import plusJson from "fetch-plus-json";
 4 | import plusBearerauth from "fetch-plus-bearerauth";
 5 | 
 6 | const githubServerUrl = () => {
 7 | 	if (__SERVER__) {
 8 | 		return "https://api.github.com";
 9 | 	}
10 | 
11 | 	if (__CLIENT__) {
12 | 		const {protocol, hostname, port} = window.location;
13 | 
14 | 		return `${protocol}//${hostname}:${port}/api/github`;
15 | 	}
16 | };
17 | 
18 | const endpoint = fetchPlus.connectEndpoint(githubServerUrl());
19 | 
20 | endpoint.addMiddleware(plusJson());
21 | 
22 | module.exports = endpoint;
23 | 


--------------------------------------------------------------------------------
/configs/webpack.server-watch.js:
--------------------------------------------------------------------------------
 1 | var webpack = require("webpack");
 2 | var config = require("./webpack.server.js");
 3 | var wds = {
 4 | 	hostname: process.env.HOSTNAME || "localhost",
 5 | 	port: 8080
 6 | };
 7 | 
 8 | config.cache = true;
 9 | config.debug = true;
10 | 
11 | config.entry.unshift(
12 | 	"webpack/hot/poll?1000"
13 | );
14 | 
15 | config.output.publicPath = "http://" + wds.hostname + ":" + wds.port + "/dist";
16 | 
17 | config.plugins = [
18 | 	new webpack.DefinePlugin({__CLIENT__: false, __SERVER__: true, __PRODUCTION__: false, __DEV__: true}),
19 | 	new webpack.HotModuleReplacementPlugin(),
20 | 	new webpack.NoErrorsPlugin()
21 | ];
22 | 
23 | module.exports = config;
24 | 


--------------------------------------------------------------------------------
/src/components/Avatar.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import withStyles from "isomorphic-style-loader/lib/withStyles";
 3 | import styles from "isomorphic-style!css?modules!sass!./Avatar.scss";
 4 | 
 5 | const avatarUrl = (id = 0, avatarSize = 32) => `https://avatars.githubusercontent.com/u/${id}?v=3&s=${avatarSize}`;
 6 | 
 7 | export default withStyles(({user = {}}) => {
 8 | 	const href  = "https://github.com/" + (user.login || "RickWong/react-isomorphic-starterkit");
 9 | 	const title = user.login || "you here? star us!";
10 | 	const alt   = user.login || "you?";
11 | 
12 | 	return (
13 | 		<a className={styles.avatar} href={href} title={title} target="_blank">
14 | 			<img src={avatarUrl(user.id)} alt={alt} />
15 | 		</a>
16 | 	);
17 | }, styles);
18 | 


--------------------------------------------------------------------------------
/src/client.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import * as ReactRouter from "react-router";
 4 | import Transmit from "react-transmit";
 5 | 
 6 | import routesContainer from "containers/routes";
 7 | 
 8 | /**
 9 |  * Fire-up React Router.
10 |  */
11 | const reactRoot = window.document.getElementById("react-root");
12 | Transmit.render(ReactRouter.Router, {routes: routesContainer, history: ReactRouter.browserHistory}, reactRoot);
13 | 
14 | /**
15 |  * Detect whether the server-side render has been discarded due to an invalid checksum.
16 |  */
17 | if (process.env.NODE_ENV !== "production") {
18 | 	if (!reactRoot.firstChild || !reactRoot.firstChild.attributes ||
19 | 	    !reactRoot.firstChild.attributes["data-react-checksum"]) {
20 | 		console.error("Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.");
21 | 	}
22 | }
23 | 
24 | 


--------------------------------------------------------------------------------
/configs/webpack.server.js:
--------------------------------------------------------------------------------
 1 | var webpack       = require("webpack");
 2 | var nodeExternals = require("webpack-node-externals");
 3 | var path          = require("path");
 4 | var fs            = require("fs");
 5 | 
 6 | module.exports = {
 7 | 	target:  "node",
 8 | 	cache:   false,
 9 | 	context: __dirname,
10 | 	debug:   false,
11 | 	devtool: "source-map",
12 | 	entry:   ["../src/server"],
13 | 	output:  {
14 | 		path:          path.join(__dirname, "../dist"),
15 | 		filename:      "server.js"
16 | 	},
17 | 	plugins: [
18 | 		new webpack.DefinePlugin({__CLIENT__: false, __SERVER__: true, __PRODUCTION__: true, __DEV__: false}),
19 | 		new webpack.DefinePlugin({"process.env": {NODE_ENV: '"production"'}})
20 | 	],
21 | 	module:  {
22 | 		loaders: [
23 | 			{test: /\.json$/, loaders: ["json"]},
24 | 			{test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/, loaders: ["file?context=static&name=/[path][name].[ext]"], exclude: /node_modules/},
25 | 			{test: /\.js$/, loaders: ["babel?presets[]=es2015&presets[]=stage-0&presets[]=react"], exclude: /node_modules/}
26 | 		],
27 | 		postLoaders: [
28 | 		],
29 | 		noParse: /\.min\.js/
30 | 	},
31 | 	externals: [nodeExternals({
32 | 		whitelist: ["webpack/hot/poll?1000"]
33 | 	})],
34 | 	resolve: {
35 | 		modulesDirectories: [
36 | 			"src",
37 | 			"node_modules",
38 | 			"static"
39 | 		],
40 | 		extensions: ["", ".json", ".js"]
41 | 	},
42 | 	node:    {
43 | 		__dirname: true,
44 | 		fs:        "empty"
45 | 	}
46 | };
47 | 


--------------------------------------------------------------------------------
/configs/webpack.client.js:
--------------------------------------------------------------------------------
 1 | var webpack = require("webpack");
 2 | var path = require("path");
 3 | 
 4 | module.exports = {
 5 | 	target:  "web",
 6 | 	cache:   false,
 7 | 	context: __dirname,
 8 | 	debug:   false,
 9 | 	devtool: false,
10 | 	entry:   ["../src/client"],
11 | 	output:  {
12 | 		path:          path.join(__dirname, "../static/dist"),
13 | 		filename:      "client.js",
14 | 		chunkFilename: "[name].[id].js"
15 | 	},
16 | 	plugins: [
17 | 		new webpack.DefinePlugin({__CLIENT__: true, __SERVER__: false, __PRODUCTION__: true, __DEV__: false}),
18 | 		new webpack.DefinePlugin({"process.env": {NODE_ENV: '"production"'}}),
19 | 		new webpack.optimize.DedupePlugin(),
20 | 		new webpack.optimize.OccurenceOrderPlugin(),
21 | 		new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})
22 | 	],
23 | 	module:  {
24 | 		loaders: [
25 | 			{test: /\.json$/, loaders: ["json"]},
26 | 			{test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/, loaders: ["file?context=static&name=/[path][name].[ext]"], exclude: /node_modules/}
27 | 		],
28 | 		postLoaders: [
29 | 			{test: /\.js$/, loaders: ["babel?presets[]=es2015&presets[]=stage-0&presets[]=react"], exclude: /node_modules/}
30 | 		],
31 | 		noParse: /\.min\.js/
32 | 	},
33 | 	resolve: {
34 | 		modulesDirectories: [
35 | 			"src",
36 | 			"node_modules",
37 | 			"static"
38 | 		],
39 | 		extensions: ["", ".json", ".js"]
40 | 	},
41 | 	node:    {
42 | 		__dirname: true,
43 | 		fs:        'empty'
44 | 	}
45 | };
46 | 


--------------------------------------------------------------------------------
/configs/webpack.client-watch.js:
--------------------------------------------------------------------------------
 1 | var webpack = require("webpack");
 2 | var config = require("./webpack.client.js");
 3 | var wds = {
 4 | 	hostname: process.env.HOSTNAME || "localhost",
 5 | 	port: 8080
 6 | };
 7 | 
 8 | config.cache   = true;
 9 | config.debug   = true;
10 | config.devtool = "cheap-module-eval-source-map";
11 | 
12 | config.entry.unshift(
13 | 	"webpack-dev-server/client?http://" + wds.hostname + ":" + wds.port,
14 | 	"webpack/hot/only-dev-server"
15 | );
16 | 
17 | config.devServer = {
18 | 	publicPath: "http://" + wds.hostname + ":" + wds.port + "/dist",
19 | 	hot:        true,
20 | 	inline:     false,
21 | 	lazy:       false,
22 | 	quiet:      true,
23 | 	noInfo:     true,
24 | 	headers:    {"Access-Control-Allow-Origin": "*"},
25 | 	stats:      {colors: true},
26 | 	host:       wds.hostname
27 | };
28 | 
29 | config.output.publicPath             = config.devServer.publicPath;
30 | config.output.hotUpdateMainFilename  = "update/[hash]/update.json";
31 | config.output.hotUpdateChunkFilename = "update/[hash]/[id].update.js";
32 | 
33 | config.plugins = [
34 | 	new webpack.DefinePlugin({__CLIENT__: true, __SERVER__: false, __PRODUCTION__: false, __DEV__: true}),
35 | 	new webpack.HotModuleReplacementPlugin(),
36 | 	new webpack.NoErrorsPlugin()
37 | ];
38 | 
39 | config.module.postLoaders = [
40 | 	{test: /\.js$/, loaders: ["babel?cacheDirectory&presets[]=es2015&presets[]=stage-0&presets[]=react&presets[]=react-hmre"], exclude: /node_modules/}
41 | ];
42 | 
43 | module.exports = config;
44 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # BSD 3-Clause License
 2 | 
 3 | Copyright © 2015, Rick Wong  
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | 1. Redistributions of source code must retain the above copyright
10 |    notice, this list of conditions and the following disclaimer.
11 | 2. Redistributions in binary form must reproduce the above copyright
12 |    notice, this list of conditions and the following disclaimer in the
13 |    documentation and/or other materials provided with the distribution.
14 | 3. Neither the name of the copyright holder nor the
15 |    names of its contributors may be used to endorse or promote products
16 |    derived from this software without specific prior written permission.
17 | 
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY
22 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
25 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![screenshot](https://i.imgur.com/JgBEIMm.png?1)
 2 | 
 3 | # React Isomorphic Starterkit
 4 | 
 5 | Isomorphic starterkit with server-side React rendering using 
 6 | [npm](https://www.npmjs.com),
 7 | [koa](http://koajs.com),
 8 | [webpack](https://webpack.github.io/), 
 9 | [babel](http://babeljs.io),
10 | [react](https://facebook.github.io/react),
11 | [react-router](https://github.com/rackt/react-router), 
12 | [react-transform-hmr](https://github.com/gaearon/react-transform-hmr), 
13 | [react-transmit](https://github.com/RickWong/react-transmit),
14 | [react-inline-css](https://github.com/RickWong/react-inline-css)
15 | 
16 | ![version](https://img.shields.io/npm/v/react-isomorphic-starterkit.svg) ![license](https://img.shields.io/npm/l/react-isomorphic-starterkit.svg) [![Package Quality](http://npm.packagequality.com/shield/react-isomorphic-starterkit.svg)](http://packagequality.com/#?package=react-isomorphic-starterkit) ![installs](https://img.shields.io/npm/dt/react-isomorphic-starterkit.svg) ![downloads](https://img.shields.io/github/downloads/RickWong/react-isomorphic-starterkit/latest/total.svg)
17 | 
18 | ## Features
19 | 
20 | - Fully automated toolchain with npm run scripts
21 | - React 0.14 + React Router 2.0 on the client and server
22 | - Babel 6 automatically compiles ES2015 + ES7 stage-0
23 | - Webpack HMR for instant server updates
24 | - React Transform HMR for instant client updates
25 | - React Transmit to preload on server and hydrate client
26 | - InlineCss-component for styling components
27 | 
28 | It just works out-of-the-box.
29 | 
30 | ## Installation
31 | 
32 | Development
33 | 
34 | ```bash
35 | git clone https://github.com/RickWong/react-isomorphic-starterkit.git
36 | cd react-isomorphic-starterkit
37 | 	
38 | npm install
39 | npm run watch     # Yes, ONE command for both server AND client development!
40 | ```
41 | 
42 | Production
43 | 
44 | ```bash
45 | npm run build
46 | npm run start  
47 | ```
48 | 
49 | ## Usage
50 | 
51 | Run `npm run watch` in your terminal and play with `views/Main.js` to get a feel of
52 | the server-side rendering and client-side hot updates.
53 | 
54 | ## Community
55 | 
56 | Let's start one together! After you ★Star this project, follow [@Rygu](https://twitter.com/rygu)
57 | on Twitter.
58 | 
59 | ## License
60 | 
61 | BSD 3-Clause license. Copyright © 2015, Rick Wong. All rights reserved.
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-isomorphic-starterkit",
 3 |   "description": "Isomorphic starterkit with server-side React rendering.",
 4 |   "version": "5.4.0",
 5 |   "license": "BSD-3-Clause",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/RickWong/react-isomorphic-starterkit.git"
 9 |   },
10 |   "homepage": "https://github.com/RickWong/react-isomorphic-starterkit",
11 |   "keywords": [
12 |     "react",
13 |     "isomorphic",
14 |     "universal",
15 |     "starter",
16 |     "boilerplate",
17 |     "template",
18 |     "webpack",
19 |     "koa",
20 |     "transmit"
21 |   ],
22 |   "main": "dist/server.js",
23 |   "scripts": {
24 |     "start": "forever --minUptime 1000 --spinSleepTime 1000 -c \"node --harmony\" ./dist/server.js",
25 |     "build-server": "webpack --colors --display-error-details --config configs/webpack.server.js",
26 |     "build-client": "webpack --colors --display-error-details --config configs/webpack.client.js",
27 |     "build": "concurrently \"npm run build-server\" \"npm run build-client\"",
28 |     "watch-server": "webpack --watch --verbose --colors --display-error-details --config configs/webpack.server-watch.js",
29 |     "watch-server-start": "node node_modules/just-wait --pattern \"dist/*.js\" && npm run start",
30 |     "watch-client": "webpack-dev-server --config configs/webpack.client-watch.js",
31 |     "watch": "concurrently --kill-others \"npm run watch-server-start\" \"npm run watch-server\" \"npm run watch-client\""
32 |   },
33 |   "dependencies": {
34 |     "babel-polyfill": "6.6.1",
35 |     "cross-fetch": "1.1.0",
36 |     "css-loader": "0.23.1",
37 |     "fetch-plus": "3.8.1",
38 |     "fetch-plus-bearerauth": "3.5.0",
39 |     "fetch-plus-json": "3.6.0",
40 |     "file-loader": "0.8.5",
41 |     "isomorphic-style-loader": "0.0.10",
42 |     "koa": "1.2.0",
43 |     "koa-proxy": "0.5.0",
44 |     "koa-static": "2.0.0",
45 |     "node-sass": "3.4.2",
46 |     "react": "0.14.7",
47 |     "react-dom": "0.14.7",
48 |     "react-inline-css": "2.1.0",
49 |     "react-router": "2.0.0",
50 |     "react-transmit": "3.1.7",
51 |     "sass-loader": "3.1.2",
52 |     "style-loader": "0.13.0"
53 |   },
54 |   "devDependencies": {
55 |     "babel": "6.5.2",
56 |     "babel-core": "6.6.5",
57 |     "babel-loader": "6.2.4",
58 |     "babel-preset-es2015": "6.6.0",
59 |     "babel-preset-react": "6.5.0",
60 |     "babel-preset-react-hmre": "1.1.1",
61 |     "babel-preset-stage-0": "6.5.0",
62 |     "concurrently": "2.0.0",
63 |     "forever": "0.15.1",
64 |     "json-loader": "0.5.4",
65 |     "just-wait": "1.0.5",
66 |     "webpack": "1.12.14",
67 |     "webpack-dev-server": "1.14.1",
68 |     "webpack-node-externals": "1.0.0"
69 |   },
70 |   "engines": {
71 |     "node": ">=0.10.32"
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
  1 | import babelPolyfill from "babel-polyfill";
  2 | import koa from "koa";
  3 | import koaProxy from "koa-proxy";
  4 | import koaStatic from "koa-static";
  5 | import React from "react";
  6 | import ReactDOM from "react-dom/server";
  7 | import * as ReactRouter from "react-router";
  8 | import Transmit from "react-transmit";
  9 | 
 10 | import githubApi from "apis/github";
 11 | import routesContainer from "containers/routes";
 12 | import favicon from "favicon.ico";
 13 | 
 14 | try {
 15 | 	const app      = koa();
 16 | 	const hostname = process.env.HOSTNAME || "localhost";
 17 | 	const port     = process.env.PORT || 8000;
 18 | 	let   routes   = routesContainer;
 19 | 
 20 | 	app.use(koaStatic("static"));
 21 | 
 22 | 	app.use(koaProxy({
 23 | 		host: githubApi.url,
 24 | 		match: /^\/api\/github\//i,
 25 | 		map: (path) => path.replace(/^\/api\/github\//i, "/")
 26 | 	}));
 27 | 
 28 | 	app.use(function *(next) {
 29 | 		yield ((callback) => {
 30 | 			const webserver = __PRODUCTION__ ? "" : `//${this.hostname}:8080`;
 31 | 			const location  = this.path;
 32 | 
 33 | 			ReactRouter.match({routes, location}, (error, redirectLocation, renderProps) => {
 34 | 				if (redirectLocation) {
 35 | 					this.redirect(redirectLocation.pathname + redirectLocation.search, "/");
 36 | 					return;
 37 | 				}
 38 | 
 39 | 				if (error || !renderProps) {
 40 | 					callback(error);
 41 | 					return;
 42 | 				}
 43 | 
 44 | 				const styles = {};
 45 | 
 46 | 				const StyleProvider = React.createClass({
 47 | 					childContextTypes:{
 48 | 						styles:    React.PropTypes.array,
 49 | 						insertCss: React.PropTypes.func
 50 | 					},
 51 | 
 52 | 					getChildContext () {
 53 | 						return {
 54 | 							styles,
 55 | 							insertCss (style) { styles[style] = style._getCss(); }
 56 | 						};
 57 | 					},
 58 | 
 59 | 					render () {
 60 | 						return <ReactRouter.RouterContext {...this.props} />;
 61 | 					}
 62 | 				});
 63 | 
 64 | 				Transmit.renderToString(StyleProvider, renderProps).then(({reactString, reactData}) => {
 65 | 					let cssModules = "";
 66 | 
 67 | 					Object.keys(styles).forEach((style) => { cssModules += styles[style]; });
 68 | 
 69 | 					let template = (
 70 | 						`<!doctype html>
 71 | 						<html lang="en-us">
 72 | 							<head>
 73 | 								<meta charset="utf-8" />
 74 | 								<title>react-isomorphic-starterkit</title>
 75 | 								<link rel="shortcut icon" href="${favicon}" />
 76 | 								<style>${cssModules}</style>
 77 | 							</head>
 78 | 							<body>
 79 | 								<div id="react-root">${reactString}</div>
 80 | 							</body>
 81 | 						</html>`
 82 | 					);
 83 | 
 84 | 					this.type = "text/html";
 85 | 					this.body = Transmit.injectIntoMarkup(template, reactData, [`${webserver}/dist/client.js`]);
 86 | 
 87 | 					callback(null);
 88 | 				}).catch(e => {
 89 | 					callback(e);
 90 | 				});
 91 | 			});
 92 | 		});
 93 | 	});
 94 | 
 95 | 	app.listen(port, () => {
 96 | 		console.info("==> ✅  Server is listening");
 97 | 		console.info("==> 🌎  Go to http://%s:%s", hostname, port);
 98 | 	});
 99 | 
100 | 	if (__DEV__) {
101 | 		if (module.hot) {
102 | 			console.log("[HMR] Waiting for server-side updates");
103 | 
104 | 			module.hot.accept("containers/routes", () => {
105 | 				routes = require("containers/routes");
106 | 			});
107 | 
108 | 			module.hot.addStatusHandler((status) => {
109 | 				if (status === "abort") {
110 | 					setTimeout(() => process.exit(0), 0);
111 | 				}
112 | 			});
113 | 		}
114 | 	}
115 | }
116 | catch (error) {
117 | 	console.error(error.stack || error);
118 | 
119 | 	throw error;
120 | }
121 | 


--------------------------------------------------------------------------------
/src/containers/Main.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import InlineCss from "react-inline-css";
  3 | import Transmit from "react-transmit";
  4 | 
  5 | import githubApi from "apis/github";
  6 | import Avatar from "components/Avatar";
  7 | import favicon from "favicon.ico";
  8 | 
  9 | const fetchStargazers  = (page, per_page = 100) => {
 10 | 	return githubApi.browse(
 11 | 		["repos", "RickWong/react-isomorphic-starterkit", "stargazers"],
 12 | 		{ query: { page, per_page } }
 13 | 	).then(json => {
 14 | 		return (json || []).map(({id, login}) => ({id, login}));
 15 | 	}).catch(error => {
 16 | 		throw error;
 17 | 	});
 18 | };
 19 | 
 20 | /**
 21 |  * Main React application entry-point for both the server and client.
 22 |  */
 23 | class Main extends React.Component {
 24 | 	/**
 25 | 	 * componentWillMount() runs on server and client.
 26 | 	 */
 27 | 	componentWillMount () {
 28 | 		if (__SERVER__) {
 29 | 			console.log("Hello server");
 30 | 		}
 31 | 
 32 | 		if (__CLIENT__) {
 33 | 			console.log("Hello client");
 34 | 		}
 35 | 	}
 36 | 
 37 | 	/**
 38 | 	 * componentDidUpdate() only runs on the client.
 39 | 	 */
 40 | 	componentDidUpdate (prevProps, prevState) {
 41 | 		if (!this.props.additionalStargazers) {
 42 | 			return;
 43 | 		}
 44 | 
 45 | 		this.loadMoreStargazersOnClient();
 46 | 	}
 47 | 
 48 | 	/**
 49 | 	 * Load more stargazers.
 50 | 	 */
 51 | 	loadMoreStargazersOnClient () {
 52 | 		const {additionalStargazers = [], transmit} = this.props;
 53 | 		let {nextPage, pagesToFetch} = transmit.variables;
 54 | 
 55 | 		if (--pagesToFetch <= 0) {
 56 | 			return;
 57 | 		}
 58 | 
 59 | 		++nextPage;
 60 | 
 61 | 		transmit.forceFetch({
 62 | 			nextPage,
 63 | 			pagesToFetch,
 64 | 			additionalStargazers
 65 | 		}, "additionalStargazers");
 66 | 	}
 67 | 
 68 | 	/**
 69 | 	 * Runs on server and client.
 70 | 	 */
 71 | 	render () {
 72 | 		const repositoryUrl = "https://github.com/RickWong/react-isomorphic-starterkit";
 73 | 		const avatarSize    = 32;
 74 | 		const avatarUrl     = (id) => `https://avatars.githubusercontent.com/u/${id}?v=3&s=${avatarSize}`;
 75 | 
 76 | 		/**
 77 | 		 * This is a Transmit fragment.
 78 | 		 */
 79 | 		let {stargazers, additionalStargazers} = this.props;
 80 | 
 81 | 		if (additionalStargazers) {
 82 | 			stargazers = stargazers.concat(additionalStargazers);
 83 | 		}
 84 | 
 85 | 		return (
 86 | 			<InlineCss stylesheet={Main.css(avatarSize)} namespace="Main">
 87 | 				<a className="github" href={repositoryUrl}>
 88 | 					<img src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"/>
 89 | 				</a>
 90 | 				<h1>
 91 | 					<img src={favicon} alt="icon"/>
 92 | 					<br/>React Isomorphic Starterkit. Let&apos;s get you started!
 93 | 				</h1>
 94 | 				<h3>All-You-Need Features</h3>
 95 | 				<ul>
 96 | 					<li>Fully automated toolchain with npm run scripts</li>
 97 | 					<li>React 0.14 + React Router 2.0 on the client and server</li>
 98 | 					<li>Babel 6 automatically compiles ES2015 + ES7 stage-0</li>
 99 | 					<li>Webpack HMR for instant server updates</li>
100 | 					<li>React Transform HMR for instant client updates</li>
101 | 					<li>React Transmit to preload on server and hydrate client</li>
102 | 					<li>InlineCss-component for styling components</li>
103 | 				</ul>
104 | 				<p>
105 | 					In short: <em>an excellent choice</em>.
106 | 					Ready to start{'?'}
107 | 				</p>
108 | 				<h3>
109 | 					Open Community
110 | 					<iframe src="https://ghbtns.com/github-btn.html?user=RickWong&repo=react-isomorphic-starterkit&type=star&count=true" frameBorder="0" scrolling="0" width="110" height="20" style={{float:"right"}}></iframe>
111 | 				</h3>
112 | 				<p>
113 | 					<Avatar />
114 | 					{stargazers && stargazers.map(user =>
115 | 						<Avatar key={user.id} user={user} />
116 | 					)}
117 | 					<Avatar />
118 | 				</p>
119 | 			</InlineCss>
120 | 		);
121 | 	}
122 | 	/**
123 | 	 * <InlineCss> component allows you to write a CSS stylesheet for your component. Target
124 | 	 * your component with `&` and its children with `& selectors`. Be specific.
125 | 	 */
126 | 	static css (avatarSize) {
127 | 		return (`
128 | 			& .github {
129 | 				position: absolute;
130 | 				top: 0;
131 | 				right: 0;
132 | 				border: 0;
133 | 			}
134 | 			& {
135 | 				font-family: sans-serif;
136 | 				color: #0df;
137 | 				padding: 10px 30px 30px;
138 | 				width: 443px;
139 | 				margin: 10px auto;
140 | 				background: #222;
141 | 			}
142 | 		`);
143 | 	}
144 | }
145 | 
146 | /**
147 |  * Use Transmit to query and return GitHub stargazers as a Promise.
148 |  */
149 | export default Transmit.createContainer(Main, {
150 | 	initialVariables: {
151 | 		nextPage:       2,
152 | 		pagesToFetch:   15,
153 | 		additionalStargazers: []
154 | 	},
155 | 	fragments: {
156 | 		/**
157 | 		 * Load first stargazers.
158 | 		 */
159 | 		stargazers: () => fetchStargazers(1),
160 | 		/**
161 | 		 * Load more stargazers deferred.
162 | 		 */
163 | 		additionalStargazers: ({nextPage, additionalStargazers}) => {
164 | 			return () => fetchStargazers(nextPage).then(newStargazers => {
165 | 				newStargazers = newStargazers.map(({id, login}) => {
166 | 					return { id, login };
167 | 				});
168 | 
169 | 				return additionalStargazers.concat(newStargazers);
170 | 			});
171 | 		}
172 | 	}
173 | });
174 | 


--------------------------------------------------------------------------------