rickwong/react-isomorphic-starterkit

Create an isomorphic React app in less than 5 minutes

React Isomorphic Starterkit

Isomorphic starterkit with server-side React rendering using npm, koa, webpack, babel, react, react-router, react-transform-hmr, react-transmit, react-inline-css

Features

• Fully automated toolchain with npm run scripts
• React 0.14 + React Router 2.0 on the client and server
• Babel 6 automatically compiles ES2015 + ES7 stage-0
• Webpack HMR for instant server updates
• React Transform HMR for instant client updates
• React Transmit to preload on server and hydrate client
• InlineCss-component for styling components

It just works out-of-the-box.

Installation

Development

git clone https://github.com/RickWong/react-isomorphic-starterkit.git
cd react-isomorphic-starterkit
	
npm install
npm run watch     # Yes, ONE command for both server AND client development!

Production

npm run build
npm run start  

Usage

Run npm run watch in your terminal and play with views/Main.js to get a feel of the server-side rendering and client-side hot updates.

Community

Let's start one together! After you ★Star this project, follow @Rygu on Twitter.

License

BSD 3-Clause license. Copyright © 2015, Rick Wong. All rights reserved.

react-isomorphic-starterkit's Issues

What is the recommended way of routing to a React component that isn't wrapped by Transmit?

For example, in views/Main.js, taking the Transmit code out and replacing the Transmit container export with export default Main; causes the server to fail to reply, which might be related to how the server currently expects to use Transmit.

One thing I did try (with react-transmit v2.5.0) was replacing the Transmit container export with export default Transmit.createContainer(Main);, basically a container with no queries, but even that continued to hang until I took the conditional out of https://github.com/RickWong/react-transmit/blob/b96b4abab914ebe84e44f53d00234ac656914d5c/src/lib/createContainer.js#L75. However, this doesn't seem like the ideal way of going about things since in this case I'm wrapping the React component with a Transmit container that I'm not using.

What do you recommend?

Error: Cannot find module "babel-runtime/helpers"

Tried the newest version and I'm now getting
Error: Cannot find module "babel-runtime/helpers"

when running npm run watch

Fatal error on load

I'm not able to get this to start up. After loading the entry point, I get this error in the log:

WARNING in ./~/hapi/~/vision/lib/manager.js
Critical dependencies:
251:33-46 the request of a dependency is an expression
 @ ./~/hapi/~/vision/lib/manager.js 251:33-46

I've run npm update reinstalled the app, but no dice.

Will this be updated to use Relay proper?

Any plans?

(react-a11y) Error message

In firefox developer edition i get this when browsing localhost:8000

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) morphic-starterkit" id="a11y-3" data-rea
(server) morphic-starterkit" data-reactid=".k4ckr warning.js:48:7
Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.

I have not made any changes just cloned git...

/K

(io.js) npm install failed on iojs

Hi there,

I couldn't get it installed in iojs 1.6.2 but it run flawlessly in node 0.12.1
Does it have something to do with v8?

