Running ionic-v1 with ionic-6 CLI

This is Chapter 2 of the series on Migrating an ionic-v1 app to ionic-react

In the previous chapter, we talked about our decision to migrate our ionic-v1 app to ionic-react. We had stopped development on the v1 app a while back, though it was deployed in App Store and Play Store and being used by our customers.

Since we were reusing the designs and functionality, the first step was to run the v1 app on our systems. Now, pretty much all software get updated at least once a year, if not more times. This meant, our development environment today did not match the one in which we had done our v1 development at all! The software we are talking about are

• OS version
• Node version
• Node modules and their versions

Since we were not planning to use cordova or run the app in simulator (or device), cordova and related plugin versions were not our worry.

We discovered that the node (or to be precise npm) version we had used then was so old that we did not have a package-lock.json checked in!

Being a simple business app, we did not have many third-party dependencies. It was mostly gulp, bower and related dependencies. An excerpt below:

"dependencies": {
  "gulp": "^3.5.6",
  "gulp-sass": "^1.3.3",
  "gulp-concat": "^2.2.0",
  "gulp-minify-css": "^0.3.0",
  "gulp-rename": "^1.2.0"
},
"devDependencies": {
  "bower": "^1.3.3",
  "gulp-util": "^2.2.14",
  "shelljs": "^0.3.0"
}

On a newly cloned repo on a Mac running MacOS Catalina and the latest node LTS version (12.x) , the first step was to run

npm install

The installation failed with an error

Our gulp-sass version was too old! So, the logical next step was to update the gulp-sassversion. Updating it from ^1.3.3to ^3.0.0 resulted in npm install going through fine.

The next step was to runionic serve

Ah, the latest CLI does not know that this is indeed an ionic project! Why? Because the CLI relies on the file ionic.config.json to know the type of ionic project that we have and this file is not present! We have the older ionic.project file. So we followed the instructions and ran ionic init

This asked for the project name, which we set to our existing project. It resulted in ionic.config.json file being created in the root folder with just 3 lines:

{
  "name": "dsr",
  "integrations": {},
  "type": "ionic1"
}

So far so good. Now, we tried ionic serve again.

Looks like we were missing a dependency — @ionic/v1-toolkit. The CLI prompted to install it and on agreeing, installed it indevDependencies and then proceeded to successfully start the server.

We now had our v1 app running. It was now time to get the ionic-react app going!

ionic.config.json now has a few additional lines — for the CLI to know what folders to watch!

{
  "name": "dsr",
  "integrations": {},
  "type": "ionic1",
  "watchPatterns": [
    "scss/**/*",
    "www/**/*",
    "!www/lib/**/*",
    "!www/**/*.map"
]}

Hats off to ionic for ensuring that even the latest CLI could run the oldest version of the framework!