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

or

DEPLOY_MODE=staticserver 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

The Deployment scripts should be executed on the local development environments.

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

The deployment scripts should be executed on the server (in a container)

npm run build:production

Underlying deployment scripts and adapters:

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