Welcome to Next-dev-Boilerplate

An out-of-box UI solution for enterprise applications as a React boilerplate using React 17x, typescript 4x, umi 3x antd 4.x ,ahooks , antd pro-component and @next-dev library (core/component/hooks/provider).

An out-of-box UI solution for enterprise applications as a React boilerplate.

Contents

• Project Structure
• Doc and Demo
• Features
• Installations
• Development / Script
• Generator Antd Pro Templates
• Custom Generator CLI
• Tutorial / Usage
• Contributing

Features

Back Contents

• 💡 TypeScript: A language for application-scale JavaScript
• 📜 Blocks: Build page with block template
• 💎 Neat Design: Follow Ant Design specification
• 📐 Common Templates: Typical templates for enterprise applications
• 🚀 State of The Art Development: Newest development stack of React/umi/dva/antd
• 📱 Responsive: Designed for variable screen sizes
• 🎨 Theming: Customizable theme with simple config
• 🌐 International: Built-in i18n solution
• ⚙️ Best Practices: Solid workflow to make your code healthy
• 🔢 Mock development: Easy to use mock development solution
• ✅ UI Test: Fly safely with unit and e2e tests

Document

Back Contents

• next-dev-boilerplate Preview: https://next-dev-boilerplate.vercel.app the every first time it will slow and it will remove photo except db we store on MLab and token because we use Heroku as free services.
• next-dev library(processing): https://rimsila.github.io/next-dev/
• Antd Pro Preview: https://preview.pro.ant.design/
• Antd Pro Documentation: http://pro.ant.design/docs/getting-started -Antd Pro FAQ: http://pro.ant.design/docs/faq

Installation

Back Contents

• Node Js: required >=10.x: it is a JavaScript runtime environment download Here.

• Yarn: is package manager. shouldn't use mixup with npm the same one project.

    $ npm install -g yarn

• serve: for run production local.

    $ yarn global add serve

• Yalc: (required only who want to develop library see in .yalc folder) for develop npm library local and it separate project library (next-dev).

    $ yarn global add yalc

• yeoman generator: (required only who want to use CLI auto crete starter template)

    $ yarn global add yo

Development

Back Contents

use Gitpod, a free online dev environment for GitHub.

Or clone locally:

$ git clone https://github.com/rimsila/next-dev-boilerplate.git
$ cd next-dev-boilerplate

# install project node_module
$ yarn install

#  start development
$ yarn start

Open your browser and visit http://127.0.0.1:9000 or http://localhost:9000

Templates

Back Contents

- Dashboard
  - Analytic
  - Monitor
  - Workspace
- Form
  - Basic Form
  - Step Form
  - Advanced From
- List
  - Standard Table
  - Standard List
  - Card List
  - Search List (Project/Applications/Article)
- Profile
  - Simple Profile
  - Advanced Profile
- Account
  - Account Center
  - Account Settings
- Result
  - Success
  - Failed
- Exception
  - 403
  - 404
  - 500
- User
  - Login
  - Register
  - Register Result

• Usage Template

$ yarn create umi  # or npm create umi

  # Choose ant-design-pro:
  Select the boilerplate type (Use arrow keys)
  ❯
    block           - Create a umi block.
    library         - Create a library with umi.
    plugin          - Create a umi plugin.

Generator/CLI

Back Contents

-(coming soon)

• we using Yeoman generator for build different React components, creating a skeleton for the different files.

  • create page with auto config route / page access / locale

      yarn page

  • create model / CRUD

      yarn model
          or
      yarn modelCr

  • create service / CRUD

    yarn com

  • create global component / specifics page folder / locale

    yarn com

Structure

Back Contents

