Back to Blog Home
← all posts

Updates in the NativeScript CLI 6.0: Bundle Workflow, Webpack-only, and HMR by default

July 25, 2019 — by Stanimira Vlaeva

NativeScript 6.0 is webpack-only! The NativeScript CLI now relies on webpack to build your application code.

Before

Before version 6.0, NativeScript supported two ways of building a project:

  • tns build - The Legacy Workflow, which copies the full content of the source code directory ("src/");

  • tns build --bundle - The Bundle Workflow, which relies on webpack to bundle the source code directory ("src/") into a few output files.

The bundle workflow was available behind the bundle flag. You could use it not only for building but also during development:

tns run --bundle
tns preview --bundle
tns debug --bundle
tns test --bundle

The bundle workflow also supported hot module replacement with the hmr flag.

tns run --bundle --hmr

Webpack-only

Starting with version 6.0, the NativeScript CLI will support only the bundle workflow with webpack. The legacy workflow is no longer available. All CLI commands that build the application code now use the bundle workflow:

tns build
tns run
tns preview
tns prepare
tns debug
tns test

The bundle flag

You can still provide the bundle flag to any of the above commands. It won't change their behavior in any way. However, you can't switch off the bundle flag and you can't disable the bundle workflow.

The sync-all-files flag

The sync-all-files flag is no longer available. Providing it used to enable watching the node_modules directory for changes and syncing it during development. With the bundle workflow, this is automatically taken care of. The workflow of watching files is:

  1. Webpack watches all files that have been required in the source code regardless of their location (app or node_modules);

  2. The NativeScript CLI starts its own watch for the native files:

    • files from App_Resources
    • platforms directories of nativescript plugins
    • package.json files of nativescript plugins

  3. The NativeScript CLI also watches the application package.json files (my-project/package.json and my-project/app/package-json).

Hot Module Replacement by default

Hot Module Replacement is now enabled by default. The following commands now work with HMR:

tns run
tns preview
tns debug [android|ios]

You can disable Hot Module Replacement with the no-hmr flag:

tns run --no-hmr
tns preview --no-hmr
tns debug [android|ios] --no-hmr

The NativeScript team strongly recommends using hot module replacement during application development. HMR can significantly reduce the reload time between changes and improve your development experience.

For more information about HMR in NativeScript, check out the "deep dive" blog post series.

Building in production mode

Webpack has two compilation modes - development and production. The default mode is development.

Before NativeScript 6.0, providing the env.uglify flag used to enable the production mode.

# Webpack builds in production mode
tns build --bundle --env.uglify

In NativeScript 6.0, providing the release flag enables the production mode. The env.uglify flag does not change the compilation mode anymore. It only tells webpack to minimize the bundle using the TerserPlugin.

# Webpack builds in production mode
tns build --release --keyStorePath ~/my.keystore --keyStorePassword myPass --keyStoreAlias myAlias --keyStoreAliasPassword myAliasPass

# Webpack builds in development mode
tns build --bundle --env.uglify

nativescript-dev-webpack 1.0

nativescript-dev-webpack is the package containing all build logic related to webpack. Every NativeScript 6.0 project needs to depend on that package, which now has its first stable version - 1.0!

Hooks

The nativescript-dev-webpack package plugs into the NativeScript CLI build using hooks. Migrating the CLI to the bundle workflow required changes to hooks API. Some of them may be breaking for NativeScript plugins. For more information, check out the blog post on Migrating CLI hooks to NativeScript 6.0.