Skip to content
This repository was archived by the owner on Nov 17, 2022. It is now read-only.

docs(webpack): add custom application and activity section #1254

Merged
merged 4 commits into from
Jul 17, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,29 @@ The following steps are needed to create custom native `android.app.Application`

>This modification is required by the native platform; it basically tells Android that your custom `Application` class will be used as the main entry point of the application.

4. In order to build the app with [webpack](../../../performance-optimizations/bundling-with-webpack.md), the extended Android application should be added as an [entry](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L71) to the `webpack.config.js` file.

```javascript
entry: {
bundle: entryPath,
application: "./application.android",
},
```

In this way, the source code of [`application.android.ts`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/app/application.android.ts) is bundled separately as `application.js` file which is loaded from the native `Application.java` class on launch.

The `bundle.js` and `vendor.js` files are not loaded early enough in the application launch. That's why the logic in `application.android.ts` is needed to be bundled separately in order to be loaded as early as needed in the application lifecycle.

> Note: This approach won't work if `aplication.android.ts` requires external modules.

## Extending Activity
The core modules ship with a default `android.app.Activity` implementation, which ensures they alone are sufficient to bootstrap an empty NativeScript application, without forcing users to declare their custom `Activity` in every project. When needed, however, users may still specify custom `Activity` implementation and use it to bootstrap the application. The following code demonstrates how this can be done:

1. Create a new JavaScript file in your `app` folder - name it `activity.android.js`
1. Create a new JavaScript file in your `app` folder - name it `activity.android.js`

>Note the `*.android` suffix - we want this file packaged for Android only.

2. Declare the extend:
2. Declare the extend:

```javascript
const frame = require("ui/frame");
Expand Down Expand Up @@ -180,5 +195,17 @@ The core modules ship with a default `android.app.Activity` implementation, whic
android:configChanges="keyboardHidden|orientation|screenSize">
```

4. In order to build the app with [webpack](../../../performance-optimizations/bundling-with-webpack.md), the absolute path to the file where the Android activity is extended should be added to the [`appComponents`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L19) array.

```javascript
const appComponents = [
"tns-core-modules/ui/frame",
"tns-core-modules/ui/frame/activity",
resolve(__dirname, "app/activity.android.ts"),
];
```

In this way and with the default config, these components [get](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L109-L116) in the common *vendor.js* chunk and are required by the [`android-app-components-loader`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L146-L149).

## See Also
* [How Extend Works](../generator/extend-class-interface.md)
4 changes: 4 additions & 0 deletions docs/performance-optimizations/bundling-with-webpack.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,10 @@ function logMessage(message) {
}
```

## Custom Application and Activity

NativeScript provides a way to create custom `android.app.Application` and `android.app.Activity` implementations. Please, refer to [this](../core-concepts/android-runtime/advanced-topics/extend-application-activity) documentation article for a detail description of how to achieve these as well as how to configure and bundle such a project.

## Debugging Common Errors

Webpack bundling can fail for different reasons. It sometimes fails to resolve certain modules, or it generates code that breaks at runtime. We'll try to cover a few common failure reasons with steps to resolve them in the following sections.
Expand Down