brunch / with-react

React skeleton with Babel/ES6 for Brunch

Brunch + React + Babel/ES6

This is a modern JS skeleton with React for Brunch.

Installation

Clone this repo manually or use brunch new dir -s brunch/with-react

Getting started

• Install (if you don't have them):
  • Node.js: brew install node on OS X
  • Brunch: npm install -g brunch
  • Brunch plugins and app dependencies: npm install
• Run:
  • npm start — watches the project with continuous rebuild. This will also launch HTTP server with pushState.
  • npm run build — builds minified project for production
• Learn:
  • public/ dir is fully auto-generated and served by HTTP server. Write your code in app/ dir.
  • Place static files you want to be copied from app/assets/ to public/.
  • Brunch site, Getting started guide

with-react's Issues

Material UI no longer works

This is strange because I used this same exact repo several weeks ago and everything worked fine.

This is the error I get in my console:

Uncaught Error: Cannot find module "react/lib/update" from "react-addons-update"

^ the above error was thrown inside vendor.js

This is my import statement that causes the app to crash:

import RaisedButton from 'material-ui/lib/raised-button';

All I did was initialize the skeleton with Brunch, and then npm install --save material-ui. This same exact methodology is how I started this repo: https://github.com/adrianmc/olis-frontend

An example of the non-working version is here: https://github.com/adrianmc/brunch-mui-example

I believe the culprit is inside how Brunch tries to fetch the dependencies when compiling vendor.js. That seems to be the only difference between the structure of the old repo as compared to the new repo.

Adding HMR for Hot Reload

I'm trying to use the Brunch HMR API in order to implement Hot Reload. I essentially followed the steps in this video, which was written for Webpack. But since the Brunch HMR API is similar, I thought it should work.

My initialize.js is:

import ReactDOM from 'react-dom';
import React from 'react';
import App from 'components/App';

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(<App />, document.querySelector('#app'));
});

if (module.hot) {
  module.hot.accept('components/App', (d) => {
    const NextApp = require('components/App').default;
    ReactDOM.render(<NextApp />, document.querySelector('#app'));
  });
}

And my brunch-config.js joins Javascript into only one file:

module.exports = {
  hot: true,
  files: {
    javascripts: {joinTo: 'app.js'},
    stylesheets: {joinTo: 'app.css'}
  },

  plugins: {
    babel: {presets: ['es2015', 'react']}
  }
};

After all this, I still get the error:

09 Dec 02:22:25 - warn: HMR runtime not found for public/app.js. HMR only works if use compile your JS into a single file, could it be the case?

Perhaps I do not understand how HMR really works. Is hot reload possible? Can we do it with this Skeleton?

This is my repository: https://github.com/adrianmcli/brunch-hmr-example

How to tests components ?

I'm not sure where to post my issue, but I'm using this skeleton, so...
I have React components inside app/components and want to test them inside test folder.
Using mocha, I have my script test: mocha --compilers js:babel-core/register test/*.test.jsx, but it doesn't work (jsx inside) because babel config from brunch-config.js is not used. If I add a .babelrc file with same presets than brunch-config.js's one, it works.

Is it expected behaviour or am I missing something ?
Thanks

Dependencies out of date

Hi I've noticed that some of the dependencies are now out of date.

Is there a reason for this, would it be possible to just use latest versions at all times?

CSS not compiled

When I clone this project and run brunch build, the CSS file does not get put in the public folder. When I compared this repo to with-es6, the only difference I could find was that with-es6 has brunch under devDependencies. When I add brunch as a dev dependency to this project, the CSS does get placed in public.

Broken

Brand new project is broken with browser console error:

Uncaught Error: Cannot find module 'react/lib/ReactDOM' from 'react-dom/index.js'

Renaming "app" to something else

Hello!
I'm having some problems renaming the directory "app" to something else. So I renamed the directory, and changed brunch config like this:

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^(?!something)/,
        'app.js': /^something/
      }
    },
    stylesheets: {joinTo: 'app.css'}
  },

  plugins: {
    babel: {presets: ['es2015', 'react']}
  }
};

But brunch complains on "build":

warn: Nothing to compile. Most likely you don't have any source files yet, in which case, go ahead and create some! Otherwise, you probably don't have any plugin handling your source files (for plain javascript, that would be "javascript-brunch")

although it works fine with "app". What simple thing am I missing? :)

Thanks for your help!