node package manager

webcube

webcube

NPM Version Build Status Dependencies Status Test Coverage

Nodei

iOS Safari Android WebView IE
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.

Features

  • TODO

Integration

Boilerplate as library:

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:

Underlying build scripts and config files:

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:

Underlying generator scripts:

How to Test the Web App

Functional tests:

Unit tests:

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:

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: