marcesdan/react-mobx-boilerplate

Scalable React boilerplate with MobX, webpack 5, babel, react-router, material-UI, sentry and more fun

React MobX Boilerplate

Scalable React MobX Boilerplate using babel, sass, webpack 5 with a hot dev server and an optimized production build.Configured with eslint rules.

Installation

git clone https://github.com/marcesdan/react-mobx-boilerplate.git
cd react-mobx-boilerplate
yarn / npm i

Usage

Development server

yarn start / npm start

You can view the development server at localhost:8080.

Production build

 yarn build / npm run build

Features

• webpack
• Babel
• Sass
• Eslint

Dependencies

webpack

• webpack - Module and asset bundler.
• webpack-cli - Command line interface for webpack
• webpack-dev-server - Development server for webpack
• webpack-merge - Simplify development/production configuration
• cross-env - Cross platform configuration

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/plugin-proposal-class-properties - Use properties directly on a class (an example Babel config)
• @babel/preset-env - Smart defaults for Babel

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
  • node-sass - Node Sass
• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM

Eslint

• eslint-config-airbnb - Provides Airbnb's .eslintrc as an extensible shared config.
• eslint-import-resolver-alias - a simple Node behavior import resolution plugin for eslint-plugin-import, supporting module alias.
• eslint-plugin-babel - an eslint rule plugin companion to babel-eslint.
• eslint-plugin-import - This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.
• eslint-plugin-jsx-a11y - Static AST checker for accessibility rules on JSX elements.
• eslint-plugin-react - React specific linting rules for ESLint.

Plugins

• clean-webpack-plugin - Remove/clean build folders
• copy-webpack-plugin - Copy files to build directory
• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extract CSS into separate files
• optimize-css-assets-webpack-plugin - Optimize and minimize CSS assets
• terser-webpack-plugin - Optimize and minimize JavaScript