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).
- Project Structure
- Doc and Demo
- Features
- Installations
- Development / Script
- Generator Antd Pro Templates
- Custom Generator CLI
- Tutorial / Usage
- Contributing
- π‘ 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
- 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
-
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
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
- 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.
-(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
-
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
![]() IE / Edge |
![]() Firefox |
![]() Chrome |
![]() Safari |
![]() Electron |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
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.
useRequest + nextRequest( Custom Axios)
: useRequest with ahook provided loading refetch,data,onSuccess, onError etc andnextRequest
it a utilize base onAxios
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>;