I'm trying to make a React Native android bundle and it works fine with --dev true but the following command hangs with --dev false
# this works
node --expose-gc --max_old_space_size=4096 ./node_modules/react-native/local-cli/cli.js bundle --verbose --platform android --dev true --reset-cache --entry-file index.js --bundle-output /usr/src/app/android/app/src/main/assets/index.android.bundle --assets-dest /usr/src/app/android/app/src/main/res/
# this freezes
node --expose-gc --max_old_space_size=4096 ./node_modules/react-native/local-cli/cli.js bundle --verbose --platform android --dev false --reset-cache --entry-file index.js --bundle-output /usr/src/app/android/app/src/main/assets/index.android.bundle --assets-dest /usr/src/app/android/app/src/main/res/
I've already tried adding the --verbose argument but the output is pretty brief
warning: the transform cache was reset.
Loading dependency graph, done.
Is there any way to get more information from the bundler? Or is the only way to do some printf debugging in the bundler.
FYI, i was hoping to reproduce the same problem using Haul but the Haul build passes with the following:
'./index.js 1:275593-275611\nCritical dependency: the request of a dependency is an expression\n ...
'asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).\nThis can impact web performance.\nAssets: \n ../assets/index.android.bundle (1.57 MiB)',
'entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.\nEntrypoints:\n main (1.57 MiB)\n ../assets/index.android.bundle\n',
'webpack performance recommendations: \nYou can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.\nFor more info visit https://webpack.js.org/guides/code-splitting/'
The issue was that I was running the build in a Docker container which was running on Hyperkit on my Mac. Hyperkit was created via command line with a 2G memory limitation which explains why the build would keep running until it hit the 2G memory limit and then fail silently.
Related
I'm creating a bundle release in react native android. I create an apk using "assembleRelease" I tested the assets are there but when I try to bundle in "bundleRelease" there's no asset.
The image show that my assets directory.
This is my index.android.bundle. The BGAppPros is automatically generated.
In my android/app/build.gradle
code looks like this. I have a feeling this is the culprit " resourcesDirRelease "
In short I want an offline assets. but the bundle release is ibcompiled correctly.
project.ext.react = [
entryFile: 'index.js',
bundleInRelease : true,
resourcesDirRelease : 'src/release/res',
]
I solved my problem you need also check you'r script
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
make sure its the right path when you calling the
resourcesDirRelease : 'src/release/res',
Thank you, thank you, thank you for sharing your Nativescript expertise. I'm pretty stuck
I'm really trying. I'm searching and trying for last couple days to get a simple Nativescript demo app to run in VS Code debugger and break.
I have my dev environment fully setup. I can build and run Nativescript demo apps in VS Code as long as I don't try to use the debugger.
Here is my tns doctor output. You can see I have it all setup correctly.
I'm only doing Android for now. Ignore the tns-ios update.
I have my launch.json setup like this...
{
"name": "Launch on Android",
"type": "nativescript",
"request": "launch",
"platform": "android",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": true,
"tnsArgs": [
"--debug",
"--bundle"
]
},
I've added this line to my webpack.config.js...
devtool: "eval-source-map",
And so far, above is all I can find on how to get Nativescript app debugging working in VS Code. What am I missing? Here is what I get in VS Code debug output when I try to do Launch on Android. Link is to Pastebin...
Nativescript VSCode 'Launch on Android' debug output
EDIT 2/3 console output after running commands in first comment...
[NativeScriptCli] execute: tns --analyticsClient VSCode --version
[NativeScriptCli] execute: tns --analyticsClient VSCode --version
[NSDebugAdapter] Using tns CLI v5.1.1 on path 'tns'
[NSDebugAdapter] Running tns command...
[NativeScriptCli] execute: tns --analyticsClient VSCode debug android --watch --bundle
[NSDebugAdapter] Watching the tns CLI output to receive a connection token
Searching for devices...
Executing before-watchPatterns hook from C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\hooks\before-watchPatterns\nativescript-dev-webpack.js
Executing before-watch hook from C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\hooks\before-watch\nativescript-dev-webpack.js
Running webpack for Android...
Bundling application for entryPath .\app...
C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:453
throw err;
^
Error: EPERM: operation not permitted, scandir 'C:/Users/markd/Documents/code-projects/nativescript/blank-vue-app/platforms/android/app/src/main/assets/app/App_Resources/Android/drawable-mdpi/background.png'
at Object.readdirSync (fs.js:786:3)
at GlobSync._readdir (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:288:41)
at GlobSync._readdirInGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:267:20)
at GlobSync._readdir (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:276:17)
at GlobSync._processReaddir (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:137:22)
at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:132:10)
at GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:380:10)
at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10)
at GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:383:10)
at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10)
at GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:383:10)
at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10)
at GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:383:10)
at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10)
at new GlobSync (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:48:10)
at Function.globSync [as sync] (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:26:10)
at Function.rimrafSync [as sync] (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\rimraf\rimraf.js:280:22)
at C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\clean-webpack-plugin\index.js:166:16
at Array.forEach ()
at CleanWebpackPlugin.clean (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\clean-webpack-plugin\index.js:92:15)
at CleanWebpackPlugin.apply (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\clean-webpack-plugin\index.js:212:20)
at webpack (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack\lib\webpack.js:47:13)
at processOptions (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:441:16)
at yargs.parse (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:536:3)
at Object.parse (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\yargs\yargs.js:567:18)
at C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:219:8
at Object. (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:538:3)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object. (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack\bin\webpack.js:155:2)
at Module._compile (internal/modules/cjs/loader.js:689:30)
[31;1mExecuting webpack failed with exit code 1.[0m
[31;1mCannot read property 'kill' of undefined[0m
tns debug
Description
Initiates a debugging session for your project on a connected device or native emulator. When necessary, the command will prepare, build, deploy and launch the app before starting the debug session. While debugging, the output from the application is printed in the console and any changes made to your code are synchronized on all connected devices or running emulators.
Commands
┌─────────┬─────────────────────┐
│ Usage │ Synopsis │
│ General │ $ tns debug android │
└─────────┴─────────────────────┘
If you aren't getting Chrome debugger to work, you won't get any better results with VS Code, since it uses the same protocol.
I assume you have nativescript-dev-webpack included in your 'devDependencies' block of your package.json?
If not, npm install --save-dev nativescript-dev-webpack
then, tns debug android should prompt you with the URL for the chrome debugger connection, and from there you should be able to set a breakpoint somewhere in your code that your application can hit after a button click or some similar direct user event. If you try to set a breakpoint early in the startup of the app, it may not hit it unless you use the --debug-brk flag (see https://docs.nativescript.org/tooling/debugging/debugging#debugger-options). Best to start with something you can trigger after the app if fully up and running. this will be especially true when using VS Code.
Once you get this level of success with Chrome, install the Nativescript extensions for VS Code (https://docs.nativescript.org/tooling/visual-studio-code-extension).
Note that, when in VS Code, clicking the 'settings gear' icon allows you to edit launch.json which controls the target configuration for the debug options. If you have a root other than ${workspaceRoot}, for example, you may need to edit it here so that finds your project in the right place.
When I use this, I use the 'attach android' option, rather than the launch, but that's mostly just my preference. I believe it works either way. I launch from the command line with tns debug android and then in VS Code select 'attach android' and then wait (a short but seemingly long time) for the 'back and forth' progress indicator at the top to stop and the console output to say 'ready to attach debugger' Then I can select a breakpoint and trigger the app, and it will catch it. It can be frustrating to insure the debugger attachment is in place, especially after an edit that triggers a restart, because of the delay. But I use it for my android debugging quite a bit. For whatever reason, it disconnects repeatedly for me when I try to do the same for iOS, but for that, Chrome works nicely.
What I'd really like is a tight and clean debugger solution for WebStorm, which is my IDE of choice, and there used to be one (that no longer works). Such is life.
You need nativescript-dev-webpack#0.19.1 and need to update your webpack.config file
npm i nativescript-dev-webpack#latest --save-dev
./node_modules/.bin/update-ns-webpack --configs
I am currently doing an R&D in React Native.
I have a requirement where I need to add some modules(Basically code) in the app.
It is impossible in native iOS app to do so.
In React native apps using tools like AppHub and CodePush, we can push builds to production app.
There is a library React Native Auto Updater for downloading latest js bundle but it is deprecated now.
Using the above tools, I need to push the build.
I have a scenario where I want the app to fetch and download the bundle kept on a remote server.
So, How can I download JS Code on making a rest API call from App and refresh the app as per the new JS code?
My concern is regarding download of JS Code.
I am clear on the Auto Update of apps part.
Thanks in advance.
Eureka!
I accomplished this by doing the following:
Create an offline jsbundle Refer this link
react-native bundle --platform android --dev false --entry-file
index.android.js --bundle-output
android/app/src/main/assets/index.android.bundle --assets-dest
android/app/src/main/res/
Create a Rest API for downloading js bundle. Refer this link
I have used SpringBoot. Make sure you add this to your API produces "text/javascript"
Download the jsbundle in your app, store and get the path of the bundle.
Reset the path of bundle for React native in AppDelegate.m [for iOS] and in ReactApplication class [for Android]
Try the react-native-dynamic-bundle package: https://github.com/mauritsd/react-native-dynamic-bundle
Also, you can download the bundle using react-native-fs:
import RNFS from 'react-native-fs'
export const download = async (fromUrl, bundleName) => {
return RNFS.downloadFile({
fromUrl,
toFile: RNFS.DocumentDirectoryPath + `/${bundleName}.bundle`,
}).promise
}
Regards, Juan
I have the following line of code in my sample demo app to display a static image from asset folder.It works fine but the image disappears when i load offline bundle(Production apk).
<Image source={require('./assets/image/sample.png')} style={{width: 400, height: 450 , padding:10}}/>
and my project structure looks like this:-
After i tried to bundle the app for offline apk using the below command:-
react-native bundle --platform android --dev false --entry-file index.js --bundle-output [path for bundle output] --assets-dest [assets-path for image files]
I have the following structure in draw able folder
The confusion here is why react native changes the image name when bundling in this way.And i am not able to see the image after offline bundle please guide me on this as i have googled enough but not able to understand the behaviour.
Should not the image source be
require('./assets/image/sample.png')
instead of
require('./assets/sample.png')
I built Chromium browser successfully with the instructions (https://www.chromium.org/developers/how-tos/android-build-instructions) and it works fine. The only problem is that the performance is horrible. I even tried to build it with the option "arm64" in args.gn:
target_os = "android"
target_cpu = "arm64"
is_debug = true
enable_incremental_javac = true
The file is located in /src/out/Default which is where I built the apk files with this command
ninja -C out/Default chrome_public_apk
The animations are laggy and webpages are loading awfully slow. Is there something I'm missing here?
You're building a debug binary, if you want a usable build set is_debug = false as that will enable release optimizations. This is enough to get acceptable performance though I think official builds are even more heavily optimized.