# 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