Develop Reference

Visual Studio 2017 Cordova; change target folder for Android build

I have figured out how to get visual studio to compile and test with cordova 7.1.0 even though in theory it is supposed to only work with 6.3.1 But I have one more issue with Android.
Deploy is looking for the apk in platforms\android\build\outputs\apk
Build now puts the apk in platforms\android\build\outputs\apk\debug
So if I build it, then copy the apk then tell visual studio to debug, it works since it can fine the apk in platforms\android\build\outputs\apk
So every time I want to test, I have to delete the apk, built it, then copy it, then build it again to allow visual studio to deploy it.
Is there a setting in visual studio, the project, or the registry that I can use to change either the deploy folder or the build folder so they match?

I followed the advice from here https://stackoverflow.com/a/49270052/9874134 but tweaked it a bit to make it work for my case.
The cordova android platform 6.4+ puts the built apk here:
[project]\platforms\android\app\build\outputs\apk\debug\app-debug.apk
Visual Studio seems to be looking for it here:
[project]\platforms\android\build\outputs\apk\app-debug.apk
I added an "after_build" hook that copies the app-debug.apk and
output.json files to the folder VS is looking in. I had to manually
add the folder structures (for both the location of files being copied
and location of hook file). I just added the following file, and the
build process picks it up automatically.
The next step is a bit different to the advice. The "after_build" hook copies the app-debug.apk and app-release files to the folder VS is looking in:
I placed copy_android_apk.js under [project]\scripts\
[project]\scripts\copy_android_apk.js
I added an "after_build" hook element in [project]\config.xml
<platform name="android">
<hook src="scripts/copy_android_apk.js" type="after_build" />
</platform>
contents of copy_android_apk.js:
#!/usr/bin/env node
module.exports = function (context) {
console.log(" -- manual step -- have to copy apk to this folder because that is where VS is looking for it...");
var fs = require('fs');
var path = require('path');
var rootdir = process.argv[2];
var srcfile = path.join(process.cwd(), "platforms\\android\\app\\build\\outputs\\apk\\debug\\app-debug.apk");
var destfile = path.join(process.cwd(), "platforms\\android\\build\\outputs\\apk\\app-debug.apk");
var destdir = path.dirname(destfile);
//Create the output directory if it doesn't exist
if (!fs.existsSync(destdir)) {
mkdirSyncRecursive(destdir);
}
if (fs.existsSync(srcfile) && fs.existsSync(destdir)) {
fs.createReadStream(srcfile).pipe(
fs.createWriteStream(destfile));
}
srcfile = path.join(process.cwd(), "platforms\\android\\app\\build\\outputs\\apk\\release\\app-release.apk");
destfile = path.join(process.cwd(), "platforms\\android\\build\\outputs\\apk\\app-release.apk");
destdir = path.dirname(destfile);
if (fs.existsSync(srcfile) && fs.existsSync(destdir)) {
fs.createReadStream(srcfile).pipe(
fs.createWriteStream(destfile));
}
/**
* Splits whole path into segments and checks each segment for existence and recreates directory tree from the bottom.
* If since some segment tree doesn't exist it will be created in series.
* Existing directories will be skipped.
* #param {String} directory
*/
function mkdirSyncRecursive(directory) {
var path = directory.replace(/\\$/, '').split('\\');
for (var i = 1; i <= path.length; i++) {
var segment = path.slice(0, i).join('/');
!fs.existsSync(segment) ? fs.mkdirSync(segment) : null;
}
}
}

I tried something that appears to have worked. I cleared the Cordova Cache, Tools/Options
Tools for Appache Cordova
Cordova Tools
Then I restarted Visual Studio
Now it works and will publish the debug directly to the device.
Although the app launched successfully Visual Studio stopped responding, which I recall also happened once in a while after the initial update to 2017, but seemed to go away. After restarting Visual Studio again, and Deploying the debug to Android Device, it operated properly.

Changing the package name in a react-native app

I've created an app in react-native. I need the package name to be:
com.org.appname
React-native does not allow you to specify this as the package name in the init, or to change it after init.
react-native init --package="com.org.appname"
does not work
Changing the package name as described in Change package name for Android in React Native also doesn't work and results in the following error on react-native run-android
Failed to finalize session : INSTALL_FAILED_VERSION_DOWNGRADE

in iOS project you just need to change BundleID with Xcode.
In Android project you need to change package name in 4 files:
android/app/src/main/java/com/reactNativeSampleApp/MainActivity.java
android/app/src/main/java/com/reactNativeSampleApp/MainApplication.java
android/app/src/main/AndroidManifest.xml
android/app/build.gradle
good practice is also to modify BUCK file in Android project, in two places, and correspondingly adjust hierarchy in android project, although it is not necessary:
BUCK file:
android_build_config(
name = "build_config",
package = "app.new.name",
)
android_resource(
name = "res",
package = "app.new.name",
res = "src/main/res",
)
run command
./gradlew clean

