Server / middleware libraries to consider if you're using Node.js on the server:

• Express
  
  
• koa
  
  
• hapi
  
  

Approaches to consider when you don't use Node.js:

• For each incoming HTTP request run the server-side bundle via Google's V8 egnine, then send the resulting string to the client.

You already have components, why would you want to mix templating engines??

What do you think about removing Bootstrap CSS from this template? In favor of some custom minimum basic styles.

http://visualstudiogallery.msdn.microsoft.com/d65d6b29-6dd7-4100-81b1-609e5afce356

I've been playing around with your starter kit, which I really like--thank you--but I ran into a snag when trying to serve the app from a subdirectory on my webserver. Essentially, what I did was:

//  build app as per your README
cp -a build ~/public_html/MyApp
//  point browser at  http://webserver/~username/MyApp

and several things don't seem to work.

First, there seems to be a built-in assumption that the app is rooted at /, such that the browser can't find /images/logo-small.png and the Links at the bottom of the page to / and /privacy don't work.

Second, javascript, at least to some extent, doesn't seem to be running.

An easy way to reproduce is as follows. Add the following line somewhere in the render() function of Index.jsx

<button onClick={function() { console.log("test")}}>Test</button>

and build the app as usual (gulp build).

To see a working version (clicking button prints "test" to console):

cd build
python -m SimpleHTTPServer
//  point browser at  http://localhost:8000/

To see the broken setup (nothing shows up in console):

cd ..     // i.e., go back to top level MyApp directory
python -m SimpleHTTPServer
//  point browser at  http://localhost:8000/build/

Note that although I happened to use a button in this example. Even just adding a console.log() call to the beginning of the render() function (before the return) doesn't show anything on page load when the URL has /build/ in it.

Thanks again.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Eslint supports JSX and some ES6 features. That will allow you to get rid of all those /* jshint ignore:start */.

Note that right now ES6 imports are not yet implemented by eslint, but they should be coming soon.

I guess .jsx extension itself already implies that the file is JSX flavor of JavaScript, so should we keep or remove these pragma comments?

6to5 handles JSX just fine, but it also gives a lot more ES6 features.

Whenever an error happens in the following line (invalid syntax in react files, missing requires etc.), it stops gulp from running:
.pipe($.if('*.jsx', $.render({template: './src/pages/_template.html'})))

It would be nice to stop it and then try again on next change. Tried it with a continuation of .on('error', errorHandler) but that didn't work.

Otherwise thank you very much for this great template!

I've run into a small issue that could easily confuse others when building upon this starter kit.

The render functions in your React components have been written using the double-arrow syntax:

