Nevertheless Published Mine


    0.4.0 • Public • Published

    generator-mobx-react NPM version Dependency Status


    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


    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


    • @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!


    MIT © Chris Freeman


    npm i generator-mobx-react

    DownloadsWeekly Downloads






    Last publish


    • cafreeman