Runtime Config

Why runtime configuration?

We do compile-time configuration via .umirc.js. These does cover most of the scenarios, but some are hard to achieve at compile time.

Such as´╝Ü

  • Display message prompts to the user if error occurs.
  • Show loading states when loading and navigating between routes.
  • Fire request to backend when page is loaded, then modify the routes based on response.

These are difficult or even impossible to handle at compile time.

Configuration

umi convention is that src/app.js is the configuration file.

+ src
  - app.js      # runtime configuration file
- package.json

Available Configurations

patchRoutes

Used to modify routes at runtime.

Parameters´╝Ü

  • routes: Array´╝îrouting configuration

e.g. Add route to /foo´╝î

export function patchRoutes(routes) {
  routes[0].unshift({
    path: '/foo',
    component: require('./routes/foo').default,
  });
}

Usecases:

  • Used with render to request data from the server and dynamically update the route based on the response.
  • Modify all routes, by adding a prefix.
  • ...

Note´╝Ü

  1. The same applies to agreed routing. (NOTE not really sure what that means)
  2. Mutate routes directly´╝îdo note return new route objects

render

Used to override the rendering of entire app to the DOM.

Parameters´╝Ü

  • oldRender´╝î Function´╝îthe initial render function´╝îneeds to be called at lease once.

e.g. Delay rendering of the app by 1s,

export function render(oldRender) {
  setTimeout(oldRender, 1000);
}

Usecases´╝Ü

  1. Check permissions before rendering the app. Show login if not authorized.

onRouteChange

Used on initial load and route changes.

Parameters´╝Ü

  • Object
    • location´╝ÜObject, provided by history
    • routes: Array, routing configuration
    • action: PUSH|POP|REPLACE|undefined´╝îundefined on first load.

e.g.

export function onRouteChange({ location, routes, action }) {
  bacon(location.pathname);
}

Usecases´╝Ü

  1. Navigation analytics.

Note´╝Ü

  1. Also runs on the first load´╝îbut action is undefined

rootContainer

Used to wrap the root container´╝îyou can take a part, or a layer outside and so on.

Parameters´╝Ü

  • container´╝îReactComponent´╝îReact application root component

e.g.

export function rootContainer(container) {
  const DvaContainer = require('@tmp/DvaContainer').default;
  return React.createElement(DvaContainer, null, container);
}

Usecases´╝Ü

  1. dvaŃÇüintl, etc. need to have Provider in the outer layer.

modifyRouteProps

Modify the props passed to the routing component

Parameters´╝Ü

  • props´╝îObject´╝îoriginal props

  • Object

    • route´╝îObject´╝îcurrent routing configuration

e.g.

export function modifyRouteProps(props, { route }) {
  return { ...props, foo: 'bar' };
}

Note´╝Ü

  1. Has to return new props
Last Updated: 3/11/2019, 11:05:21 AM