../src/fibers.cc:140:3: error: ‘SetResourceConstraints’ is not a member of ‘v8’
v8::SetResourceConstraints(isolate, constraints);
^
../src/fibers.cc:140:3: note: suggested alternative:
../src/fibers.cc:139:7: note: ‘uni::SetResourceConstraints’
void SetResourceConstraints(Isolate* isolate, ResourceConstraints* constraints) {
^
make: *** [Release/obj.target/fibers/src/fibers.o] Error 1
make: Leaving directory /home/myhome/react-isomorphic-starterkit/node_modules/fibers/build' gyp ERR! build error gyp ERR! stack Error:make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/home/myhome/iojs-v1.6.2-linux-x64/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:267:23)
gyp ERR! stack at emitTwo (events.js:87:13)
gyp ERR! stack at ChildProcess.emit (events.js:169:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:1044:12)
gyp ERR! System Linux 3.16.0-33-generic
gyp ERR! command "/home/myhome/iojs-v1.6.2-linux-x64/bin/iojs" "/home/myhome/iojs-v1.6.2-linux-x64/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--release"
gyp ERR! cwd /home/myhome/react-isomorphic-starterkit/node_modules/fibers
gyp ERR! node -v v1.6.2
gyp ERR! node-gyp -v v1.0.2
gyp ERR! not ok
Build failed

Use Flux

It would be nice if the starter kit made use of Facebook's Flux or some Flux library like Reflux.

Can't seem to add api routes

Can't seem to add custom api routes in the src/server.js file. Every request seems to be intercepted by the React Router at this level.

Can't access webpack-dev-server :8080 from Vagrant

Steps:

1. vagrant init "ubuntu/trusty64".
2. Modify Vagrantfile to add port 8000 and 8080 to be accessible by host.
3. vagrant up
4. vagrant ssh
5. git clone github...react-isomorphic-starterkit, cd, npm install -g, npm install
6. Instead of npm run watch, which will fail because there is no browser/VT available, run:
   • npm run watch-client # in one tab
   • npm run start # in another tab

Result: http://localhost:8000/ looks great and shows the static result correctly, but throws a 404 on http://localhost:8080/dist/client.js

Problem: http://localhost:8080/dist/client.js can't be found by the host. If I instead run python -m SimpleHTTPServer 8080 or http-server -p8080, then http://localhost:8080/dist/client.js is found. It just looks like webpack-dev-server isn't listening to requests from the host?

You may remove NoErrorsPlugin with React Hot Loader 1.3.0

React Hot Loader 1.3.0 fixes a problem that caused NoErrorsPlugin to be necessary. In fact now errors thrown on module level shouldn't prevent future hot reloading of the same file after you fix the problem.

Please update to RHL 1.3.0, and remove NoErrorsPlugin from Webpack configuration.
Thanks!

(Windows) Warning during installation, and error when trying to run.

Hey,

While installing I see the following warning:

When trying to run, I get an error. The following is from the npm-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'watch' ]
2 info using [email protected]
3 info using [email protected]
4 verbose node symlink C:\Program Files\nodejs\\node.exe
5 verbose run-script [ 'prewatch', 'watch', 'postwatch' ]
6 info prewatch [email protected]
7 info watch [email protected]
8 verbose unsafe-perm in lifecycle true
9 info [email protected] Failed to exec watch script
10 error [email protected] watch: `eval 'npm run watch-server >tmp/server.log 2>&1 & SERVER_PID=$!';      eval 'npm run watch-client >tmp/client.log 2>&1 & CLIENT_PID=$!';     sleep 3;    npm run start;     kill $CLIENT_PID $SERVER_PID;`
10 error Exit status 1
11 error Failed at the [email protected] watch script.
11 error This is most likely a problem with the react-isomorphic-starterkit package,
11 error not with npm itself.
11 error Tell the author that this fails on your system:
11 error     eval 'npm run watch-server >tmp/server.log 2>&1 & SERVER_PID=$!';      eval 'npm run watch-client >tmp/client.log 2>&1 & CLIENT_PID=$!';     sleep 3;    npm run start;     kill $CLIENT_PID $SERVER_PID;
11 error You can get their info via:
11 error     npm owner ls react-isomorphic-starterkit
11 error There is likely additional logging output above.
12 error System Windows_NT 6.1.7601
13 error command "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "watch"
14 error cwd C:\Users\omers\development\react-isomorphic-starterkit
15 error node -v v0.10.35
16 error npm -v 1.4.28
17 error code ELIFECYCLE
18 verbose exit [ 1, true ]

Thanks for your help.

(Redux) Adding Redux to the isomorphic mix

I'm having a really hard time trying to initialise Redux along side Transmit and react-router isomorphically.

I've ripped out the starterkit's components and added actions, stores and components from Redux's simple counter example. I think the client rendering is close to what it should be:

Client.js

import React from "react";
import Router from "react-router";
import BrowserHistory from 'react-router/lib/BrowserHistory';
import Transmit from "react-transmit";
import routes from "views/Routes";
import * as stores from 'stores/index';
import { createRedux } from 'redux';

const redux = createRedux(stores);
const history = new BrowserHistory();
const element = (
    <Provider redux={redux}>
        {() => <Router history={history} children={routes}/> }
    </Provider>
);
Transmit.render(element, {}, document.getElementById("react-root"));

But I couldn't find the adequate place to fit Redux state when rendering sever-side.

Server.js

import {Server} from "hapi";
import React from "react";
import Router from "react-router";
import Transmit from "react-transmit";
import routes from "views/Routes";
import * as stores from "./stores/index";
import { createRedux } from "redux";

const redux = createRedux(stores);

const server = new Server();
server.connection({port: process.env.PORT || 8000});
server.start(function () {
    console.info("==> ✅  Server is listening");
    console.info("==> 🌎  Go to " + server.info.uri.toLowerCase());
});

server.route({
    method:  "*",
    path:    "/{params*}",
    handler: (request, reply) => {
        reply.file("static" + request.path);
    }
});

