react-mobile-boilerplate

A simple boilerplate for build mobile web app. Server side and client side rendering support.

webpack4, react-hot-loader4, react-router5

Installation

You'll need to have Node.js to get started.

$ git clone https://github.com/hahoocn/react-mobile-boilerplate.git
$ npm install

Running Dev Server (Development)

$ npm run dev

Building and Running Production Server

$ npm run build
$ npm run start

Only build the client side

$ npm run build:client

Clean Build Folder

$ npm run clean

Tech Stacks

React

• React (A JavaScript library for creating user interfaces by Facebook and Instagram. )
• React Router (Complete routing library for React.)
• Connected React Router (A Redux binding for React Router v4 and v5)
• React Redux (Official React bindings for Redux.)
• React Helmet (A document head manager for Reac)

Redux

• Redux (A predictable state container for JavaScript apps.)
• redux-act-reducer (A lib to create actions and reducers for Redux)
• Redux Thunk (Thunk middleware for Redux.)
• Redux DevTools Extension (A chrome extension for redux)
• hahoorequest (A HTTP request abstract library, use other http request libraries in one way. Isomorphic request to work in Node or in the browser.)
• reselect (Simple selector library for Redux)
• redux-immutable (redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.)

immutable

• immutable-js (Immutable persistent data collections for Javascript which increase efficiency and simplicity.)

Webpack

• Webpack (A module bundler.)
• Webpack Loaders
  • webpack-dev-server (Serves a webpack app. Updates the browser on changes.)
  • React Hot Loader (Tweak React components in real time.)
  • url-loader (Can return a Data Url if the file is smaller than a limit.)
  • json-loader (Loads file as JSON)
  • style-loader (Add exports of a module as style to DOM)
  • css-loader (Loads css file with resolved imports and returns css code)
  • eslint-loader (eslint loader for webpack)
  • svgo-loader (optimizing SVG vector graphics files)
  • postcss-loader (PostCSS loader for webpack to postprocesses your CSS with PostCSS plugins.)
  • babel-loader (Transpiling JavaScript files using Babel and webpack.)
  • handlebars-loader (A handlebars template loader for webpack.)
• Webpack Plugins
  • Clean for webpack (A webpack plugin to remove/clean your build folder(s) before building)
  • HTML Webpack Plugin (Simplifies creation of HTML files to serve your webpack bundles.)
  • Extract text plugin for webpack (It moves every require("style.css") in entry chunks into a separate css output file.)
  • DefinePlugin (Define free variables.)
  • UglifyJsPlugin (Minimize all JavaScript output of chunks.) UglifyJS 2
  • webpack-isomorphic-tools (Server-side rendering for your Webpack-built applications (e.g. React))
• Style & CSS
  • CSS Modules (A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.)
  • PostCSS (PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.)
  • Autoprefixer (PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter, and Taobao.)
  • PostCSS Nested (PostCSS plugin to unwrap nested rules like how Sass does it.)
  • PostCSS Mixins (PostCSS plugin for mixins.)
  • PostCSS Simple Variables (PostCSS plugin for Sass-like variables.)
  • svgo (SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files.) svgo is bundled with svgo-loader

Babel

• babel (Babel is a generic multi-purpose compiler for JavaScript. Using Babel you can use the next generation of JavaScript, as well as the next generation of JavaScript tooling.)
• @babel/preset-react (Strip flow types and transform JSX into createElement calls.)
• @babel/preset-env (a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).)
• .babelrc (Babel config file)
• babel-eslint (ESLint using Babel as the parser.)
• babel-loader (Transpiling JavaScript files using Babel and webpack.)
• babel-polyfill (This will emulate a full ES2015 environment and is intended to be used in an application rather than a library/tool.)

ESLint

• ESLint (The pluggable linting utility for JavaScript and JSX.)
• eslint-config-airbnb (This package provides Airbnb's .eslintrc as an extensible shared config. Airbnb React/JSX Style Guide: A mostly reasonable approach to React and JSX)

Stylelint

• stylelint (A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets.)

Express

• Express (Fast, unopinionated, minimalist web framework for node.)
• Express Handlebars (A Handlebars view engine for Express which doesn't suck.)

EditorConfig

• EditorConfig (EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs.)