Android (Windows) full environment install guide for Cordova/Ionic

As most probably do, I have create a full guide to install the entire environment needed to run Cordova/Ionic. It constantly evolves and usually makes big jumps every 6 to 12 months. The following guide is my latest file, tailored for Ionic v1, as I had to install Ionic v1 on a new Mac to continue support for the older app. However, I found the same guide also works for newer versions of Ionic:

This setup guide, and caveats, was used to install the latest Node/Cordova/Ionic on Mac OSX 10.15.5 Catalina. If you experience different issues throughout the various steps, please post your step number, what the issue was and how you got around it - so others can benefit too.

Windows 10 - Install guide created Sept 1, 2021

Mac Setup Guide: iOS/Mac full environment install guide for Cordova/Ionic

============================================================
Lets get started

1. Download and Install JKD1.8.1_XXX (latest version)
   NOTE: Cordova is still pinned to JavaJDK 1.8.XXX, you cannot use Java 11 here.
   A. environment variables to add:
   JAVA_HOME = “C:\Program Files\Java\jdk1.8.0_301”
   B. add variables to PATH:
   %JAVA_HOME%\bin
   %JAVA_HOME%\lib
   %JAVA_HOME%\jre
   %JAVA_HOME%\jre\lib

2. AndroidStudio
   A. Update/Add all SDK packages
   B. environment variables to add:
   ANDROID_SDK_ROOT = “C:\Users\xxxxx\AppData\Local\Android\sdk”
   ANDROID_HOME = %ANDROID_SDK_ROOT%
   ANDROID_STUDIO = “C:\Program Files\Android\Android Studio” (or your path to studio)
   C. Add variables to PATH:
   %ANDROID_SDK_ROOT%\tools
   %ANDROID_SDK_ROOT%\tools\bin
   %ANDROID_SDK_ROOT%\platform-tools
   %ANDROID_STUDIO%\jre
   %ANDROID_STUDIO%\bin

3. Install Gradle
   A. highest version permissible for Ionic v1 is 6.9.1, there are breaking changes in 7.0
   B. for windows, download gradle v6.9.1, and unzip.
   C. copy/move folder ‘gradle-6.9.1’ to desired location
   D. environment variables to add:
   GRADLE = “C:\program files\gradle-6.9.1\bin”
   E. Add Variables to Path:
   %GRADLE%

4. Download and install NPM MSI/Package
   A. Verify NPM is up to date, from CLI: “npm install npm@latest -g”

5. Install node:
   A. CLI: “npm install node@latest -g”
   // might have to run this one twice, it seems other items get installed on 2nd run

6. Install Gulp-CLI (v2.3.0):
   A. CLI: “npm install gulp-cli -g”

7. NPM Audit to fix known issues
   A. CLI: “npm audit fix” (might need to add “–force”)

8. Update existing modules from CLI:
   A. “npm update -g fsevent@latest”
   B. “npm update -g graceful-fs@latest”
   C. “npm update -g chokidar@latest”

9. Add GULP to project
   A. As of Sept 2020, ionic/toolk-kit 3.2.4 now uses Gulp 4.x

   OLD, pre kit 3.2.4
   cd \users\xxx\dev\appName
   npm install --save-dev gulp@3.9.1
   (using gulp@4.x will break on Ionic v1)
   (this will pin gulp@3.9.1 to specific project)

   NEW
   Ionic toolkit 3.2.4+ uses Gulp 4 now (Sept 2020)
   npm install -g gulp@latest (4.0.2)
   For an Ionic v1 app, additional changes are needed, see below

10. Add needed modules to project:
    A. “npm update -g gulp-sass@latest” (to gulp-sass v5)
    B. “npm install --save-dev sass@latest” (sass compiler)

11. Install Cordvoa
    A. “npm install cordova@latest -g”

12. Install Additional Resources:
    A. “npm install -g cordova-res@latest”
    B. “npm install -g native-run@latest”

13. Install ionic-cli
    A. “npm install -g @ionic/cli”

14. Add App Project:
    A. cd \users\xxx\dev
    B. ionic start myApp tabs
    C. OR specific Ionic version: ionic start myApp tabs --type=ionic1 --no-link

15. IONIC lib scss file has a syntax issue that needs to be fixed:
    A. Manual fix for www/lib/ionic/scss/_platform.scss
    B. Lines 80/81, both missing closing “)”

16. IONIC Project gulpfile.js
    A. Gulpfile.js created from ionic start myApp is formatted for v3.9.1
    B. Update file for v4.X syntax (see below)

17. Update Ionic Plugins:
    A. ionic cordova plugins (list plugins)
    B. verify each plugin against npm.com, if not latest plugin

    1. ionic cordova plugin remove cordova-plugin-XXXX
    2. ionic cordova plugin add cordova-plugin-XXXX@latest

18. Add Android to Project:
    A. ionic cordova platform add android@latest

19. Build First app:
    A. ionic cordova build android
    *** begin troubleshooting any build issues (if any)

20. Launch first app:
    A. ensure an android phone is attached to computer
    B. launch android daemon: adb devices -latest
    C. ionic cordova run android --device

21. Begin building your project with more plugins
    A. ionic cordova plugin add cordova-plugin-xxxxxx

I hope this helps…anyone…and if you have corrections or things to add that can help others then please put them in the comments.

Happy coding:

==============================================

For Ionic v1 projects, the gulpfile.js is preformatted for gulp v3.9.1, it will need to be modified to work with gulp v4.x (ie: 4.0.2):

Default installed gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(cleanCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', ['sass'], function() {
  gulp.watch(paths.sass, ['sass']);
});

There are only a few changes, they are subtle, but the gulpfile.js needs to be modified to look like this:

var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass')) ;
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(cleanCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', function () {
    gulp.watch(paths.sass, gulp.series('sass'));
});

gulp.task('default', gulp.series('sass','watch'));

2 posts - 2 participants

Read full topic