Next-Dev-Boilerplate
|
├── config -- Configuration files (routes, themes, plugins, etc.)
│    └── plugin.config.ts --Plug-in configuration (such as less merge, unpacking)
│    └── router.ts --Routing configuration (route, access page etc.)
│    └── theme.config.ts --Theme configuration
│    └── defaultSettings.ts - layout (theme color, title, whether to enable pwa, icon remote ,address)
|
├── src
│    ├── components
│    │   │
│    │   ├── global -- For global component like button, tabs etc.
│    │   │      └── Button
│    │   │            ├──  index.tsx
│    │   │            └── SubButton.tsx
│    │   │
│    │   └── pages -- Components for specific page also can share for another page
│    │   │    ├── auth
│    │   │    │    └── login
│    │   │    │         └── index.tsx
│    │   │    │         └── subLogin
│    │   │    │                └── SubLogin.tsx
│    │   │    └── dashboard
│    │   │            └── index.tsx
│    │   │            └── useDashBoard.tsx -- can use inline custom hook for logic
│    │   │            └── report
│    │   │                  └── SubReport.tsx
│    │   └──index.ts -- export both components and pages as global share
│    │
│    └── hooks -- common custom hook (router etc )
│    └── utils --common utilize (request,func, also extend from @next-dev/core)
│    └── locales-- i18n localization (common locale can extend from @next-dev/provider)
│    └── typings.d.ts -- global type for whole project
│    └── themes -- style variable, mixin (can extend from @next-dev/component/styles)
│    └── constants -- all constants common use here (env , routeApi, routePath)
│    └── assets --resource file (image,font etc.)
│    └── global.less -- global style file (will be automatically use)
│    │
│    └── pages -- import page from component/pages it already dynamic import in config
│    │      ├── document.ejs -- the same CRA public/index.html
│    │      ├── login
│    │      ├── dashboard
│    │      └─ 404.tsx --page not found
│    │
│    └── models -- global model start with useName (context with selector avoid re-render)
│    └── services -- all api services here (services/userApi.ts)
│    └── e2e -- e2e test
│    └── app.tsx -- Root app but work only runtime (init core / provider / initGlobal State /layout)
│    └── access.ts -- authority role permission to page
│    └── wrappers -- is a HOC we use in route.ts
│
└── .umirc.ts -- Project Configuration also import from config
└── tsconfig.jsons -- config for ts compile
└── .env

🖥 Environment Support

Back Contents

• Modern browsers and Internet Explorer 11 (with polyfills)
• Server-side Rendering
• Electron

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Contributing

Back Contents

Any type of contribution is welcome, here are some examples of how you may contribute to this project:

• Use Ant Design Pro in your daily work.
• Submit issues to report bugs or ask questions.
• Propose pull requests to improve our code.

Tutorial

Back Contents

State Management / useRequest + Axios

• useRequest + nextRequest( Custom Axios): useRequest with ahook provided loading refetch,data,onSuccess, onError etc and nextRequest it a utilize base on Axios it include global handler error and success, refresh token, global auth header, etc.
  • Example

//services/global.d.ts
export type IRegister = {
  email: string;
  password: string;
};

//services/users.ts
import { httpRequest } from '@/utils/httpRequest';

export const usersApi = {
  register: (data: IRegister) => nextRequest.post("user/register, data),
};

//see the usage in Global State section

• Global State

  • useModel must be inside folder model: it is a custom hooks that provide developer the ability to consume hooks model as global state and it can better performance with re-render on demand by it will select only what we need see the example bellow：

//models/useAuth.tsx see full example in folder model
export default function useAuthModel() {
  /**
   * register then redirect to login page
   */

  // * ------------ request async --------------
  const {
    run: runRegister, // call func with param of register api
    data: registerData,
    loading: loadingRegister, //loading
    refresh: refreshRegister, // re-call runRegister
  } = useRequest(usersApi.register, {
    manual: true, // call runRegister manual
    onSuccess: (res) => {
      if (res?.status === 1) {
        history.push('/login');
      }
    },
  });

  // * ------------ onSubmitRegister --------------
  const onSubmitRegister = (value: any) => {
    const registerModel = {
      fullName: value?.user,
      email: value?.email,
      password: value?.password,
      confirmPassword: value['confirm-password'],
    };
    runRegister(registerModel);
  };

  return {
    onSubmitRegister,
    registerData,
    loadingRegister,
  };
}

//page/register.tsx
import { useModel } from 'umi';

/** @note
 *  useModel(name of file in model folder)
 *  for better performance should user updater function (like redux-selector) like bellow it will select
 *  only what we need to re-render on demand
 */
const { loadingRegister, logOut } = useModel('useAuth', (model) => ({
  loadingRegister: model.loadingRegister,
  logOut: model.logOut,
}));

//usage in component
console.log(loadingRegister);
//output: false->true->false
<Button onClick={logOut}>Log out</Button>;