Meteor React Redux Boilerplate

A boilerplate to use React + Redux with Meteor Inspired from react-redux-starter-kit and meteor-react-redux-example.

Features

Getting Started

Development

At .client directory for the first time

$ npm install

At .client directory

$ npm start

Open a new tab and run meteor at root directory

$ meteor

Usage

root directory

`meteor`

run your application at localhost:3000

.client directory

`npm start`

watch your files with webpack with debug tool

`npm run build`

`npm run deploy`

deploy your application to the web. change meteor-react-redux-boilerplate.meteor.com in the package.json

`npm run ios`

run your application with iOS simulator

`npm test`

test your application with mocha

`npm run eslint`

Alias

.client folder's alias is available like this

import someAction from 'dir_src/actions/someAction';

Structure

├── index.html
├── .client           # client application code
├── .meteor
├── client
│   └── bundle.js     # bundled file by webpack
└── lib
    └── models
        └── todo.js

In .client folder, almost same structure as react-redux-starter-kit. You can develop Meteor application just like an usual Single Page Application with webpack for the web.

# in .client folder

├── actions
│   └── Todo.js
├── components
│   ├── TodoAdd.js
│   ├── TodoApp.js
│   ├── TodoEdit.js
│   └── TodoItem.js
├── constants
│   └── index.js
├── containers
│   ├── DevTools.js
│   ├── DevToolsWindow.js
│   └── Root.js
├── initialStates
│   └── index.js
├── layouts
│   └── CoreLayout.js
├── reducers
│   ├── Todo.js
│   └── index.js
├── routes
│   └── index.js
├── store
│   └── configureStore.js
├── styles
│   ├── _base.scss
│   ├── core.scss
│   └── vendor
│       └── _normalize.scss
├── utils
│   └── index.js
├── views
│   └── HomeView.js
├── test
│   ├── actions
│   │   └── todo.js
│   ├── components
│   │   └── todo.js
│   ├── helper
│   │   ├── index.js
│   │   └── mock.js
│   └── index.js
├── config
│   ├── index.js
│   └── webpack.js
├── index.js
├── package.json
└── webpack.config.js

But there are some differences. You can use Model in React components, here is an example.

const HomeView = React.createClass({
  getMeteorData() {
    return {
      todos: Todos.find({}).fetch(),
    };
  },

  render () {
    return (
      <div className='HomeView'>
        {JSON.stringify(this.data.todos)}
      </div>
    );
  },
});

Now you can read data with this.data.todos in React Component, and it's automatically synced to all connected clients in realtime thanks to Meteor and ReactMeteor. That's why I don't use redux state in case getting datas from MongoDB.

And you can easily update MongoDB like below.

Todos.update(action.id, {$set: {text: action.text}});

Future List

License

MIT

okmttdhr/meteor-react-redux-boilerplate