Skip to main content


Command to start development build in watch mode


-p, --port

Allows to specify port on which app server will listen requests

tramvai start -p 8080 <app>

React hot refresh


The feature is enabled by default

It is possible to refresh react components without page similar to the way in works in React Native.

Besides fash page refreshes (hot-reload) in that mode state is preserved for hooks useState and useRef.

You can force resetting state by adding comment // @refresh reset to the file. It will reset state for the whole file.

When encounter syntax and runtime errors, fast-refresh plugin will await for the error resolving and after fix will continue to work as usual.


  1. state for class components doesn't preserve
  2. useEffect, useMemo, useCallback refresh on every code change despite their dependency list, it includes empty dependency list as well, e.g. useEffect(() => {}, []) will be executed on every refresh - this is undesirable behaviour but it teaches to write stable code which is resistant for the redundant renders

To enable this mode, add to tramvai.json:

"hotRefresh": {
"enabled": true

You can configure settings with hotRefreshOptions option, see details in the docs of react-refresh:

"hotRefresh": {
"enabled": true,
"options": {
"overlay": false // disable error overlay

Enable sourcemaps in dev mode

In tramvai.json

"sourceMap": {
"development": true

It is equivalent to devtool: 'source-map' in webpack config with source-map-loader.

In addition, it is possible to set one of the following values for the devtool option in webpack config: eval-cheap-module-source-map, eval-cheap-source-map, eval-source-map. For example, to set the option value to eval-cheap-module-source-map, add next lines to the tramvai.json:

"webpack": {
"devtool": "eval-cheap-module-source-map"

Modern build and dev-mode

In dev-mode may work only single build mode: either modern or legacy. By default modern is used. If you want to use legacy build in dev mode, add next lines to the tramvai.json:

"modern": false

How to

Speed up development build

Build only specific bundles

App may contain of many bundles and the more there bundle, the more code get bundled to the app, the more long in building and rebuilding the app during development.

In order to speed up that process when running @tramvai/cli it is possible to specify bundles required for the development and cli will build only that bundles.

Bundles should be placed in directory bundles and should be imported from the index app file.

When trying to request bundle that was disabled, server will fail with status 500, as it is unexpected condition for the server that bundle is missing

tramvai start myapp --onlyBundles=account
# if you need several bundles
tramvai start myapp --onlyBundle=account,trading