webcube

iOS 7+ ✔	Android 4+ ✔	11+ ✔

webcube is a batch of continuously updated base code and configurations for modern static/isomorphic web app. It simplifies the integration with the latest cutting-edge JS technology and tools, automatically provides the modern software engineering environment, architecture, workflow and best practices. It also can lower the barrier of starting a new web app project.

• webcube-cli: TODO
• webcube-example: boilerplate + demo https://github.com/dexteryy/webcube-example/

Features

• TODO

Integration

• React (Router [TODO: v4] + Helmet + React CSS Modules + ...)
• Redux (FSA + Reselect + Redux Actions + Redux Thunk / Redux Observable [TODO] + ...)
  • Redux Logger + Redux DevTools + Reactotron [TODO]
• lokka [TODO] / React Apollo [TODO]
• Webpack [TODO: v2]
  • Babel v6 (babel-preset-env + Object rest spread + Class Properties + Legacy Decorator + fast-async + JSX + Flow) + React Transform (hmr + catch-errors + render-visualizer)
  • CSS in JS (styled-components [TODO] / Radium), CSS Modules + PostCSS (CSSNext) / SCSS (node-sass) + Autoprefixer + CSSNano
  • imagemin (gifsicle + mozjpeg + optipng + svgo + pngquant) + url-loader / file-loader
  • ExtractTextPlugin + AssetsPlugin
  • webpack-dev-server / webpack-hot-middleware + webpack-dashboard
• Gulp
  • Flow [TODO] + ESLint v2 (babel + react + flowtype [TODO] + graphql [TODO] + fp [TODO])
  • StyleLint + CSSComb (SMACSS-like property order)
  • UglifyJS v2 / uglify-es [TODO] / Babili [TODO] + Prepack [TODO]
  • HTMLHint + HTMLMinifier + gulp-inline-source + gulp-replace
• Jest [TODO] + Enzyme [TODO] / Nightmare (electron-prebuilt), Mocha & Chai + Karma (PhantomJS / ChromeHeadless [TODO])
• dotenv + Plop (Handlebar + Inquirer) + Commitizen (cz-conventional-changelog) + Husky + EditorConfig
• AWS-SDK-JS / Aliyun-SDK-JS
• Wechat JS SDK + Google Tag Manager / Google Analytics / Baidu Tongji + GrowingIO / ZhugeIO

Boilerplate as library:

• AppSkeleton - exmaple A, example B
• createReactRoot - exmaple
• createReactRouterRoot - exmaple
• createReduxRoot - exmaple
• createReduxRouterRoot - exmaple
• stateSelector - exmaple
• actionDispatcher - exmaple
• ...

How to Create a New Web App

Step 1

Use webcube-cli (TODO) or imitate the example app to create the minimal structure and configure files:

• configs/ - Project-defined configuration files and build scripts
  • env.sample.config - Project-defined template file for env.config
• app/ - All source code for web app (shared between client-side and server-side), including JS, CSS and assets
  • common/ - Reusable code shared between entry points
  • entrypoint1/ - Multiple entry points
    • common/ - Reusable code shared between feature sets
    • main/ - The default/global feature set
    • feature1/ - A feature set
    • feature2/ - A feature set
  • entrypoint2/
• staticweb/ - For static web deployment or testing
• package.json - Minimal dependencies and npm scripts based on webcube, see webcube-example's package.json
• env.config - Project-defined configuration options for webcube and custom scripts

Add the project-defined template file for env.config

cp ./node_modules/webcube/configs/env.sample.config ./configs/

Add the Dockerfile only for production (or staging) environment

cp ./node_modules/webcube/configs/Dockerfile ./

Add other configuration files depended by webcube and recommended npm scripts

cp ./node_modules/webcube/configs/babelrc ./.babelrc
cp ./node_modules/webcube/configs/gitignore ./.gitignore
cp ./node_modules/webcube/configs/dockerignore ./.dockerignore

Step 2

Add an env.config file in the root directory.

cp ./configs/env.sample.config env.config

Install dependencies:

yarn

or

npm install

For users living in China:

Use cnpm install

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

Use mirrors:

export NVM_NODEJS_ORG_MIRROR="http://npm.taobao.org/mirrors/node"
export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"
export PHANTOMJS_CDNURL="http://npm.taobao.org/mirrors/phantomjs"
export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
export CHROMEDRIVER_CDNURL="http://npm.taobao.org/mirrors/chromedriver"

Step 3

Create an entry point with one command:

• npm run new entry:react
• npm run new entry:react-router
• npm run new entry:react-redux
• npm run new entry:react-redux-router

How to Build the Web App

npm run build

Project-defined build scripts and config files:

• webcube-example/package.json
• webcube-example/configs/gulpfile.babel.js
• webcube-example/configs/webpack.config.babel.js

Underlying build scripts and config files:

• webcube/src/configs/gulpfile.babel.js
• webcube/src/configs/webpack.config.babel.js

Open in the browser

open http://localhost:8000

Manually start/stop static web server:

npm run start:staticserver
npm run stop:staticserver

How to Develop the Web App

For faster recompiling (webpack-dev-server):

npm run dev

or

npm run dev:dashboard

Enable automatic refreshing:

LIVE_MODE=refresh npm run dev:dashboard

Enable HMR (Hot Module Replacement):

LIVE_MODE=hmr npm run dev:dashboard

How to Generate New Code

Use micro-generator:

npm run new

• npm run new entry:react - Add a new entry point (with React)
• npm run new entry:react-router - Add a new entry point (with React + Router)
• npm run new entry:react-redux - Add a new entry point (with React + Redux)
• npm run new entry:react-redux-router - Add a new entry point (with React + Redux + Router)
• npm run new demo:react - Add a new entry point for demo (with React)
• npm run new demo:react-router - Add a new entry point for demo (with React + Router)
• npm run new demo:react-redux - Add a new entry point for demo (with React + Redux)
• npm run new demo:react-redux-router - Add a new entry point for demo (with React + Redux + Router)

Project-defined generator scripts:

• webcube-example/configs/plopfile.babel.js

Underlying generator scripts:

• webcube/src/configs/plopfile.babel.js

How to Test the Web App

Functional tests:

• NodeJS + Mocha + Nightmare
• Naming convention: **/*.spec.js

Unit tests:

• Karma + PhantomJS/Chrome + Mocha
• Naming convention: **/*.test.js
• Example: webcube-example/app/example-app/effects/components/WelcomeBox/tests/index.test.js

Manually run functional tests (run automatically after building):

npm run test:quick

Manually run unit tests:

npm run test:unit

Manually run unit tests and functional tests:

npm run test

Manually run functional tests for web app in the cloud (after deployment):

npm run test:cloud

NOTE: Spec file of new entry point or new component can be automatically added by micro-generator

Karma configuration:

• webcube/src/configs/karma.conf.babel.js

Code Style

Manually run static checking:

npm run lint

See the example configuration

How to Deploy the Web App

Static Web Mode

Build for static cloud environment (e.g. AWS S3, Aliyun OSS, CDN), than upload build/public/ to the cloud:

npm run deploy:staticweb

For staging environment:

npm run deploy:staging:staticweb

Before deployment, all environment variables that names begin with WEBCUBE_DEPLOY_STATIC_ must be configured in env.config.

For example, you must choose a static cloud provider in env.config:

WEBCUBE_DEPLOY_STATIC_CLOUD=oss

WEBCUBE_DEPLOY_STATIC_CLOUD=s3

Static Server Mode

npm run deploy:staticserver

Underlying deployment scripts and adapters:

• webcube/src/configs/gulpfile.babel.js
• webcube/src/utils/deploy/*.js