FSM 2: A clean slate

Welcome to Part 2 of Fresh Start Meteor, a guide that walks you through creating a new Meteor project using ES6, React, Redux, FlowRouter, and Sass. Feeling lost? Start with Part 1.

First things first, let’s create a new Meteor project in your dev environment and set up all of the packages we’ll be using:

$ meteor create YOUR_APP_NAME
$ cd YOUR_APP_NAME
$ meteor npm install --save react react-dom react-mounter redux react-redux redux-thunk
$ meteor npm install --save-dev redux-devtools
$ meteor add kadira:flow-router fourseven:scss seba:minifiers-autoprefixer std:accounts-ui accounts-password
$ meteor remove autopublish insecure standard-minifier-css blaze-html-templates

This will add React, Redux, and related tools, Flow Router, SCSS, an autoprefixer, and React-based user accounts to your new project and remove the autopublish and insecure packages that you shouldn’t push live, a CSS minifier that’s covered by our new autoprefixer, and Blaze templates because we’re using React.

An aside on meteor npm: As of v1.3, Meteor bundles a version of Node Package Manager (NPM) so that you don’t need it installed globally in your dev environment. While you could use a vanilla npm install command, prepending “meteor” gives you an extra layer of protection as it ensures you’re using a version of NPM that has been tested with your version of Meteor.

An aside on react-mounter: You may see other tutorials use react-layout, but this package was for routing using the older, ES5 syntax. For ES6, react-mounter is its replacement.

Since we’ll be working with React, you should install the React Developer Tools in your browser for better debugging.

That was pretty easy! Now it’s time to figure out how to organize everything properly so we can be ensure scalability and keep everything clean.

FSM 3: Structuring a scalable codebase

You can help make this guide better by commenting when anything seems unclear, unhelpful, or plain wrong. Please be clear, detailed, and keep it positive! If you have suggestions for future articles or questions about the guide in general, feel free to tweet at me: @teaganatwater Thanks so much!