Ant deisgn 5 template

React admin panel with Ant design 5.

Key Features • How To Use • How To Use • Application Structure • License

Key Features

🔥 Built with Vite but extendable
- for vite configuration, use vite.config.ts file.
📈 Use Zustand store, less boilerplate. See store
💙 Ant Design
- Localized Ant Design Component for better multilingual support
👮 Eslint and Prettier configured with git hooks
- Eslint and prettier configured together for auto save format and error checks
- No git commit allowed if errors and warnings are present
🙌 Global HTTP error and auth handler. See services
💅 Styled Components and more goodies on styles
⚡ Codesplitting
- Native React Lazy loaded pages/components with Suspense
- Custom loader animation added
🔠 Multilingual. See config
🎨 Less and Bootstrap utility classes. See styles
🚀 Develepment scope based App config file for deployment. See .env file

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. Recommended to use Yarn for the project.

From your command line:

# Clone this repository
$ git clone repo-link

# Clone this repository
$ git clone repo-link

# Go into the repository
$ cd Ant_5_admin_template

# Install dependencies
$ yarn install or npm i

# Run the app for development scope
$ yarn dev (for development env file naming convention will be env.development)

# Run the app for development scope
$ yarn stage (for staging env file naming convention will be env.staging)

# Run the app for production scope
$ yarn start (for production env file naming convention will be env.production)

# Build the app
$ yarn build

# Serve the app
$ yarn start

Environment scope

For development
- VITE_APP_ENVIRONMENT=development
- VITE_APP_BACKEND_URL={{dev backend url}}
For staging
- VITE_APP_ENVIRONMENT=staging
- VITE_APP_BACKEND_URL={{stage backend url}}
For production
- VITE_APP_ENVIRONMENT=production
- VITE_APP_BACKEND_URL={{production backend url}}

Application structure

The directory layout of this boilerplate

.
├── .vscode                 # Vscode config, for autoformat on save.
├── build                   # After running the build command the build files get put here
├── node_modules            # NPM dependency folder
├── public                  # Reacts public folder for the html and static assets
├── src                     # Source directory for the React Application
├── src                     # Source directory for the React Application
│   │
│   ├── assets                # Static assets folder for the global scope. Example: images, icons, fonts etc.
│   ├── components            # Typical React component folder but only for global components.
│   ├── features              # Features pattern folder for Application features (More details inside the folder)
│   ├── language              # Multi lingual configuration
│   ├── hooks                 #React custom hooks
│   ├── pages                 # Pages component folder
│   ├── router                # Application navigation/routing config (More details inside the folder)
│   ├── services              # Folder for services like custom axios instance, analytics etc.
│   ├── store                 # Application Redux store
│   ├── style                 # Custom SC components, CSS, less utilities
│   └── App.jsx              # Entry component for the React App.
│
├── vite.config.js         # Extend Esbuild config
├── jsconfig.json           # Adjust file paths to use absolute file path for React
├── package.json            # The NPM config file for all the packages installed and scripts and more
├── .env                    # Store API Url, Secret API keys etc
├── .eslintrc               # Configure Eslint
├── .eslinignore            # ignore certain files for Eslint
├── .gitignore              # ignore certain files for git (example: .env)
├── .prettierrc             # Configure prettier (example: .env)
└── .prettierignore         # ignore certain files for Prettier

Credits

This software uses the following open source packages:

Deployement Instruction

RUN ./build.sh

SERVER static file from build folder

aumi364 / Ant_5_admin_template