huanlv94/admin-template-for-react

:earth_asia: Admin template for React, React Redux, Redux Saga, React Router, i18n and integrated OAuth login

Admin Template for React

DEMO - Type any account to log in

A starter admin template with React, React Redux, Material UI and TypeScript that packages using Webpack and integrates a minimal project structure.

Classic Layout

Popular Layout

• AJAX component: axios
• UI component: material-ui
• REACT stack: react, react-dom, react-redux, react-router-config, react-router-dom, redux, redux-saga, react-intl-universal

❯ Getting Started

1. Clone repo git clone <git-url>
2. npm install to install all dependencies
3. npm start to start web server or npm run build to build production code into dist folder

❯ Development

Application Configuration Examples

• ./src/config/app.common.tsx - all common configurations
• ./src/config/app.dev.tsx - configurations used in local
• ./src/config/app.prod.tsx - configurations used in production
• ./src/config/app.github.tsx - example for github authorization
• ./src/config/app.auth-code.tsx - example for authorization code grant type
• ./src/config/app.auth-password.tsx - example for password grant type
• ./src/config/app.mock.tsx - just for local development without login system

Customize more environments

1. New file ./src/config/app.[env_name].tsx to override your configurations

2. Recommend to import configurations in app.dev.tsx

   import config = require('./app.your-env');

   Or add below code in ./src/config/index.tsx or ./index.html to freeze your environment

   window.__APP_ENV__ = 'your-env';

3. npm start and npm run build will always use the environment you defined

Components based on Material UI or some else

Alert, Loading, MiniCard, Notifier, Overlay, Panel, Tag, DataTable, ...

i18n/l10n Support

import * as intl from 'react-intl-universal';

const message = intl.get('i18nKey');

Available Services

• import { service as resourceService } from "app/service/resource"; to call APIs which has appended access token in request header
• import { getState as getAuthState } from "app/service/auth"; to get current user information

Debug with Chrome in Visual Studio Code

1. Requires Visual Studio Code as IDE and extension Debugger for Chrome

2. npm start to run application

3. Click menu Debug > Start Debugging to debug with generated .vscode/launch.json file as below:

   {
       "version": "0.2.0",
       "configurations": [
           {
               "type": "chrome",
               "request": "launch",
               "name": "Launch Chrome against localhost",
               "url": "http://localhost:8080",
               "webRoot": "${workspaceFolder}"
           }
       ]
   }

4. Set breakpoints in your vscode and operate in the new Chrome window Start Debugging opened

Recommendatory extensions for Chrome

• React Developer Tools
• Redux DevTools

Above extensions will show you the Actions, States and Reducers in Chrome console.