mirror of
https://github.com/NetEase/tango.git
synced 2026-09-21 05:43:16 +08:00
135 lines
3.4 KiB
Plaintext
135 lines
3.4 KiB
Plaintext
# App Entry
|
|
|
|
The framework creates and renders the entire application through `runApp`, and global configurations of the application can be passed in during the creation of the application.
|
|
|
|
## Configuration
|
|
|
|
Configure the application globally through `src/index.js`, set up routes, runtime environment, service functions, state models, and more.
|
|
|
|
```js
|
|
import { runApp, tangoBootConfig } from '@music163/tango-boot';
|
|
import { message } from '@music163/antd';
|
|
|
|
// Configure the default display method for error messages that occur during requests, using the message component to display the message overlay.
|
|
tangoBootConfig.toast = message;
|
|
|
|
runApp({
|
|
// boot config
|
|
boot: {},
|
|
|
|
// container components
|
|
providers: [],
|
|
|
|
// store instances
|
|
stores: {},
|
|
|
|
// service functions
|
|
services: {},
|
|
|
|
// route config
|
|
router: {},
|
|
});
|
|
```
|
|
|
|
## App Boot
|
|
|
|
The `boot` configuration item is used for the startup configuration of the application.
|
|
|
|
```js
|
|
runApp({
|
|
boot: {
|
|
// react-dom mount element
|
|
mountElement: document.querySelector('#root'),
|
|
|
|
// enable qiankun micro-app support, `qiankun: { appName: string }`
|
|
qiankun: false,
|
|
},
|
|
});
|
|
```
|
|
|
|
## Route Config
|
|
|
|
`router` configuration item is used to configure the front-end routing of the application, which is implemented based on `react-router`.
|
|
|
|
```js
|
|
import routes from './routes';
|
|
|
|
runApp({
|
|
router: {
|
|
// 路由类型: hash | browser
|
|
type: 'hash',
|
|
|
|
// 路由配置信息
|
|
config: routes,
|
|
|
|
// basename,
|
|
},
|
|
});
|
|
```
|
|
|
|
TangoBoot uses the [Static Routing Configuration Scheme](https://github.com/remix-run/react-router/tree/v5/packages/react-router-config) of ReactRouter. The specific routing configuration file is as follows:
|
|
|
|
```js
|
|
// routes.js
|
|
import Index from './pages/index';
|
|
import About from './pages/about';
|
|
|
|
const routes = [
|
|
{
|
|
path: '/',
|
|
exact: true,
|
|
component: Index,
|
|
},
|
|
{
|
|
path: '/about',
|
|
component: About,
|
|
},
|
|
{
|
|
path: '/user/:id',
|
|
component: About,
|
|
},
|
|
];
|
|
|
|
export default routes;
|
|
```
|
|
|
|
## Container Components
|
|
|
|
Sometimes, you may want to wrap the root component with specific container components such as multi-language configuration, state container, etc. Since `runApp` encapsulates the rendering logic of the root component, you can use the `providers` configuration option.
|
|
|
|
```js
|
|
runApp({
|
|
// Wrap the instance of the providers component in the order in which it is passed in.
|
|
providers: [<ConfigProvider />, <LocaleProvider />],
|
|
});
|
|
```
|
|
|
|
## Environment Variables {#env}
|
|
|
|
Sometimes you may need to customize some environment variables to quickly determine when the application is running in different environments. You can use `tango.env` to quickly obtain the application's environment information. It should be noted that by default there will be no environment information, and you can set the desired environment variables by passing `getEnv` in `runApp` when needed.
|
|
|
|
For example:
|
|
|
|
```js
|
|
runApp({
|
|
// You can return an object with the environment information of the custom application.
|
|
getEnv() {
|
|
if (location.origin.includes('tango')) {
|
|
// tango designer
|
|
return 'development';
|
|
}
|
|
if (location.origin.includes('localhost')) {
|
|
// local environment
|
|
return 'local';
|
|
}
|
|
return 'production';
|
|
},
|
|
});
|
|
```
|
|
|
|
Consume environment variables anywhere, for example:
|
|
|
|
```jsx
|
|
<Box isRender={tango.env === 'development'}>A box only render in development environment</Box>
|
|
```
|