Tasks for production prepared Ionic app - ionic-framework

I'm trying to figure out what's the best process to pass from the code to the final deployable apk/ipa.
So far I have a testsuite using Karma + Jasmine, which transpiles the TypeScript to JS and runs some unit tests. I start that process via gulp.
After that all I know is to ionic build android --release what generates (an unsigned yet) apk.
But I'm not sure of how ofuscated/minificated the generated apk is.
So, keeping in mind the code has to be as private as possible, is the minification and the ofuscation of the ionic build enough or should I do all those prebuild tasks manually via gulp?
And in that case, whats are the right tasks I should run, do I have to transpile all the TypeScript files to JS manually? and in what order should I run the tasks?
E.g. transpile -> tests -> minify -> uglify -> build apk or minify -> uglify -> transpile -> tests -> build apk
I'm a bit lost with this, and the only thing I can figure out is that the tests should be ran first, because is case of test failure the process should be aborted.

Try ionic-app-scripts >= 0.0.48 to config build.
Production:
ionic build android --prod
To check the minified file, open the apk file with GNOME Archive Manager (or similiar) and extract /assets/www/build/js/app.bundle.js file.

Preparing an Ionic Cordova app for release in production
1. Building
In your terminal execute the following command according to your platform (android / ios):
ionic build android --prod --release
2. Releasing
In order to be able to install a production application on a device and furthermore in order to be able to publish it in app stores, your .apk or .ipa
file needs to be signed. How you do that depends on the platform.
Here is the procedure in detail for Android and for iOS.
Preparing an Ionic Progressive Web App (PWA) for release in production
1. Building
In your package.json file, you should make sure to have something like the following:
"scripts": {
// ...
"build:www": "rm -rf www && ionic-app-scripts build --prod",
// ...
},
Now in your terminal run:
npm run build:www
2. Releasing
Your app is built in the folder www ready for you to serve in production using any webserver like NginX, Apache or a custom Node + Express webserver.
Valid as of Ionic v3.3
Learn more about ionic-scripts, what they do and which other scripts you could possibly find useful.

Related

how to do prod build in ionic capacitor

In ionic 4, how to do a release aka prod build?
The angular part can be build in prod mode by ionic build --prod
Now how to copy this build to android? If I do ionic capacitor run android it will do normal build first and then copy assets to android. But I want to build in prod mode and take assets to android.
(I know how to generate apk in Android studio)
After doing
ionic build --prod
Assuming you have already installed Capacitor, otherwise you can follow this and thereafter,
You can do the following
npx cap copy android
Which copies the built code to android folder.
Then you can do
npx cap open android
Which opens android studio if you havent opened it already, then you should go to Build -> Generate Signed Bundle / APK option and the rest is quite straightforward.
More info can be found here
You can use the simple way.
ionic capacitor build android --prod
after the command, the android studio will open automatic
Development:
android stdio: Build-> Build Bundle(s)/APK(s)->Build APk(s)
Production: android stdio: Build-> Generate Signed Bundle(s)/APK(s)-> Android App Bundle or APk-> release

How to reduce app size in Ionic2?

I am new to Ionic, recently I developed One app.But my app size was 8mb.
How should I reduce app size,and I am not using any Images and plugins also, but it took 8mb size. please help me.
For production builds you can use ionic cordova build [android/ios] --prod --release. This can reduced the size of your application.
The prod and release flags will minify code and remove debugging utilities.
Documentation: https://ionicframework.com/docs/intro/deploying/#production-builds
You can use one of $ ionic cordova build options
--no-build - Do not invoke an Ionic build
--prod - Build the application for production
--aot - Perform ahead-of-time compilation for this build
--minifyjs - Minify JS for this build
--minifycss - Minify CSS for this build
--optimizejs - Perform JS optimizations for this build
...
For example: ionic cordova build android --prod --aot

How to make a prod build in "Ionic upload" command?

I want to use Ionic deploy service in Ionic cloud.
When I run ionic upload command, a dev build is immediately triggered instead of prod build.
Is it possible to create a --prod build and upload?
One of major reasons is that multiple configurations in my code are bundled with --prod build only.
ionic upload --deploy=dev
[INFO] Running app-scripts build:
[09:55:59] build dev started ...
[09:55:59] clean started ...
[09:55:59] clean finished in 1 ms
You could pipe the npm scripts to run the ionic --prod first and then ionic upload
"scripts":{
"custom-upload":"ionic cordova build --prod | ionic upload"
}
and then run in the terminal
$: npm custom-upload
This will still run the dev build i think but your prod build should be packaged as well. It does not look like you can specify a build type in the ionic upload command, which makes me think that the ionic upload does not upload the production build to ionic view. And if that is that case then you might want to consider changing the configurations setup in a prod build to be set to only be used if not on localhost instead on based on the build.

Ionic: How to uglify and minify my code before release?

I am getting ready to release my first app build in ionic. I am interested in how I can minify and uglify my code? Are there any plugins for that?
Thanks
uksz
Running ionic build --prod did the trick for me. I am using ionic to deploy my app as a website.
Using ionic cordova build <platform> --prod --release will create you a release version of the app with the code uglyfied and minified.
Also running a simple ionic cordova build <platform> will also do the job. The minified and uglyfied js is located on the www folder as main.js
Take in count that what minifies and uglyfies the source code is ionic-app-scripts.
There is an automated task runner for JavaScript called Gulp ( gulp.js ). It has packages like:
gulp-minify-css and gulp-uglify
Hope it helps.

How to specify ionic build folder in CLI

I have a ionic app and to build the project in android I use the command
ionic build android
It works fine and i'm able to build the project.
However if I want to specify an external folder in the path like...
ionic d:\Projects\mobile build android
How can I achieve this ?
You can do this. If you have an ionic:build npm script defined it will call that to do the build.
"scripts":{
"ionic:build": "ionic-app-scripts build android --release --prod --wwwDir www --buildDir build"
}
For achieving your goal there is one more way. Instead of passing the path in the ionic commands ( Which is not a valid command ), you can first reach to the path where you want to build ionic application using cd command.
In your case it would be first go to d drive by using
d:
then
cd \Projects\mobile.
After this you can run command
ionic build android