Skip to content

A simple boilerplate for build mobile web app ( Node.js, React.js, Redux, immutable-js, Webpack, CSS Modules, PostCSS, Babel, ES2015, ESLint, Server side and client side rendering ... )

License

Notifications You must be signed in to change notification settings

hahoocn/react-mobile-boilerplate

Repository files navigation

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

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 Plugins
  • 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

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.)