According to this https://saumya.github.io/ray/articles/72/, you can run this command from the start
react-native init MyAwesomeProject -package "com.example.app"
But if you already generated your app via
react-native init MyAwesomeProject
You can modify app name in file
android/app/src/main/res/values/strings.xml
Then you can modify package name in files
android/app/src/main/java/com/reactNativeSampleApp/MainActivity.java
android/app/src/main/java/com/reactNativeSampleApp/MainApplication.java
android/app/src/main/AndroidManifest.xml ( optional as per my experience )
android/app/build.gradle
Lastly, run the following commands (from inside the app's android/ directory)
./gradlew clean
./gradlew assembleRelease
To change iOS version package name, use Xcode

I use the react-native-rename npm package.
Install using
npm install react-native-rename -g
Then from the root of your React Native project execute the following
react-native-rename "MyApp" -b com.mycompany.myapp
react-native-rename on npm

If your text editor able to replace a string in all of your project files it is very easy to change package id.
I am using PhpStorm and I just replaced my old.package.id with new.package.id in all of my project files. It worked for me

simply just change your package name in these 4 files
android => app => src => main => java => com => reactNativeSampleApp => MainActivity.java & MainApplication.java
android => app => src => main => AndroidManifest.xml
android => app => build.gradle

Where I edit plugin Java code in Cordova?

I have added a plugin with Java code (for Android) to my Cordova project. The same java file can now be found under plugins folder and also under the platforms/android folder. Unfortunately when I edit the code in the plugins folder and build the application then the code under the platforms folder is not changed and the emulated app never get updated. Do I have to do something else?
Update
Ok, it seems there is no "automatic" way to update the code in the platforms folder. One has to re-add it. See Cordova 3.5, how to update local plugin? or In Phonegap/Cordova 3.0+, is there any way to refresh plugins after you make changes?
Or does someone know a better way?

This is old but I was searching and this one is without answer. If you have plugin that you've created, you can add directory instead of url. So if you have template on github that need to be modified you need clone it, make changes, and add using:
cordova plugin add /path/to/plugin --nofetch
see docs for cordova cli
I think that you will need to execute this command each time you make changes and before you do you need to remove the plugin:
cordova plugin remove com.example.plugin.name
You can speed things up if you create simple node script that will execute this when file changes:
var watch = require('watch');
var exec = require('child_process').exec;
if (process.argv.length == 4) {
var name = process.argv[2]
var path = process.argv[3];
watch.watchTree(path, function() {
var cmd = 'cordova plugin remove ' + name +
' && cordova plugin add ' + path + ' --nofetch';
console.log(cmd);
exec(cmd, function (error, stdout, stderr) {
if (error !== null) {
console.log('exec error: ' + error);
} else {
console.log('done');
}
});
});
} else {
console.log('usage: ' + process.argv[1] + ' [NAME] [PATH]');
}
then you can save is as plugin.js and run (from your cordova application path):
node plugin.js com.example.plugin.name /path/to/plugin
it will work when you put more then one plugin. Before you run it you need to execute:
npm install -g watch
or:
npm install --save-dev watch
cordova application have package.json file so this dependency will be save there.

I just had/resolved the same issue and found the solution and thought it should be here:
Changes of the java file in the plugin directory won't be updated when building, but editing the one in the platforms/android/app/src/main/java/* will.

you are add plugin using cmd or manually add plugin for your cordova project.
you can directly add plugin using cmd, select your project in directory and direct hit plugin url Example: cordova plugin add nl.x-services.plugins.socialsharing
and automatically add all plugin file, that plugin permissions.

Cordova after_prepare hook succeeds in Android but fails in iOS

I have written a after_prepare hook for my Cordova build which removes the node_modules folder from the final build:
#!/usr/bin/env node
/**
* The node modules we want to remove from the build prior to building
* #type {Array}
*/
var foldersToRemove = ["platforms/android/assets/www/node_modules", "platforms/ios/www/node_modules"];
var fse = require('fs-extra');
var path = require('path');
var rootdir = process.argv[2];
foldersToRemove.forEach(function(folder) {
var rmFolder = path.join(rootdir, folder);
fse.remove(rmFolder, function(err) {
if (err) {
return console.error(err);
} else {
console.log(rootdir);
console.log("fse folder removed success!")
}
});
});
This works for me when i run cordova prepare android -d in in the CLI but upon switching to iOS it fails with the following error:
env: node\r: No such file or directory
Hook failed with error code 127:
I have tried with just the reference to the ios platform folder and it issues the same error message.

You need to use a text editor like NotePad++
On NotePad++, you will follow these steps:
Open the file thats giving you issues
Go to 'Find' option and select the 'Replace' tab
You should find this string : '\r\n'
Replace it with \n
Make sure the 'wrap around' option is selected.
In the search mode, select 'Extended', and then go ahead and replace
all.
Save the file and perform the iOS build again

Try this in the terminal on OSX:
tr -d '\r' < FILE_NAME > FILE_NAME

This error can be caused while trying to build your Ionic or Cordova application under OSX and it is most likely due to the line ending format in the file in question.
Try this

Cordova Build - ignore files

When compiling a cordova application every single file in my /www folder gets copied to the assets/www folder(android) but I'd like to customize what files are copied. I use several pseudo languages like CoffeeScript, Jade or Stylus which are auto-compiled by my IDE and they shouldn't be shipped into the final application.

With the help of this article, I found that you can create/edit the platform/android/ant.properties, and add the following line to it:
aapt.ignore.assets=!*.map:!thumbs.db:!.git:.*:*~
With this line, any file or directory that matches one of these patterns will not be included in the .apk file:
*.map
thumbs.db
.git
.*
*~
I found that editing the platforms/android/build.xml won't work because it's overwritten each time the build is invoked; also, creating a build.xml file in the root of the project didn't work.
The rules for this property are the following, taken from $ANDROID_HOME/tools/ant/build.xml:
<!-- 'aapt.ignore.assets' is the list of file patterns to ignore under /res and /assets.
Default is "!.svn:!.git:.*:<dir>_*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"
Overall patterns syntax is:
[!][<dir>|<file>][*suffix-match|prefix-match*|full-match]:more:patterns...
- The first character flag ! avoids printing a warning.
- Pattern can have the flag "<dir>" to match only directories
or "<file>" to match only files. Default is to match both.
- Match is not case-sensitive.
-->
<property name="aapt.ignore.assets" value="" />

Hidden (.*) folder & files will be ignored by default
All hidden files and folders will be ignored while build for example .git/ & .gitignore
To hide : Rename the folder by a . (dot) prepended to the folder/file name.
Use Terminal in Linux/Mac to rename the folder.
mv dev .dev
Use cmd in Windows
ren dev .dev

I do not know any way how to filter files for cordova, but I can describe you approach that we use in our projects.
We are using gruntjs with phonegap plugin. We configure it to use prebuilt folder (which contains only necessary files and folders) and it:
creates cordova/phonegap project
adds plugins,platforms
builds native applicaiton
launches native application on emulator
Main thing in this approach is that cordova/phonegap project (directory with .cordova, platforms and www folders) is just a build artefact.
Here is relevant part of our Gruntfile.js as an example:
phonegap : {
config : {
root : './out/dist',
config : {
template : './config.tpl.xml',
data: {
id: pkg.id,
version: pkg.version,
name: pkg.name,
author : pkg.author
}
},
path : 'out/phonegap',
plugins : [
// PHONEGAP OFFICIAL PLUGINS
'org.apache.cordova.globalization',
'org.apache.cordova.network-information',
'org.apache.cordova.splashscreen',
//THIRD-PARTY PLUGINS
'de.appplant.cordova.plugin.local-notification'
],
platforms : [
'android'
],
maxBuffer : 200, // You may need to raise this for iOS.
verbose : false,
releases : 'out/releases',
releaseName : function() {
return pkg.name + '-v' + pkg.version;
},
// Android-only integer version to increase with each release.
// See http://developer.android.com/tools/publishing/versioning.html
versionCode : function() {
return 1;
}
}
}
Note, out/dist is generated by previous build step and contains concatenated and minified version of code.

I've created a custom script to ignore files/folders which works not just for android:
Add this to your config.xml:
<ignore entries="lang,foo/bar,ignore/asdf.html" />
And you need two more files located in hooks/before_build and hooks/after_build folders.

I highly recommend cordova-plugin-exclude-files. You simply specify files to exclude as pattern attributes of exclude-files tags in your config.xml file.
For example, to exclude all .scss files:
<exclude-files pattern="**/*.scss" />
And to exclude all files with the string "ios-only" on the Android platform only:
<platform name="android">
<exclude-files pattern="ios-only" /> </platform>

This is what I'm doing. I've moved the src files for the app that was in www folder to another folder created in root - web-app. Next, the following script was added in package.json :
This surely needs to be refined, but am working with it as makeshift arrangement.
Good Luck...