A starting point for small or large-scale MeteorJS applications with ES6 modules support.

• Features
• Testing
• Get started

• Hot reload of your React component with no page refresh (very fast)
• ES6 modules to organize your React components
• Routing with react-router - A complete routing library for React
• Access any Meteor global variables like collections, ReactMeteorData, Meteor.call(), Meteor.user(), ...
• Require CSS/LESS inside componentWillMount of your React components for component-specific styles
• Require images so they get bundled automatically (<img src={require('./img/check.png')} alt="" />)
• You can use Blaze templates with BlazeToReact

• lint: npm run lint
• unit test on React components: npm run tests

1. git clone https://github.com/michaltakac/meteor-webpack-boilerplate.git
2. cd meteor-webpack-boilerplate
3. npm install
4. ./scripts/run-dev.sh to run in development mode (with hot-reload)
5. ./scripts/run-prod.sh to run in production mode (with server-rendering, need to be restarted if you change anything inside the app folder)
6. ./scripts/build.sh to build the compressed bundle
7. You can use ./meteor.sh as a shortcut for executing meteor in the meteor folder

You can use the ReactMeteorData mixin from the Meteor team. You have to use React.createClass with them because mixins are deprecated with ES6 classes.

This project allows you to require CSS (or SCSS/LESS) inside componentWillMount of your React components. This allows you to bundle your CSS with your React components. You will never miss a CSS file in your project again.

When your component is mounted for the first time, the CSS will be injected in the page. This is how the css-loader of Webpack is working.

class MyComponent extends React.Component {
  componentWillMount() {
    require('./MyComponent.css');
  }

  render() {
    // ...
  }
}

In development, hot-reload will update your CSS with no page refresh.

In production, the server will collect the CSS your client needs while doing the server-rendering. Then, the CSS will be served to the client with the HTML. As soon as the React application is started on the client, the CSS we collected while server-rendering will be removed and the client will take control.

If you have this error:

Error: The `libsass` binding was not found in .../node_modules/node-sass/vendor/linux-x64-11/binding.node
W20150925-15:43:08.319(-4)? (STDERR) This usually happens because your node version has changed.
W20150925-15:43:08.319(-4)? (STDERR) Run `npm rebuild node-sass` to build the binding for your current node version.

It is because Meteor is running on a different Node.js version than your local version. You can fix it easily:

1. Open scripts/fix-sass.sh with your favorite editor
2. Set the correct SASS_BINARY_NAME value based on the directory between vendor and binding.node in the error message: .../vendor/linux-x64-11/binding.node
3. Run the script and the error should disappear

The idea behind using Webpack with Meteor is to be able to use awesome tools React people are already using.

While we are developing, Meteor is started with a webpack dev server. This means the file created by Webpack are only in memory and we can hot-reload them on the client. The advantage of that is Meteor will not restart unless it is really necessary.

In production, we are bundling a server and a client version with Webpack and drop them in the Meteor project. Then, we put the assets in the correct folder (meteor/public/assets). Those files are generated by webpack and are determined by your require of CSS and images (if you have any). Then, we start Meteor or we bundle the project.

• externals: You can access Meteor global variables by using import. By default, react is there. You can add your own.

This project is fork of @thereactivestack's "kickstart".