server.ext("onPreResponse", (request, reply) => {
    if (typeof request.response.statusCode !== "undefined") {
        return reply.continue();
    }

    Router.run(routes, request.path, (Handler, router) => {
        Transmit.renderToString(Handler).then(({reactString, reactData}) => {
            const state = redux.getState();
            let output = (
                `<!doctype html>
                <html lang="en-us">
                    <head>
                        <meta charset="utf-8">
                        <title>react-isomorphic-starterkit</title>
                        <link rel="shortcut icon" href="/favicon.ico">
                    </head>
                    <body>
                        <div id="react-root">${reactString}</div>
                    </body>
                </html>`
            );

            const webserver = process.env.NODE_ENV === "production" ? "" : "//localhost:8080";
            output = Transmit.injectIntoMarkup(output, reactData, [`${webserver}/dist/client.js`]);

            reply(output);
        }).catch((error) => {
            reply(error.stack).type("text/plain").code(500);
        });
    })
});

Any help would be really appreciated.

(Linux / piping) App won't start

Just pulled in a fresh clone and cannot get npm run watch to run correctly. I have attached npm start which is the command that appears to be failing "within" npm run watch.

npm start

> [email protected] start /home/jmfurlott/work/react-isomorphic-starterkit-master
> NODE_PATH="./src" node ./babel.server

[piping] File ..gitignore.un has changed, reloading.
[piping] File .License.un has changed, reloading.
[piping] File .README.md.un has changed, reloading.
[piping] File .index.js.un has changed, reloading.
[piping] File .package.json.un has changed, reloading.
[piping] File .StreamCache.js.un has changed, reloading.
[piping] File .test-StreamCache.js.un has changed, reloading.
events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: IPC channel is already disconnected
    at process.target.disconnect (child_process.js:510:26)
    at Worker.disconnect (cluster.js:650:13)
    at Worker.onmessage (cluster.js:541:16)
    at process.<anonymous> (cluster.js:692:8)
    at process.emit (events.js:129:20)
    at handleMessage (child_process.js:324:10)
    at Pipe.channel.onread (child_process.js:352:11)
[piping] File .History.md.un has changed, reloading.
[piping] File .Readme.md.un has changed, reloading.
[piping] File .package.json.un has changed, reloading.
[piping] File bogus.js has changed, reloading.
[piping] File .index.js.un has changed, reloading.
events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: watch ENOSPC
    at exports._errnoException (util.js:746:11)
    at FSWatcher.start (fs.js:1172:11)
    at Object.fs.watch (fs.js:1198:11)
    at createFsWatchInstance (/home/jmfurlott/work/react-isomorphic-starterkit-master/node_modules/piping/node_modules/chokidar/lib/nodefs-handler.js:24:15)
    at setFsWatchListener (/home/jmfurlott/work/react-isomorphic-starterkit-master/node_modules/piping/node_modules/chokidar/lib/nodefs-handler.js:47:19)
    at EventEmitter.NodeFsHandler._watchWithNodeFs (/home/jmfurlott/work/react-isomorphic-starterkit-master/node_modules/piping/node_modules/chokidar/lib/nodefs-handler.js:177:15)
    at EventEmitter.NodeFsHandler._handleFile (/home/jmfurlott/work/react-isomorphic-starterkit-master/node_modules/piping/node_modules/chokidar/lib/nodefs-handler.js:201:8)
    at EventEmitter.<anonymous> (/home/jmfurlott/work/react-isomorphic-starterkit-master/node_modules/piping/node_modules/chokidar/lib/nodefs-handler.js:353:12)
    at FSReqWrap.oncomplete (fs.js:95:15)