var HomePage = React.createClass({
  render: () => {
      // ...
  }

Which webpack converts into a bind syntax, as it should:

var HomePage = React.createClass({
  render: function() {
      // ...
  }.bind(this)

Normally this is what one would desire. However, in the case of React components, it would seem that an explicit binding of the render function to the current object is not correct (the Facebook docs never do so in their example components), and ends up giving you an empty context in the resulting this if you decide to extend the component with state or other properties:

var HomePage = React.createClass({
  getInitialState: ()=> {
    return {foo: 'bar'};
  },
  render: ()=> {
    return (
      <div>{this.state.foo}</div>
    );
  }

In the above example, the state will be an empty object when rendering; but if I change the code to use a normal function declaration without explicit binding, it works correctly:

var HomePage = React.createClass({
  getInitialState: function() {
    return {foo: 'bar'};
  },
  render: function() {
    return (
      <div>{this.state.foo}</div>
    );
  }

Is there another rationale for using the "()=>" syntax that I'm missing, or am I right to believe that this is not the correct practice for React components?

npm uninstall karma karma-* --save-dev

Remove config/karma.js
Move ./src/components/NavbarSpec.js to ./src/components/__test__/Navbar-test.js
update package.json: test: "jshint && jest"

What would be the best way to add assets versioning to this? Both for css and javascript.

Relay by Facebook + examples

redux by Dan Abramov

flux by Facebook + examples

alt by Josh Perez + examples

reflux by Mikael Brassman + examples

flummox (deprecated) by Andrew Clark

fluxible by Yahoo

fluxxor by Brandon Tilley + examples

marty.js by James Hollingworth + examples

fynx by Alan Plum

McFly by Ken Wheeler + example

DeLorean.js by Fatih Kadir Akın + examples

fluxify by Javier Márquez

Comparison: https://github.com/voronianski/flux-comparison

It seems like the 404.html page is never used. If I enter a dummy URL it will just 404 on the server instead.

I thought I'd take it for a spin but following the error pops up on any gulp command (Ubuntu 14.04 - clean install, npm 1.4.9, bower 1.3.5, gulp 3.8.0, node v0.10.28).

You need a comma at the end of line 25.

/MyApp/config/webpack.config.js:26
new webpack.optimize.DedupePlugin(),
^^^
SyntaxError: Unexpected token new
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/home/todd/nutviz/MyApp/gulpfile.js:21:24)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)

I tried the TextBox component in forms folder which lead to a compile error.

https://github.com/kriasoft/react-starter-kit/blob/master/src/components/forms/TextBox.js#L11

Could wu import .less in this way?

Error msg

{ [Error: Parse Error: Line 1: Unexpected token .]
  index: 0,
  lineNumber: 1,
  column: 1,
  description: 'Unexpected token .',
  name: 'Error',
  message: 'Parse Error: Line 1: Unexpected token .',
  stack: 'Error: Line 1: Unexpected token .\n    at throwError (/Users/lizhiye/dev/tmp/react-starter-kit/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2644:21)\n        ........(tl;tr)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-render' }

The stack is too long and I omit some information above.

I see the gulpfile.js and webpack's config file, it doesn't seem that webpack will property handle jsx code because those file's extension is '.js' not '.jsx'
I try to run or debug to know how it works, but don't saw a clue

Except that gulpfile has code that change the node's require behavior to transform jsx and ES6 code first

My question is:
Will webpack use node's require() to transform jsx/ES6 code?
It seems that webpack don't have this kinds of behavior
Or did I missed something?

Thanks 👍

./src/index.html -> ./src/pages/index.html
./src/404.html -> ./src/pages/404.html

And update build logic for these pages in gulpfile.js

I'm new to Webpack, but shouldn't this be mimetype rather than minetype?

https://github.com/kriasoft/React-Seed/blob/master/config/webpack.config.js#L55

On a new machine, with a new installation of node, npm install fails with this error:

npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.10.32
npm ERR! npm  v2.0.0
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package webpack does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.2.0-beta5
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.3.0

After running npm install webpack, npm install works fine.

Hello! Im just using this project and have a issue - styles from modules not loading to page
I'm tried to change this file https://github.com/kriasoft/react-starter-kit/blob/master/src/components/App/App.less:

.App {
  background-color: red !important;
}

.. but after reloading nothing happens (no style elements in DOM, no style attachet to div). If i change files from this directory https://github.com/kriasoft/react-starter-kit/tree/master/src/styles - everything works perfect.

How do you feel about using react-router instead of a custom basic routing approach? It seems to be getting super popular and the fact that it's build for react makes me like it a lot more anyways

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Hello,

I'm building a single page application which has only 1 component/page. I'd like to redirect all uri's to this "Index" component, instead of having the 404 page showing up for invalid routes. Is that possible ? I tried putting regular expressions inside routes in the app.js but it doesn't seem to work.

Thanks !

Browserify

Who's using React.js with Browserify?

• KhanAcademy.org
• AirBnb.com
• SoundCloud.com

Webpack

Who's using React.js with Webpack?

• Instagram.com

Good Read

• Browserify for Webpack users
• Browserify Handbook
• Webpack How-to

As of React 0.12, it is recommended to use the .jsx file extension rather than the pragma in .js files.

This will also help with editors doing syntax highlighting & linting.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

When I change any content/*.jade file the old content is served until gulp server restart.

Steps to reproduce:

1. Run gulp

2. Change src/content/index.jade somehow (Eg: add some characters to any header)

3. Notice there is

   [22:23:00] Starting 'assets'...
   [22:23:00] 'assets' all files 1.03 kB
   [22:23:00] Finished 'assets' after 31 ms
   [QC] File changed: build/content/index.jade
   

4. Check that build/content/index.jade actually changed

Expected result: the rendered view in the browser should change

Actual result: it does not. Even refreshing the page does not help

PS: Both http://localhost:5000/ and http://localhost:3000/ show the old content

The same is reproducible with gulp serve. And running an rs command (or a complete nodemon server restart) followed by a page refresh actually leads to the updated contents.

Meanwhile changing styles works as expected (in both cases: with serve and live reload)

Summary: everything from styles is updated fine, content and templates are not updated though.

Reproducible in both v0.3.0 and current master b9b42223d568

Any ideas on why it could be like that?

For example:

App.jsx

var React = require('react');

if (__DEBUG__) {
   window.React = React;
}

And make sure Webpack will strip this string off during a build in release mode.

For example:

var React = require('react');

var SomePage = React.createClass({
  statics: {
    layout: require('../layouts/DefaultLayout.jsx');
  },
  render() {
    // render logic
  }
});

module.exports = SomePage;

OR

var React = require('react');

var SomePage = React.createClass({
  render() {
    // render logic
  }
});

SomePage.layout = require('../layouts/DefaultLayout.jsx');

module.exports = SomePage;

Hello,

Im using this starter kit for our projects, but we have to modify the current gulpfile and split into files per task in a gulp/ directory for better understanding of build processes as we have modify some of them (we use modernizr, semantic-ui, sass ..)

How do you feel about switching to that model instead of a single file.

The structure would be

gulpfile.js
gulp/index.js
gulp/config.js
gulp/tasks/
gulp/util/errorHandling.js

I'm trying to test the PageStore which is included by default in this project:

jest.dontMock('../PageStore');
jest.dontMock('object-assign');

describe('PageStore', function() {

  var Dispatcher;
  var PageStore;

  var callback;

  beforeEach(function() {
    Dispatcher = require('../../core/Dispatcher');
    PageStore = require('../PageStore');
    callback = Dispatcher.register.mock.calls[0][0];
  });

  it('returns default page', function() {
    expect(PageStore.get()).toBe({
      title: 'React.js Starter Kit',
      description: 'A skeleton for an isomorphic web application (SPA) built with React.js and Flux',
      keywords: null
    });
  });
});

however, I always get this error:

 FAIL  stores/__tests__/PageStore-test.js (0.313s)
● PageStore › it returns current page
  - TypeError: Object [object Object] has no method 'get'
        at Spec.<anonymous> (/Users/manhhavu/Developer/experiments/shopizie-kart/src/stores/__tests__/PageStore-test.js:25:22)
        at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)

I doubt that there is something wrong with the ES6 compilation configured for Jest, because the constructor of Store never get called by Jest. Could you give me some clue to make it work?

vagrant@vagrant-ubuntu-trusty-64:~/src/react-starter-kit$ gulp
[21:49:29] Using gulpfile ~/src/react-starter-kit/gulpfile.js
[21:49:29] Starting 'serve'...
[21:49:29] Starting 'clean'...
[21:49:29] Finished 'clean' after 16 ms
[21:49:29] Starting 'build'...
[21:49:29] Starting 'vendor'...
[21:49:29] Starting 'assets'...
[21:49:29] Starting 'styles'...
[21:49:29] 'styles' errored after 7.35 ms
[21:49:29] Error: Cannot find module 'readable-stream/transform'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/home/vagrant/src/react-starter-kit/node_modules/gulp-plumber/node_modules/through2/through2.js:1:79)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
[21:49:29] 'build' errored after 78 ms
[21:49:29] Error: [object Object]
    at formatError (/usr/lib/node_modules/gulp/bin/gulp.js:169:10)
    at Gulp.<anonymous> (/usr/lib/node_modules/gulp/bin/gulp.js:195:15)
    at Gulp.emit (events.js:117:20)
    at Gulp.Orchestrator._emitTaskDone (/home/vagrant/src/react-starter-kit/node_modules/gulp/node_modules/orchestrator/index.js:264:8)
    at /home/vagrant/src/react-starter-kit/node_modules/gulp/node_modules/orchestrator/index.js:275:23
    at finish (/home/vagrant/src/react-starter-kit/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
    at cb (/home/vagrant/src/react-starter-kit/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:29:3)
    at finish (/home/vagrant/src/react-starter-kit/node_modules/run-sequence/index.js:48:5)
    at Gulp.onError (/home/vagrant/src/react-starter-kit/node_modules/run-sequence/index.js:55:4)
    at Gulp.emit (events.js:117:20)
[21:49:30] nodemon v1.3.6
[21:49:30] nodemon to restart at any time, enter `rs`
[21:49:30] nodemon watching: /home/vagrant/src/react-starter-kit/build/server.js

[21:49:30] nodemon starting `node build/server.js`
[21:49:30] Finished 'serve' after 219 ms
[21:49:30] Finished 'vendor' after 187 ms
[21:49:30] 'assets' all files 133.07 kB
[21:49:30] Finished 'assets' after 198 ms

module.js:340
    throw err;
          ^
Error: Cannot find module '/home/vagrant/src/react-starter-kit/build/server.js'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3
[21:49:30] nodemon crashed
[21:49:30] nodemon app crashed - waiting for file changes before starting...

It's npm v1.4.28 and nodejs v0.10.33 installed.

Other environment details: just a clean instance of ubuntu trusty with just nodejs and npm installed

Upgrading npm to v2.5.0 fixed it though

There could be typos or inaccuracies.

https://github.com/kriasoft/React-Seed/edit/master/README.md

Where to put major components (the ones bound to URLs)

1. Inside the /src/components folder (e.g. /src/components/issues.jsx) - better for small projects
2. Inside the /src/pages folder (e.g. /src/pages/issues.jsx, /src/pages/questions.jsx) - might be better for small projects
3. A separate folder for each major component (e.g. /src/issues/index.jsx, /src/issues/new/index.jsx) - might be better for medium-size projects
4. A separate folder for each section (area) of the site (e.g. /src/account/login.jsx, /src/account/profile.jsx, /src/account/settings.jsx)

Where to put unit test files

1. test folder in project's root (e.g. /test/components/navbar-test.js)
2. test folder in each source folder (e.g. /src/components/test/navbar-test.js)
3. Unit test within the same folder with a component (e.g. /src/components/navbar-test.js)
4. Should it be test or __test__ folder (see React source code)

@koistya:

Kent,

What do you think about this directory layout (assuming it's a github.com application):

/src/issues/index.js - the main component bound to the /{repo}/issues URL
/src/issues/index-test.js - unit tests for it
/src/issues/index.less - CSS styles for the page
/src/issues/new.js - the component bound to the /{repo}/issues/new URL
/src/issues/new-test.js - unit tests for it
/src/issues/new.less - CSS styles for the page

Though, this kind of layout might be too advanced for a starter kit project..

@kentcdodds:

I am in the process of rewriting my website from angular to react. You can look at my gulpfile for an example ofa jest configuration that would support that file structure: https://github.com/kentcdodds/kentcdodds.github.io/tree/dev

You can also see how my stylus is setup as well.

As far as your recommended file structure, I think I like it. The one issue I would have is what if you decided to have a state below /new? In that case, you'd need to have a folder for that state, so I would change it like so:

/src/issues/index.js - the main component bound to the /{repo}/issues URL
/src/issues/index-test.js - unit tests for it
/src/issues/index.less - CSS styles for the page
/src/issues/new/index.js - the component bound to the /{repo}/issues/new URL
/src/issues/new/index-test.js - unit tests for it
/src/issues/new/index.less - CSS styles for the page

For testing purposes, you may also want a -mock.js file for some components where that makes sense.

Also, as far as components go, I would say that you want the component files to be as close to where they are used as possible.

Do, if a component is specific to /new, then it would be in that directory, however, if it's shared between /new and /edit, I would put it in the nearest common parent directory (like /issues). Then if there's a component that's shared with everything, then it would go in /src

You may want to make a components folder to hold those kinds of components (so there'd be one in /new, /issues, and /src in that precious example).

Let me know what you think. I've never built a big application in react, so this is loosely based on my experience with angular. I think it's sound though.

@koistya:

Yeah, having tests along-side to code under test sounds very appealing to me as well. Having a folder for each page of the site on the other hand may lead to too many folders, nesting.. I usually prefer to avoid too deeply nested folders.

@kentcdodds:

I agree with avoiding nesting folders too deeply. I don't see a problem with new.js for /new. If you needed to add a sub-state for that, it wouldn't be too difficult to move things around for it. But I think that the file structure should reflect the routes in some reasonable way. This makes the repository easier to reason about.

@koistya:

Yeah, totally agree. One thing which I'm trying to solve is to how to place these URL-bound folders to other stuff like /stores, /actions, /constants and other JavaScript folders... should they have the same parent folder.. maybe not

@kentcdodds:

Good question... I like something like this:

src

• bower_components
• non_bower_components
• app (not sold on this name, in angular I'd name it "components" but in react that has a different meaning)
  • stores
  • actions
  • constants
  • components
    • issues
      • index.js
      • new.js
    • repos
      • index.js

etc.

Though, I'm starting to wonder if maybe the stores/actions/constants are specific to a feature (like issues) then maybe it should exist in that folder. I like to keep things grouped together to the point that you could almost think of that folder as an entry point to a npm module. So, if that folder has any dependencies outside of itself, it's because some other folder depends on it as well. Does that make sense? I like to keep things as close to where they're used as possible.

@koistya:

inside /src folder you have front-end code inside the /app folder and server-side code in /src/server or something like that? From what I see (yeoman templates) they either use /src or /app folder for the web application code.. the difference is if your app can be launched from the same folder, it's usually called /app and if you app can be launched only from the /build folder then source code is usually placed into /src.

@kentcdodds:

Sorry, no, everything from the /src folder down is client-side code, as yours is currently.

@koistya:

Then why to use /app inside /src ? maybe /app in the root level, or having your code in /src would do a better job (less nesting)? I personally prefer putting bower_components, node_modules outside the source folder... at this moment i don't even use bower, because everything I need is on NPM, and browserify or webpack bundles the source code along with 3rd party dependencies into custom bundles (./build/app.js), the bower_components folder is never deployed to a server.

@koistya mind giving an example of how to setup an auth flow with the current setup?
One of the biggest perks of switching to react-router is the out of box support for auth by using nested routes. thanks! ref #21

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

http://gaearon.github.io/react-hot-loader/

maybe to use plumber on pages too?

steps:

1. run gulp
2. make an error with one of the pags

gulp watch throw

[22:34:33] Using gulpfile ~/Documents/dev/react-take5/gulpfile.js
[22:34:33] Starting 'serve'...
[22:34:33] Starting 'clean'...
[22:34:33] Finished 'clean' after 6.16 ms
[22:34:33] Starting 'build'...
[22:34:33] Starting 'vendor'...
[22:34:33] Starting 'assets'...
[22:34:33] Starting 'images'...
[22:34:34] Starting 'pages'...
[22:34:34] Starting 'styles'...
[22:34:35] Starting 'bundle'...
[22:34:35] Beautifying index.html
[22:34:35] Beautifying privacy.html
[22:34:35] Beautifying 404.html
[22:34:37] 'styles' all files 135.82 kB
[22:34:37] Finished 'styles' after 2.32 s
[22:34:37] 'pages' all files 12.66 kB
[22:34:37] Finished 'pages' after 2.58 s
[22:34:37] gulp-imagemin: Minified 2 images (saved 1.29 kB - 13.4%)
[22:34:37] Finished 'vendor' after 3.73 s
[22:34:37] 'images' all files 8.35 kB
[22:34:37] Finished 'images' after 3.67 s
[22:34:39] 'assets' all files 125.13 kB
[22:34:39] Finished 'assets' after 5.61 s
[22:34:39] Finished 'bundle' after 4.28 s
[22:34:39] Finished 'build' after 5.79 s
[22:34:39] Finished 'serve' after 5.85 s
[22:34:39] Starting 'default'...
[22:34:39] Finished 'default' after 5.38 μs
[RSK] Local URL: http://localhost:3000
[RSK] External URL: http://10.0.0.2:3000
[RSK] Serving files from: ./build
[22:34:41] Starting 'pages'...
{ [ReferenceError: require1 is not defined]
name: 'ReferenceError',
message: 'require1 is not defined',
stack: 'ReferenceError: require1 is not defined\n at Object. (/Users/asafkatz/Documents/dev/react-take5/src/pages/Privacy.js:14:12)\n at Module._compile (module.js:456:26)\n at DestroyableTransform._transform (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/index.js:99:13)\n at DestroyableTransform.Transform._read (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)\n at DestroyableTransform.Transform._write (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)\n at doWrite (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)\n at writeOrBuffer (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)\n at DestroyableTransform.Writable.write (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)\n at write (_stream_readable.js:601:24)\n at flow (_stream_readable.js:610:7)',
showStack: false,
showProperties: true,
plugin: 'gulp-render' }

events.js:72
throw er; // Unhandled 'error' event
^
ReferenceError: require1 is not defined
at Object. (/Users/asafkatz/Documents/dev/react-take5/src/pages/Privacy.js:14:12)
at Module._compile (module.js:456:26)
at DestroyableTransform._transform (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/index.js:99:13)
at DestroyableTransform.Transform._read (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at write (_stream_readable.js:601:24)
at flow (_stream_readable.js:610:7)

Create a new build step (aka Gulp task) which would generate .html pages during a build in order to be able to deploy this web app into CDN (see GitHub Pages).

Which of these conventions do you prefer and why?

• ./components/MyComponent.jsx
• ./components/MyComponent.js
• ./components/MyComponent.react.js
• ./components/MyComponentView.js

Hello,
when I try to use some internal node libraries I get an error (fs, tls, dgram, dns).

build/app.js:

var fs = webpack_require(!(function webpackMissingModule() { var e = new Error("Cannot find module "fs""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));

src/app.js sources:

var fs = require('fs');

You can see with this forked version:
https://github.com/avalla/react-starter-kit

There is something wrong?
I cannot understand :)

Thanks

Hello,
I was reviewing your kit, it's great work, I'm in the process of learning React.js and how it all fits together with asp.net.
Maybe i have a wrong idea, but my ideal architecture would be a primary asp.net mvc web site with react.js mini apps, with central navigation (top navigation bar) handled server-side by asp.net mvc. So i can use react for building apps-per-page, yet have solid sever-side boundaries between apps. I hope you understand what i'm getting to. Anyway, by looking at different examples I chose to try and integrate this starter kit with reactjs.net. Also, i would like it if these mini apps had their own routing, on top of asp.net server-side routing, but there shouldn't be any overlapping. Do you see any issues with that aproach? I plan on making a blog post about it since i couldn't find anything that touches the subject. Thanks and best regards!

When attempting to use a .jsx file from a node_module e.g.

var mui = require('material-ui');
var Icon = mui.Icon;

var HomePage = React.createClass({
  render() {
    return (
      <Icon icon="home"/>
    );
  }
});

I'm seeing this error:

// ....
[RSK] Serving files from: ./build
[20:54:04] Starting 'pages'...
{ [SyntaxError: Unexpected token <]
  name: 'SyntaxError',
  message: 'Unexpected token <',
  stack: 'SyntaxError: Unexpected token <\n    at Module._compile (module.js:439:25)\n    at Module._extensions..js (module.js:474:10)\n    at Plugin.reactTransform (~/react-starter-kit/node_modules/gulp-render/index.js:68:7)\n    at Object.Plugin.reactTransform (~/react-starter-kit/node_modules/gulp-render/index.js:68:7)\n    at Module.load (module.js:356:32)\n    at Function.Module._load (module.js:312:12)\n    at Module.require (module.js:364:17)\n    at require (module.js:380:17)\n    at Object.<anonymous> (~/react-starter-kit/node_modules/material-ui/docs/dist/index.js:2:10)\n    at Module._compile (module.js:456:26)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-render' }
[20:54:04] 'pages' all files 0 B
// ....

I have confirmed that this type of require works with webpack alone (using jsx-loader), therefore I believe this is caused by gulp-render. It doesn't seem to be interpreting the .jsx files correctly.

I wish I could be of more help, but I'm new to react. If you need an reproduction example please let me know.

Thanks! Great project by the way.

Is
https://github.com/kriasoft/react-starter-kit/blob/master/blog.andrewray.me/flux-for-stupid-people

Should be
http://blog.andrewray.me/flux-for-stupid-people/

The size of the react lib is reduced if you define process.env.NODE_ENV = "production".

See https://github.com/webpack/webpack-with-common-libs/blob/master/gulpfile.js#L25-L30

Curious as to why there is a gulp deploy task that deploys to Github pages when the build process produces a Node server app. This build doesn't currently work on Github pages. Deploy task works fine, seems to be something that wasn't compensated for in the build process.

Am I missing something?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

when I use require('style.less'), the component will not work and the JSX transpiler complains about unexpected characters.
ex. using the included TextBox component which has a less require statement.

@koistya please advise. thanks!

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

npm install breaks error

npm ERR! Darwin 14.0.0
npm ERR! argv "node" "/Users/andrey/.nvm/v0.10.32/bin/npm" "install"
npm ERR! node v0.10.32
npm ERR! npm  v2.1.12
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package less does not satisfy its siblings' peerDependencies requirements!

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/andrey/Projects/react/test/npm-debug.log

more detailed log

72 info install [email protected]
73 info postinstall [email protected]
74 info prepublish [email protected]
75 verbose stack Error: The package less does not satisfy its siblings' peerDependencies requirements!
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/lib/install.js:103:32
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/lib/install.js:225:5
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/read-installed/read-installed.js:138:5
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/read-installed/read-installed.js:251:14
75 verbose stack     at cb (/Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/read-installed/read-installed.js:251:14
75 verbose stack     at cb (/Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/read-installed/read-installed.js:251:14
75 verbose stack     at cb (/Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/read-installed/read-installed.js:251:14
76 verbose cwd /Users/andrey/Projects/react/test
77 error Darwin 14.0.0
78 error argv "node" "/Users/andrey/.nvm/v0.10.32/bin/npm" "install"
79 error node v0.10.32
80 error npm  v2.1.12
81 error code EPEERINVALID
82 error peerinvalid The package less does not satisfy its siblings' peerDependencies requirements!
83 verbose exit [ 1, true ]

Do we have a development watch script to compile source code as you save it?

Currently I'm having trouble compiling layouts automatically.