Skip to content

[DEPRECATED] A lightweight Yeoman for generator for scaffolding new projects using mobx-react projects

License

Notifications You must be signed in to change notification settings

cafreeman/generator-mobx-react

Repository files navigation

generator-mobx-react NPM version Dependency Status

Introduction

mobx-react is a fantastic library that combines MobX observables with React for powerful, intuitive state management.

This generator is intended to help people get started with mobx-react by providing a relatively lightweight project generator that takes care of the basic project infrastructure and lets the user get started coding right away.

What yo mobx-react handles for you

This generator will set up a basic React/MobX project for you, including the following features:

  • Scaffold a basic app, including config files and dependencies

  • Choice between ES2015 and TypeScript

  • If using ES2015, yo mobx-react will set up Babel 6 + the appropriate plugins and presets for supporting React + Mobx

  • If using TypeScript, yo mobx-react will install the latest version of TypeScript, plus Typings for type definitions. It will also set up a basic tsconfig and typings.json file for you, with React and React-DOM typings installed.

  • Webpack, with the following configuration

    • transpilation via babel-loader or awesome-typescript-loader
    • css bundling
    • npm-auto-install
    • code splitting in production builds
    • webpack-dev-server with hot module reloading
  • eslint

    • babel-eslint parser so the linter doesn't freak out about decorators (or other features)
    • uses the Airbnb style guide
    • configurable via .eslintrc.js
  • package.json with the necessary dependencies, as well as scripts for the dev server as well as production build

Installation

First, install Yeoman and generator-mobx-react using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-mobx-react

Then generate your new project:

yo mobx-react

npm Scripts

Once you've generated your project, you'll have access to the following npm scripts from the command line:

  • npm run build: Transpile and bundle your project via webpack using production optimizations.
  • npm start: Start webpack-dev-server at http://localhost:8080. webpack-dev-server will automatically rebuild your app whenever you save changes. In addition, it will hot-reload your changes without triggering a browser refresh (i.e. your state persists across file changes!!). Finally, it will automatically install any unresolved dependencies whenever you import them in your code.
  • npm run build-es6: Transpile your code to ES2015 modules. Note that this option does not bundle or optimize your code. Instead, it simply transpiles each module in your src directory into a corresponding ES2015 module in the es6 directory. This gives you the option to then use a tree-shaking bundler like rollup.js.
  • npm run clean: rimraf all the things (except src obviously)
  • npm run compile: Build all the things. This command will run all of the preceding build steps in sequence.

TO DO

  • Create new folder if the current working directory doesn't match the project name

Acknowledgements

  • @mweststrate and the MobX team
  • SurviveJS for being an unbelievably useful resource for figuring out Webpack config stuff. Almost all of the webpack tricks implemented in yo mobx-react are based on things I learned from SurviveJS. Definitely buy the book!

License

MIT © Chris Freeman

About

[DEPRECATED] A lightweight Yeoman for generator for scaffolding new projects using mobx-react projects

Resources

License

Stars

Watchers

Forks

Packages

No packages published