[![Contributors][contributors-shield]][https://github.com/falloutchonny/cra-template-antd-admin/graphs/contributors] [![Forks][forks-shield]][https://github.com/falloutchonny/cra-template-antd-admin/network/members] [![Stargazers][stars-shield]][https://github.com/falloutchonny/cra-template-antd-admin/stargazers] [![Issues][issues-shield]][https://github.com/falloutchonny/cra-template-antd-admin/issues] [![MIT License][license-shield]][https://github.com/falloutchonny/cra-template-antd-admin/license]

The antd+TS, tailwindcss, styled-components, react-router, react-query template for Create React App

An awesome cra template to jumpstart your projects!
Explore the docs »

View Demo · Report Bug · Request Feature

![Product Name Screen Shot][product-screenshot]

This is a Create React App template that integrates many tools and libs, it can let you start the development work directly and quickly without trivial steps to set up your project.

• ant design

  • a example page for basic CRUD actions.
  • basic layouts (these layouts do not contain any custom styles, you can easily adjust it to what you want.)

• craco for extend webpack config provided by create-react-app without eject

  • absolute import path with @ prefix, such as:

    • @pages/Home
    • @hooks/useModal
    • @components/Layout

  • webpack-bundle-analyzer - generate a interactive zoomable treemap to reivew your bundle.

    • usage: ANALYZE=true craco build

  • babel-plugin-import - only boundle the styles and components of antd that used by the app.

  • babel-plugin-styled-components

    • purge unused styles
    • support css props in native html tag.

• prettier

  • pre-commit hook with husky, lint-staged, this can re-format your files that are marked as “staged” via git add before you commit.

• tailwindcss

  • building layouts freely.
  • purge enabled.

• styled-components

  • building custom components.
  • overriding antd component styles.

• react-router

  • The route setting has been written in lib/routes, which is provided to Sider, App or any other components.

• react-query - Fetch, cache and update data

To use this template, add --template antd-admin when creating a new app.

• node
• npm or yarn

npx create-react-app my-app --template antd-admin

# or

yarn create react-app my-app --template antd-admin

It will create a directory called my-app inside the current folder.

Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── img
│   │   ├── 403.svg
│   │   ├── 404.svg
│   │   ├── 500.svg
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── components
    │   ├── common
    │   │   ├── Layout.tsx			- basic page layout
    │   │   ├── Loading.tsx			- loading indicator
    │   │   └── Modal.tsx			- global modal
    │   ├── icons			    	- custom/extend icons
    │   │   ├── Add.tsx	
    │   │   └── Edit.tsx
    │   ├── ui                      - should be atomic and pure, like Button, Select, Tabs
    │   │   ├── Header.tsx			- the navbar of app
    │   │   └── Sider.tsx			- the left sider of app
    │   ├── ErrorBoundary.tsx 		- handling react errors
    │   └── Exception.tsx    		- feed back the 404/403/500 results
    ├── hooks
    │   ├── useModal.ts				- react hook for simplify the interaction with Modal
    │   └── useTableRowSelection.ts - react hook for simplify the interaction with Table
    ├── lib
    │   ├── queryClient.ts			- create a query client for react-query provider
    │   ├── routes.ts				- global route setting
    │   ├── types.ts				- types about data fetching
    │   └── useQuery.ts				- react-query's useQuery wrapper
    ├── pages
    │   ├── Home					- basic table list, CRUD example page
    ├── utils
    │   ├── env.ts					- app config such as `api url`, `app basename`
    │   ├── form.ts					- antd form helpers	
    │   ├── history.ts				- global history
    │   ├── request.ts				- simple custom fetch wrapper
    │   └── webHelper.ts			- util functions
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── serviceWorker.js
    └── setupTests.js

See the open issues for a list of proposed features (and known issues).

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Distributed under the MIT License. See LICENSE for more information.

Chonny Chu - [email protected]

Project Link - https://github.com/FallOutChonny/cra-template-antd-admin

• Ant-Design
• Create-React-App