Meteor react-toolbox-example

Meteor version of react-toolbox-example

Getting Started

1. Clone this repository
2. Run meteor npm install && meteor
3. Visit localhost:3000 in your browser

How it works (using Meteor 1.3.3.1 and nathantreid:css-modules 2.0.2):

1. meteor create your-app

2. cd your-app

3. meteor npm install --save react-toolbox

4. meteor npm install --save-dev node-sass@3.4.2

5. meteor add nathantreid:css-modules@2.0.2

6. Remove the server directory

7. Remove all files from the client directory

8. Download the react-toolbox-example

9. Copy all of the files from react-toolbox-example/app into the /client folder

10. Wrap the ReactDom.render() call in index.jsx inside Meteor.startup():

    Meteor.startup(function () {
    ReactDOM.render((
    // rest of ReactDOM.render call...
    });

11. Copy the head & body tags, minus the and (Meteor will handle those) from react-toolbox-example/www/index.html to an index.html in the /client folder

12. Add the following to packages.json:

    "cssModules": {
        "extensions": [
          "scss"
        ],
        "globalVariables": [
          "node_modules/react-toolbox/lib/_colors.scss",
          { "theme-building": true },
          "client/toolbox-theme.scss"
        ]
      }

13. Run meteor

The extensions property determines which file types are handled by the plugin (default: [ "mss" ]).

The globalVariables property is roughly the equivalent of the toolbox-loader configured by toolbox: { theme: } property from the react-toolbox-example's webpack.config.js.