Meteor version of react-toolbox-example
- Clone this repository
- Run
npm install && meteor
- Visit
localhost:3000
in your browser
meteor create your-app --release 1.3-rc.7
cd your-app
npm install --save react-toolbox
meteor add nathantreid:css-modules@1.0.0-beta.9
- Remove the
server
director - Remove all files from the
client
directory - Download the react-toolbox-example
- Copy all of the files from react-toolbox-example/app into the /client folder
- Wrap the
ReactDom.render()
call in index.jsx insideMeteor.startup()
:
Meteor.startup(function () {
ReactDOM.render((
// rest of ReactDOM.render call...
});
- Copy the head & body tags, minus the and <script src="react-toolbox.js"></script> (Meteor will handle those) from react-toolbox-example/www/index.html to an index.html in the /client folder
- Add the following to packages.json:
"cssModules": {
"extensions": [
"scss"
],
"globalVariables": [
"node_modules/react-toolbox/lib/_colors.scss",
{ "theme-building": true },
"client/toolbox-theme.scss"
],
"outputJsFilePath": {
"node_modules/react-toolbox/.*": "{dirname}/{basename}.js"
},
"explicitIncludes": [
"node_modules/react-toolbox"
]
}
- 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.
The outputJsFilePath
property configures the output filename used by the import statement (default: { "default": "{dirname}/{basename}.{extname}" }
, eg. "client/styles.scss"). React-Toolbox omits the extension from the scss imports, and the scss extension isn't a default extension when importing from node_modules, so it requires the output format to be { "default": "{dirname}/{basename}" }
, eg. "client/styles". If you want to use the standard format for files in your project, but still use React-Toolbox, you can limit the format specifically to the react-toolbox directory using a regular expression:
Meteor allows you to leave off the extensions when importing files that are handled by a build plugin, so import style from './style';
and import style from './style.scss';` are equivalent.
However, this does not work with the node_modules directory, which supports leaving off the extension on .js and .json files, so we have to explicitly change the output format for React-Toolbox:
"outputJsFilePath": {
"node_modules/react-toolbox/.*": "{dirname}/{basename}.js"
},
The explicitIncludes
property tells the css modules plugin to process all handled file extensions (in this case, scss) in the supplied directories. This is required because Meteor 1.3 does not process files in the node_modules folder.
This is a modification of an excellent project by @nathantreid. Original project here: https://github.com/nathantreid/meteor-react-toolbox-example
- React and React-DOM to v15
- Added Mantra packages
- Added
babel-compiler
meteor package (should be removed when class transform issue is resolved) - Gutted a component for demonstration