Skip to main content

start

Command to start development build in watch mode

Options​

-p, --port​

Allows to specify port on which app server will listen requests

tramvai start -p 8080 <app>

React hot refresh​

info

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.

Constraints:

  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