Meteor React Redux Boilerplate

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

• Demo
• Article(in Japanese)

Features

• Meteor
• React
• React Router
• Redux
• Babel
• Webpack
• Mocha

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

• test MongoDB
• delete autopublish
• delete insecure
• add Meteor accounts system
• server side rendering
• improve npm command
• improve deploy and hosting

License

MIT