npm ERR! Linux 3.19.0-13-generic
npm ERR! argv "/home/jmfurlott/.nvm/versions/node/v0.12.2/bin/node" "/home/jmfurlott/.nvm/versions/node/v0.12.2/bin/npm" "start"
npm ERR! node v0.12.2
npm ERR! npm  v2.7.4
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `NODE_PATH="./src" node ./babel.server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'NODE_PATH="./src" node ./babel.server'.
npm ERR! This is most likely a problem with the react-isomorphic-starterkit package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     NODE_PATH="./src" node ./babel.server
npm ERR! You can get their info via:
npm ERR!     npm owner ls react-isomorphic-starterkit
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/jmfurlott/work/react-isomorphic-starterkit-master/npm-debug.log
events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: IPC channel is already disconnected
    at process.target.disconnect (child_process.js:510:26)
    at Worker.disconnect (cluster.js:650:13)
    at Worker.onmessage (cluster.js:541:16)
    at process.<anonymous> (cluster.js:692:8)
    at process.emit (events.js:129:20)
    at handleMessage (child_process.js:324:10)
    at Pipe.channel.onread (child_process.js:352:11)

(Transmit) Caching query results

Hey again,

When I reload a page with a component that does a query it does the query again every time. Is there an option or way to cache the query results?

Thanks,
Dennis

(Transmit) Nested Transmit containers and server-side rendering

When I wrap a view that is not the root view with a Transmit container, the data fetched by that container isn't being rendered into the markup in the same way the root view's data is.

Have any idea how to get this data to show up in the server-side rendering? Since we want the data that an arbitrary component depends on to be colocated with that component, it doesn't make much sense to colocate it with the root view just so it can be rendered properly by the server.

Empty response in fetch of child RouteHandler

Hello guys. I modified code a bit. And I have no success fetch in ProjectLessonsListroute in server side. With javascript enabled in browser everything is ok.
My console.log is
suxx {'0': {}} and component is not rendering at all.

_Main.js_

  render () {
    return (
      <div>
        <h1>Main</h1>
        <RouteHandler/>
      </div>
    );
  }

_Routes.js_

export default (
  <Route name="app" path="/" handler={Main}>
    <Route name="ProjectLessonsList" path='/project/lessons' handler={ProjectLessonsList}/>
  </Route>
);

_ProjectLessonsList.js_

import __fetch from "isomorphic-fetch";
import React from 'react';
import Transmit from "react-transmit";
class ProjectLessonsList extends React.Component {
  componentWillMount () {
    console.log('mounted project lessons', this.props.lessons);
  }

  render () {
    return (
      <div>
        <h1>ProjectLessonsList</h1>
      </div>
    )
  }
}

export default Transmit.createContainer(ProjectLessonsList, {
  queries: {
    lessons (queryParams) {
      return fetch('https://api.github.com/repos/RickWong/react-isomorphic-starterkit/stargazers?per_page=100&page=1')
        .then((resp) => {
          console.log('suxx', arguments);
          return resp.json();
        })
        .catch((err) => {
          console.log('err', arguments);
        });
    }
  }
});

(Webpack) Fail to load PNG (or any other) images

Not sure what I am doing something wrong, but my webpack config is pretty straight forward:

module:  { loaders: [ {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ]}

in a .js file:

let logo = require('./logo.png');

The error I am getting:

/Users/micgunnu/code/sap/routes/routes-rewrite/react-isomorphic-starterkit/node_modules/babel-core/lib/babel/transformation/file/index.js:604
      throw err;
            ^
SyntaxError: /Users/micgunnu/code/sap/routes/routes-rewrite/react-isomorphic-starterkit/src/shared/pages/logo.png: Unexpected character '�' (1:0)
> 1 | �PNG
    | ^
  2 |
  3 |

Add Babel Typecheck

https://github.com/codemix/babel-plugin-typecheck

(Node 0.10) Unable to run after initial installation steps

I get the following output from the final step of npm run watch: https://gist.github.com/bdefore/9d1570ed9c2345f201ca

It opens the browser to localhost:8000 but nothing comes up

(React Router) pushState doesn't seem to work

When updating the route to something like that:

<Route path="/" handler={Main} >
        <Route name="page1" handler={Page1}/>
        <Route name="page2" handler={Page2}/>
</Route>

The ReactRouter doesn't seem to take advantages of pushState and rewrite the full html page (reloads all the scripts attached to it).

Create a Yeoman generator

Would love to see this in a yeoman generator!

Bring back react-a11y

https://github.com/rackt/react-a11y found new maintainers and is updated to support React 0.13+.

Authentication / Session management with isomorfism

Hello!

Has anybody done authentication with this? I was hoping to use hapi-auth-cookie and maybe hapi-bell for user logins, but its not really clear how to handle cookies with serverside rendering and client side rendering. Any pointers to how to do it would be appreciated.
/K

It doesn't work offline

Thanks for this great project.

It would be awesome if it also would work without the remote stargazers data.

(Node 0.10) Error running in Ubuntu docker container

It's probably just me being too stupid (no real node experience), but I cannot get it running in a minimal docker container. Dockerfile:

FROM ubuntu:14.10

# make sure apt is up to date
RUN apt-get update

# install nodejs and npm
RUN apt-get install -y nodejs npm git git-core

# install react-isomorphic-starterkit
RUN git clone https://github.com/RickWong/react-isomorphic-starterkit.git
RUN cd react-isomorphic-starterkit && npm install -g supervisor webpack webpack-dev-server
RUN cd react-isomorphic-starterkit && npm install

build container, run with:
docker run -i -t -p 8000:8000 react_isomorphic/kutzi /bin/bash

cd react-isomorphic-starterkit/ && npm run watch
=>

> eval 'npm run watch-server >tmp/server.log 2>&1 & SERVER_PID=$!';      eval 'npm run watch-client >tmp/client.log 2>&1 & CLIENT_PID=$!';     sleep 5;    npm run start;     kill $CLIENT_PID $SERVER_PID;


> [email protected] start /react-isomorphic-starterkit
> eval 'supervisor dist/server >tmp/supervisor.log 2>&1 & SUPERVISOR_PID=$!';     sleep 1;      open http://localhost:8000;       tail -f tmp/*.log;     kill $SUPERVISOR_PID;

Couldn't get a file descriptor referring to the console
==> tmp/client.log <==
npm ERR! npm -v 1.4.21
npm ERR! code ELIFECYCLE
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /react-isomorphic-starterkit/npm-debug.log
npm ERR! not ok code 0

==> tmp/server.log <==
npm ERR! npm -v 1.4.21
npm ERR! code ELIFECYCLE
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /react-isomorphic-starterkit/npm-debug.log
npm ERR! not ok code 0

==> tmp/supervisor.log <==
/usr/bin/env: node: No such file or directory

There's more info in the npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'watch-client' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prewatch-client', 'watch-client', 'postwatch-client' ]
5 info prewatch-client [email protected]
6 info watch-client [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec watch-client script
9 error [email protected] watch-client: `webpack -cv --display-error-details --config webpack.client-watch.js && webpack-dev-server --config webpack.client-watch.js`
9 error Exit status 127
10 error Failed at the [email protected] watch-client script.
10 error This is most likely a problem with the react-isomorphic-starterkit package,
10 error not with npm itself.
10 error Tell the author that this fails on your system:
10 error     webpack -cv --display-error-details --config webpack.client-watch.js && webpack-dev-server --config webpack.client-watch.js
10 error You can get their info via:
10 error     npm owner ls react-isomorphic-starterkit
10 error There is likely additional logging output above.
11 error System Linux 3.13.0-24-generic
12 error command "/usr/bin/nodejs" "/usr/bin/npm" "run" "watch-client"
13 error cwd /react-isomorphic-starterkit
14 error node -v v0.10.25
15 error npm -v 1.4.21
16 error code ELIFECYCLE
17 verbose exit [ 1, true ]

Too many stargazers: implement GitHub API pagination

So that ALL stargazers are shown in the example again.

No server errors shown in the console

For example, use an undefined variable in a Hapi route. There is no error output to the console. You won't know anything is wrong until your app hits that route and then Hapi just logs that the route can't be found.

It would be beneficial if this worked the same as it does with client side scripts where errors are spit out in the console on saving files.

node_path & windows

running in windows npm run watch

I get ...

Error occured when executing command: start'
Error: spawn 'npm ENOENT
at exports._errnoException (util.js:746:11)
at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
at child_process.js:1144:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3

I think it has something to do with how NODE_PATH is set in package.json

hapi view engine suggestion?

Has there been any consideration in using Hapi React Views (https://github.com/jedireza/hapi-react-views) as the hapi view engine to render .jsx?

Or would that interfere with React Router?

I think this line
Transmit.renderToString(Handler).
would no longer be necessary with hapi-react-views?

ES6 modules!

The goal for ECMAScript 6 modules was to create a format that both users of CommonJS and of AMD are happy with:

Similar to CommonJS, they have a compact syntax, a preference for single exports and support for cyclic dependencies.
Similar to AMD, they have direct support for asynchronous loading and configurable module loading.
Being built into the language allows ES6 modules to go beyond CommonJS and AMD (details are explained later):

Their syntax is even more compact than CommonJS’s.
Their structure can be statically analyzed (for static checking, optimization, etc.).
Their support for cyclic dependencies is better than CommonJS’s.
The ES6 module standard has two parts:

Declarative syntax (for importing and exporting)
Programmatic loader API: to configure how modules are loaded and to conditionally load modules

so, is it possible to use ES6 modules with this starter kit? it will be awesome, thanks man.

Use React ES6 classes

Replace React.createClass() calls with proper ES6 classes. Possibly include: https://github.com/philplckthun/react-compat-component/

Can't seem to get app to start on Heroku

The Supervisor configuration doesn't seem to play nice with Heroku.

Starter kit is not starting

Node version: v0.12.4, MacOS 10.10.4
Git clone, npm install, npm run watch ->

> [email protected] watch /pathto/www/exlab/react-isomorphic
> node ./node_modules/concurrently/src/main.js --kill-others "npm run watch-client" "npm run start"

[0] 
[0] > [email protected] watch-client /pathto/www/exlab/react-isomorphic
[0] > node ./node_modules/webpack/bin/webpack.js --verbose --colors --display-error-details --config webpack.client-watch.js && node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.client-watch.js
[0] 
[1] 
[1] > [email protected] start /pathto/www/exlab/react-isomorphic
[1] > NODE_PATH="./src" node ./babel.server
[1] 
[0] Hash: 49f3a29840af95b8608f
[0] Version: webpack 1.10.1
[0] Time: 803ms
[0]    [0] multi main 52 bytes {0} [built] [1 error]
[0]     + 58 hidden modules
[0] 
[0] ERROR in ./src/client.js
[0] Module build failed: Error: /pathto/www/exlab/react-isomorphic/src/client.js: attachComments needs range information
[0]     at Object.attachComments (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/node_modules/estraverse/estraverse.js:741:19)
[0]     at Object.exports.default (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/helpers/parse.js:80:27)
[0]     at File.parse (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/transformation/file/index.js:549:40)
[0]     at File.parseCode (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/transformation/file/index.js:658:20)
[0]     at /pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/transformation/pipeline.js:167:12
[0]     at File.wrap (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/transformation/file/index.js:614:16)
[0]     at Pipeline.transform (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/transformation/pipeline.js:165:17)
[0]     at transpile (/pathto/www/exlab/react-isomorphic/node_modules/babel-loader/index.js:12:22)
[0]     at Object.module.exports (/pathto/www/exlab/react-isomorphic/node_modules/babel-loader/index.js:69:12)
[0]  @ multi main
[1] [piping] can't execute file: /pathto/www/exlab/react-isomorphic/babel.server.js
[1] [piping] error given was: Error: /pathto/www/exlab/react-isomorphic/src/server.js: attachComments needs range information
[1]     at Object.attachComments (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/node_modules/estraverse/estraverse.js:741:19)
[1]     at Object.exports.default (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/helpers/parse.js:80:27)
[1]     at File.parse (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/transformation/file/index.js:549:40)
[1]     at File.parseCode (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/transformation/file/index.js:658:20)
[1]     at /pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/transformation/pipeline.js:167:12
[1]     at File.wrap (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/transformation/file/index.js:614:16)
[1]     at Pipeline.transform (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/transformation/pipeline.js:165:17)
[1]     at Object.transformFileSync (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/api/node.js:133:37)
[1]     at compile (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/api/register/node.js:132:20)
[1]     at normalLoader (/pathto/www/exlab/react-isomorphic/node_modules/babel-core/lib/api/register/node.js:199:14)
[1] [piping] further repeats of this error will be suppressed...
[0] http://0.0.0.0:8080/
[0] webpack result is served from http://localhost:8080/dist/
[0] content is served from ./static

Im having issues , in windows

Is there windows support, or it just me ?

(Transmit) How do populate transmit differently for client and server.

First off, this is amazing. I've been playing with it and I've run into a problem that I cannot find the solution for. Let's say I want to load data via an AJAX call on the client, but on the server I want to hit the database. How would I take different actions? Now, if I check for the _CLIENT / _SERVER globals, that works, but when webpacked all the server code gets shipped to the user.

Is there a way to control this?

Here is a very basis example of what I'd like to do.

class Person extends React.Component {
    render () {
        return (
            <div>{this.props.person.name}</div>
        );
    }
}

export default Transmit.createContainer(Person, {
    queries: {
        person (queryParams) {
          //If server, load from the database
          //If client, load from ajax call
        }
    }
});

(Webpack) Replace piping with Webpack HMR

Discussion started here: #36 (comment) with @ericfong

The idea is to bring back webpack.server.js (watch & production builds) and use Webpack's Hot Module Reload mechanism for watching changes on the server-side. If it's faster then it will be a more consistent and widely supported replacement for piping.

npm 2.x should mean we don't need the -g installs anymore

The npm install -g supervisor webpack webpack-dev-server concurrently install command should, with node 12 and npm 2.5+, now simply be a matter of having those four dependencies marked as dependencies, with npm install making those commands available when run from the project's directory. Additionally, github does release tags, so you don't need to clone a repo just to use it when it's a standalone project like this one. It simply makes a .zip/tar file available for people to grab without even needing git. Superhandy.

(Transmit/Routing) this.props.setQueryParams must be called in componentWillMount or routing does not work properly...

In Main.js componentWillMount() method in the if(__CLIENT__) { } block if you take out the additional call to this.props.setQueryParams({...etc}) routes do not behave properly.

Server-side React render was discarded

I'm getting these messages on the console, and sometimes the debugger pauses rendering. Didn't make any changes to the code.

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) morphic-starterkit" id="a11y-3" data-rea
 (server) morphic-starterkit" data-reactid=".1fjie

Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.

(Transmit) Only server side rendering when no queries in the Transmit container

import __fetch from "isomorphic-fetch";
import React from "react";
import {Link} from "react-router";
import Transmit from "react-transmit";
import DocumentTitle from "react-document-title";

import Header from "./Header";

class Main extends React.Component {

    componentWillMount () {
        if (__SERVER__) {

        }

        if (__CLIENT__) {

        }
    }

    render () {
        return (
            <div>
                <span>Hallo!</span>
            </div>
        );
    }
}

export default Transmit.createContainer(Main, {
    queries: {
        config (queryParams) {
            return fetch("/config.json").then((response) => response.json());
        }
    }
});

This doesn't render the component server side.

import __fetch from "isomorphic-fetch";
import React from "react";
import {Link} from "react-router";
import Transmit from "react-transmit";
import DocumentTitle from "react-document-title";

import Header from "./Header";

class Main extends React.Component {

    componentWillMount () {
        if (__SERVER__) {

        }

        if (__CLIENT__) {

        }
    }

    render () {
        return (
            <div>
                <span>Hallo!</span>
            </div>
        );
    }
}

export default Transmit.createContainer(Main, {});

This does. Anybody know what the problem is here?

Also the

window.__reactTransmitPacket={}

is empty, and I think that should be filled with the contents of config.json?

(React Router) Routes work only once

Hi!
I am new to react and trying to figure out with this project, and stucked with a problem when add new route it can be viewed only once.

so added files and new route https://gist.github.com/hunterman/1f46436face225b25425 and then I can transit to any page only once after page loaded, after that page is not rerendering, but only pushState works.

Module build failed: Error

OSX 10.10.3, Node v0.12.7 - Cloned the repo, ran npm install and npm run watch:

0] ERROR in ./src/client.js
[0] Module build failed: Error: /Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/src/client.js: attachComments needs range information
[0]     at Object.attachComments (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/node_modules/estraverse/estraverse.js:741:19)
[0]     at Object.exports.default (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/helpers/parse.js:80:27)
[0]     at File.parse (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/transformation/file/index.js:549:40)
[0]     at File.parseCode (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/transformation/file/index.js:658:20)
[0]     at /Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/transformation/pipeline.js:167:12
[0]     at File.wrap (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/transformation/file/index.js:614:16)
[0]     at Pipeline.transform (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/transformation/pipeline.js:165:17)
[0]     at transpile (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-loader/index.js:12:22)
[0]     at Object.module.exports (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-loader/index.js:69:12)
[0]  @ multi main
[1] [piping] can't execute file: /Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/babel.server.js
[1] [piping] error given was: Error: /Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/src/server.js: attachComments needs range information
[1]     at Object.attachComments (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/node_modules/estraverse/estraverse.js:741:19)
[1]     at Object.exports.default (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/helpers/parse.js:80:27)
[1]     at File.parse (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/transformation/file/index.js:549:40)
[1]     at File.parseCode (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/transformation/file/index.js:658:20)
[1]     at /Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/transformation/pipeline.js:167:12
[1]     at File.wrap (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/transformation/file/index.js:614:16)
[1]     at Pipeline.transform (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/transformation/pipeline.js:165:17)
[1]     at Object.transformFileSync (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/api/node.js:133:37)
[1]     at compile (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/api/register/node.js:132:20)
[1]     at normalLoader (/Users/UserName/Documents/Development/repos/react-isomorphic-starterkit/node_modules/babel-core/lib/api/register/node.js:199:14)
[1] [piping] further repeats of this error will be suppressed...

Fails out of the box running in docker container

I am running the starterkit inside a ubuntu based docker container started using vagrant and I get the following error when running 'npm run watch'. Everything up until then is fine. I have a forwarded my port 8084 on my host to 8080 and can see the dist folder when I navigate to localhost:8084. I also tried navigating to http://localhost:8084/webpack-dev-server and can see the text 'client.js' and
'client (magic html for client.js) (webpack-dev-server)' text on the page . How should I be able to access the client app?

concurrent --kill-others 'npm run watch-client' 'npm run browser'

[0]
[0] > [email protected] watch-client /vagrant
[0] > webpack --verbose --colors --display-error-details --config webpack.client-watch.js && webpack-dev-server --config webpack.client-watch.js
[0]
[0]
[1]
[1] > [email protected] browser /vagrant
[1] > sleep 2; concurrent 'npm run start' 'npm run localhost'
[1]
[1]
[1] [0]
[1] [0] > [email protected] start /vagrant
[1] [0] > NODE_PATH="./src" node ./babel.server
[1] [0]
[1] [0]
[1]
[1] [1]
[1] [1] > [email protected] localhost /vagrant
[1] [1] > sleep 1; which open && open http://localhost:8000
[1] [1]
[1] [1]
[1]
[0] Hash: 7e88b7dd75215e30070f
[0] Version: webpack 1.8.10
[0] Time: 4193ms
[0] Asset Size Chunks Chunk Names
[0] client.js 1.06 MB 0 [emitted] main
[0] [0] multi main 52 bytes {0} [built]
[0] + 288 hidden modules
[0]
[1] [1] /bin/open
[1] [1]
[1]
[1] [1] Couldn't get a file descriptor referring to the console
[1] [1]
[1]
[1] [1]
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1] Linux 3.13.0-49-generic
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1]
[1]
[1] [1] argv
[1]
[1] [1] "/usr/local/bin/node" "/usr/local/bin/npm" "run" "localhost"
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1]
[1]
[1] [1] node
[1]
[1] [1] v0.12.2
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1] v2.7.4
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1]
[1]
[1] [1] code
[1]
[1] [1] ELIFECYCLE
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1] [email protected] localhost: sleep 1; which open && open http://localhost:8000
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1] Exit status 1
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1]
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1] Failed at the [email protected] localhost script 'sleep 1; which open && open http://localhost:8000'.
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1] This is most likely a problem with the react-isomorphic-starterkit package,
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1] not with npm itself.
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1] Tell the author that this fails on your system:
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1] sleep 1; which open && open http://localhost:8000
[1] [1]
[1]
[1] [1] npm
[1] [1]
[1] [1] ERR! You can get their info via:
[1] [1] npm ERR! npm owner ls react-isomorphic-starterkit
[1] [1] npm ERR! There is likely additional logging output above.
[1] [1]
[1]
[1] [1]
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1] Please include the following file with any support request:
[1] [1]
[1]
[1] [1] npm
[1]
[1] [1]
[1]
[1] [1] ERR!
[1]
[1] [1] /vagrant/npm-debug.log
[1] [1]
[1]
[1] [1] npm run localhost exited with code 1
[1]
[0] http://0.0.0.0:8080/webpack-dev-server/
[0]
[0] webpack result is served from http://localhost:8080/dist/
[0]
[0] content is served from ./static

React 0.13 support

Probably need to ditch react-a11y until it supports React 0.13.

Flux?

This starter kit should probably have an opinion on how data is fetched and stored. Flux is a great pattern to adopt.

Add Redux?

I've been following the Redux project a bit, and it seems that people really like it as well.

Might be smart to hold this off until their API stabilizes some more.

(Transmit) Using RoutHandler...

How does this work with RouteHandler? I am running into issues where the DefaultRoute is a Transmit.Container and contains the <RouteHandler /> component. When a route changes with a <Link /> the page goes blank and replaces the inside of the <Router> tag with an <undefinedContainer> tag

Add .editorconfig file

See RickWong/react-transmit#29

Noob routing issue

Forgive me because this is my first attempt at doing anything practical with ES6, React, and Webpack.

It seems views/Routes.js includes views/Main.js, which is fine. As soon as you want to have multiple views, you would have Routes.js include these views. No problem.

Since these views are imported initially (forgive me if this is not how ES6 importing works), the Routes export is not available until after import.

How would you be able to reference Links to different Routes (as per react-router) if you need to parse the imports before the Routes are defined?

I guess an example with more than one route would be pretty practical...

(Transmit) React router not passing QueryParams to Transmit?

I hope Im overlooking something simple I feel like this should be straight forward. I have some react router routes

import React from "react";
import {Route, DefaultRoute} from "react-router";
import Main from "views/Main";
import Connect from "views/Connect";

export default (
  <Route path="/">
    <DefaultRoute handler={Main} />
    <Route path="/connect/:id" handler={Connect}/>
  </Route>
);

I then have Connect handler

import React from "react";
import Transmit from "react-transmit";
import { Navbar,Button } from "react-bootstrap";
import Promise from "bluebird";

const request = require('superagent-promise')(require('superagent'), Promise);

class Connect extends React.Component {

  render (){
    return (
      <div>
        <Navbar></Navbar>
          <form>
            <input type="text" />
          </form>
      </div>
    )
  }

}

export default Transmit.createContainer(Connect, {
  queries: {
      test (queryParams){
        console.log("wtf queryParams*****", queryParams, this);
      }
  }
});

queryParams is always empty in the test function. I was hoping to pull :id from the react router route to pass in to one of the Transmit queries