node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »

webcube

webcube

< Back to Project WebCube

NPM Version

Nodei

iOS Safari Android WebView IE
iOS 7+ ✔ Android 4+ ✔ 11+ ✔

webcube is a continuously updated JS infrastructure for modern Universal JS web app/site and static web.

It is part of my effort to simplify the usage of all 'mainstream' tools and best practices mentioned in the Spellbook of Modern Web Dev.

It can 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.

Get Started

Usage #1: create a web project as a standalone repo

Step 0:

Copy webcube-starter-for-standalone-repo/package.json into your repo

mkdir my-project
cd my-project && curl https://raw.githubusercontent.com/dexteryy/Project-WebCube/master/starters/webcube-app-as-standalone/package.json > package.json

Step 1:

Install dependencies

git init
npm run update

Step 2:

Scaffold

npm run webcube:setup

Step 3:

Create an entry point

npm run new

Usage #2: create a web project in a monorepo

Pre-task:

Create a monorepo based on webcube's monorepo

git clone git@github.com:dexteryy/webcube.git your-monorepo
cd your-monorepo/
rm -rf .git examples starters
mkdir entries
mkdir services
git init

NOTE: If you need not to fork webcube's packages, you should remove these files:

rm -rf packages/*

Step 0:

Create your project as a monorepo workspace directory

mkdir -p entries/my-project

Copy webcube-starter-for-project-in-monorepo/package.json into your project

cd entries/my-project && curl https://raw.githubusercontent.com/dexteryy/Project-WebCube/master/starters/webcube-app-in-monorepo/package.json > package.json

Edit entries/my-project/package.json, replace fields surrounded by angle brackets with correct configuration.

Step #1:

Install dependencies in monorepo's root

cd ../../
npm run update
cd -

Step 2:

Scaffold

npm run webcube:setup

Step 3:

Create entry point

npm run new

How To Develop

For faster recompiling (webpack-dev-server):

npm run dev

or

npm run dev:dashboard

Enable automatically refreshing:

LIVE_MODE=refresh npm run dev:dashboard

Enable HMR (Hot Module Replacement):

LIVE_MODE=hmr npm run dev:dashboard

How To Test (WIP)

How To Deploy

Static Web Mode

NOTE: for static cloud environment (e.g. AWS S3, Aliyun OSS, Cloudflare, ...)

npm run deploy:staticweb

For staging environment:

npm run deploy:staging:staticweb

Environment variables: WEBCUBE_DEPLOY_STATIC_*

For example,

WEBCUBE_DEPLOY_STATIC_CLOUD=oss
WEBCUBE_DEPLOY_STATIC_CLOUD=s3

Static Server Mode

npm run deploy:staticserver

Server-side Rendering Mode (WIP)

Packaged App Mode (WIP)

Integration

Features (WIP)

Philosophy (WIP)

Slides (in Chinese) @ JSConf CN 2017