Bootstrap and runtime

Tracing what happens between the browser fetching index.html and a fully rendered Grafana UI.

HTML and assets

The Go server renders public/views/index.html at request time, embedding a JSON window.grafanaBootData blob produced by pkg/api/frontendsettings.go. This blob carries:

• The current user (SignedInUser projected to JSON).
• Feature toggles.
• Theme.
• Configured datasources.
• Plugin metadata (loaded but not yet executed).
• Runtime URLs (panels asset path, app sub URL).

Webpack-generated bundles (runtime.js, app.js, vendor chunks) are loaded after.

TypeScript bootstrap

graph TD
    HTML[index.html<br/>+ grafanaBootData] --> Index[public/app/index.ts]
    Index --> InitRuntime[Initialize @grafana/runtime config]
    Index --> InitTheme[Initialize theme]
    Index --> Bootstrap[GrafanaApp.init]
    Bootstrap --> Store[Configure Redux store]
    Bootstrap --> Locale[Load i18n catalog]
    Bootstrap --> Auth[Initialize auth state]
    Bootstrap --> NavTree[Fetch navTree]
    Bootstrap --> Plugins[Preload auto-enabled apps]
    Bootstrap --> Mount[ReactDOM render <AppWrapper/>]

public/app/index.ts is the literal first file. It:

1. Polyfills (whatwg, abort).
2. Calls setBootData and setEchoSrv and other @grafana/runtime setters with the values from grafanaBootData.
3. Imports app.ts and creates a GrafanaApp instance.
4. Calls GrafanaApp.init() which kicks off the rest.

public/app/app.ts sets up the Redux store, registers all reducers, configures RTK Query middleware, calls into i18n init, and asks the router to mount.

public/app/AppWrapper.tsx is the React entry — it composes <Provider store>, <I18nProvider>, <ThemeProvider>, <Router>, and the global <AppChrome>.

Routes

Top-level routes are declared in public/app/routes/routes.tsx. Each entry typically uses React.lazy + <Suspense> so feature bundles are code-split.

Runtime services

The @grafana/runtime package exposes a set of global services that bootstrap fills in:

• config: GrafanaBootConfig — frozen at boot time.
• getBackendSrv() — fetch wrapper.
• locationService — react-router shim.
• getDataSourceSrv() — datasource lookup.
• getTemplateSrv() — variable interpolation.
• getAppEvents() — legacy event bus.
• usePluginExtensions, usePluginLinks — plugin extension hooks.

Setters live next to the getters (setBackendSrv, setDataSourceSrv, …) and are called only during bootstrap.

Theme

The theme is determined by the user preference and resolved to a GrafanaTheme2 object from @grafana/data. useTheme2() and useStyles2(getStyles) are how components consume it. The <ThemeProvider> listens for theme changes and re-renders.

i18n

Catalog files live under public/locales/<locale>/grafana.json. The @grafana/i18n package wraps i18next and provides <Trans> and t(). New strings are extracted with make i18n-extract.

Echo (analytics)

@grafana/runtime's EchoSrv is an internal analytics dispatcher. Backends are pluggable (Sentry, GA, custom). Configured via [analytics] in the server.

Hot reload

yarn start runs webpack --watch with React Fast Refresh. Most edits do not unmount components; routing and Redux state survive HMR. Some routes (legacy Angular code paths) require a full reload.

See also

• Routing
• State management
• Core
• Packages / runtime