https://github.com/rimsila/next-dev-template
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).
https://github.com/rimsila/next-dev-template
antd cli dev-boilerplate enterprise-applications react-generator-cli umi
Last synced: 4 months ago
JSON representation
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).
- Host: GitHub
- URL: https://github.com/rimsila/next-dev-template
- Owner: rimsila
- Archived: true
- Created: 2021-01-11T08:33:27.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-26T20:32:45.000Z (over 4 years ago)
- Last Synced: 2025-01-13T23:13:07.483Z (5 months ago)
- Topics: antd, cli, dev-boilerplate, enterprise-applications, react-generator-cli, umi
- Language: TypeScript
- Homepage: https://next-dev-template.vercel.app/
- Size: 459 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
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](https://umijs.org/docs#create-react-app) 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.
  [](https://david-dm.org/ant-design/ant-design-pro) [](https://gitter.im/ant-design/pro-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)[](http://umijs.org/) 
# Contents
- [Project Structure](#Structure)
- [Doc and Demo](#Document)
- [Features](#Features)
- [Installations](#Installation)
- [Development / Script](#Development)
- [Generator Antd Pro Templates](#Templates)
- [Custom Generator CLI](#Generator/CLI)
- [Tutorial / Usage](#Tutorial)
- [Contributing](#Contributing)
## Features
[Back Contents](#Contents)
- :bulb: **TypeScript**: A language for application-scale JavaScript
- :scroll: **Blocks**: Build page with block template
- :gem: **Neat Design**: Follow [Ant Design specification](http://ant.design/)
- :triangular_ruler: **Common Templates**: Typical templates for enterprise applications
- :rocket: **State of The Art Development**: Newest development stack of React/umi/dva/antd
- :iphone: **Responsive**: Designed for variable screen sizes
- :art: **Theming**: Customizable theme with simple config
- :globe_with_meridians: **International**: Built-in i18n solution
- :gear: **Best Practices**: Solid workflow to make your code healthy
- :1234: **Mock development**: Easy to use mock development solution
- :white_check_mark: **UI Test**: Fly safely with unit and e2e tests
## Document
[Back Contents](#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](#Contents)
- `Node Js`: required >=10.x: it is a JavaScript runtime environment download [Here](https://nodejs.org/en/download/).
- `Yarn`: is package manager. shouldn't use mixup with npm the same one project.
```bash
$ npm install -g yarn
```
- `serve`: for run production local.
```bash
$ 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).
```bash
$ yarn global add yalc
```
- `yeoman generator`: (required only who want to use CLI auto crete starter template)
```bash
$ yarn global add yo
```
## Development
[Back Contents](#Contents)
use Gitpod, a free online dev environment for GitHub.
[](https://gitpod.io/#https://github.com/rimsila/next-dev-boilerplate)
Or clone locally:
```bash
$ 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](#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
```bash
$ 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](#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
```bash
yarn page
```
- create model / CRUD
```bash
yarn model
or
yarn modelCr
```
- create service / CRUD
```bash
yarn com
```
- create global component / specifics page folder / locale
```bash
yarn com
```
## Structure
[Back Contents](#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](#Contents)
- Modern browsers and Internet Explorer 11 (with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11))
- Server-side Rendering
- [Electron](https://www.electronjs.org/)
| [
](http://godban.github.io/browsers-support-badges/)
IE / Edge | [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari | [
](http://godban.github.io/browsers-support-badges/)
Electron |
| --- | --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## Contributing
[Back Contents](#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](https://github.com/rimsila/next-dev-boilerplate/issues) to report bugs or ask questions.
- Propose [pull requests](https://github.com/rimsila/next-dev-boilerplate/pulls) to improve our code.
## Tutorial
[Back Contents](#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`
```tsx
//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：
```tsx | pure
//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
Log out;
```