React app create by @spinacia

Creating an App

npx @spinacia/create

@spinacia will creating an app inside a folder named 'my-app' and propety 'name' in the package.json will also called same, or you can customize those:

npx @spinacia/create [customize-folder-name]

*npx comes with npm 5.2+ and higher, run npm i -g npm to update

Inside that directory, it will generate the initial project structure:

.
├── README.ZH.md
├── README.md
├── app
│   ├── assets
│   │   └── SPINACIA.svg
│   ├── components
│   │   └── ...
│   ├── config
│   │   ├── reducer.js
│   │   ├── route.js
│   │   └── router-core
│   │       └── ...
│   ├── containers
│   │   ├── App
│   │   │   ├── action.js
│   │   │   ├── constant.js
│   │   │   ├── index.js
│   │   │   ├── reducer.js
│   │   │   └── style.less
│   │   └── Main
│   │       ├── actions
│   │       │   └── index.js
│   │       ├── components
│   │       │   └── ...
│   │       ├── connect
│   │       │   └── index.js
│   │       ├── constants
│   │       │   └── index.js
│   │       ├── index.js
│   │       ├── reducers
│   │       │   └── index.js
│   │       ├── style.less
│   │       └── ts.tsx
│   ├── css
│   │   ├── common.less
│   │   └── resets.less
│   └── index.jsx
├── build
│   ├── assets.js
│   ├── config.js
│   ├── index.html
│   ├── index.js
│   └── loading
│       ├── loading.css
│       └── loading.html
├── favicon.ico
└── package.json

20 directories, 40 files

Start develop

npm start @spinacia will open browser automatic, and if port was occupied, @spinacia will instead other free port.

Build production

npm run build Builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed.

Build config

The app support some custom settings.

In build/config.js:

module.exports = {
  // Default port for webpack dev server.
  port: 3000,
  // Eslint loader switch.
  eslint: true,
  // When this eslintFix is 'true',
  // eslint loader will automatically fix some code.
  eslintFix: true,
  // Same as document.title,
  // but this will write <title>your setting</title> in the 'index.html'.
  documentTitle: '',
  // Set publicPath for all assets,
  // you need this when you gonna use CDN.
  publicPath: '',
  // build output directory.
  outputDir: 'dist'
};

In build/assets.js:

// Show 'loading' icon before 'bundle.js' loaded.
// You can customize loading in loading.html and loading.css.
module.exports = {
  loading: {
    html: './loading/loading.html',
    css: './loading/loading.css'
  },
  // When `window.location.hostname` includes `test`,
  // or you can customize which is matched `window.location.hostname` in the `devPattern`,
  // and app will use dev: {...} configuration,
  // otherwise will use pord: {...} configuration.
  devPattern: 'www.nmhs.test',
  dev: {
    libs: {
      // App will generator script and link tag in html header,
      // for load following links.
      css: [],
      js: [
        'https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js',
        'https://unpkg.com/react@16/umd/react.production.min.js',
        'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js',
        'https://cdn.bootcss.com/react-redux/5.0.7/react-redux.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.1.0/redux-thunk.min.js',
        'https://cdn.bootcss.com/react-router/3.2.1/ReactRouter.min.js',
      ]
    }
  },
  prod: {
    libs: {
      css: [
        ...
      ],
      js: [
        ...
      ]
    }
  }
}

Test

We use enzyme chai istanbul mocha karma sinon. and run *.js files which should in the directory named __test__.

start:

npm test

The coverage report will automatically generate at root path.

Eslint

We use eslint to help specification code, and use @spinacia/eslint-config-app configuration. if you don't need eslint, you can trun off in the build/config.js.

Typescript

Typescript has supported, you can create tsconfig.json customize configuration by yourself.

app/assets directory

This directory is the static pool on the development, when you execute npm start and put something staitc files like *.png, then you can access it by http://localhost:port/*.png. And after build, the static files in app/assets will be move to the ./dist.