Scaffold Introduction

Explain this scaffold in details

Pre-commit

With lint-staged and husky, we are going to prevent your code updates from git commit if any eslint warning/error found.

Watch Make Linting Great Again if you prefer more information

Docker release

In order to release app with docker image, we internally implemented a express based web container in server/index.js

By executing the Dockerfile, we are about to create an image for your application.

One amazing part is, you are allowed to specify env variables whenever start the docker image by follow command:

docker run -p <exposed port>:3000 -e "STORAGE_DOMAIN=.yourdomain.com" -e "API_HOST=http://backend-address" -d <imagename>:<version>

STORAGE_DOMAIN = where you'd like to save your cookie. (for authentication purpose)

API_HOST = where you'd like to fetch data from

Helpers

We provide few helper utilities to enhance development experience

api = single instance of axios, with proper abstraction. You should always send ajax request by this instance

errors = custom Errors

antd.js = utils for ant-design related features

commonModel.js = base model for dva.js

env.js = utils for detect what environment you are running at

storage.js = ease the way you communicate with cookie/localStorage/sessionStorage

text.js = utils for string issues

view.js = utils for viewing issues, such as: destroying global splash-screen, detect if a specific element is in view port or not

Components

Auth/AuthRoute.js = Loaded via umi.js, applied to all exact route but OPEN_PAGES. We implemented a simple one which only checks the token, you can replace it with your own logic at any time

GlobalFooter = You know it, something about copyrights

GlobalHeader = You know it, something about navigation, sign in status

LanguageSwitch = The component helps end-user change the preferred language easily

Config

Configurations that used in the entire application shall be defined here.

Reminder

STORAGE_DOMAIN, API_HOST will be replaced by env you specified whenever you launch the app via npm run serve or docker image

Layouts

Two layouts are provided by default: AuthRequiredLayout, OpenPageLayout.

AuthRequiredLayout is responsible for pages which required authentication.

OpenPageLayout is responsible for pages which can be accessed without any restriction

Locales

Language assets

models

Application level models, there are usually used in the entire application

services

Application level services, there are usually used in the entire application

themes

You can easily define your own theme here by override default theme provided by ant-design