"ionic emulate ios --livereload" and "ionic upload"

[pwiwaves]

I observed the following:
Ever since I started using Ionic Deploy to publish updates via “ionic upload …”, I’m no longer able to work with the iOS simulator in live-reload mode (“ionic emulate ios --livereload”).
Code changes do not get applied, until I run “ionic upload” and then re-run “ionic emulate ios”.

When I run “ionic emulate ios --livereload” and change a file, I only see these lines in the terminal, but nothing changes in the iOS simulator:

I thought that “ionic emulate” works completely independent from “ionic upload”, serving me the current state of my code. But now it looks like the two are somehow tied together: “ionic emulate” serves me the state of the app, which was last deployed via “ionic upload”.

Am I missing something regarding “ionic emulate” and “ionic upload”?
How are you able to emulate with live-reloading AND keep using Ionic Deploy?

Edit: New system information after upgrading to latest versions:

global packages:

@ionic/cli-utils : 1.1.2
Cordova CLI      : 6.5.0
Ionic CLI        : 3.1.2

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.1.2
@ionic/cli-plugin-ionic-angular : 1.1.2
Ionic Framework                 : ionic-angular 3.2.1

System:

Node       : v6.10.2
OS         : macOS Sierra
Xcode      : Xcode 8.3.1 Build version 8E1000a
ios-deploy : 1.9.1
ios-sim    : 5.0.13

[details=My original system information]
Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Xcode 8.3.1 Build version 8E1000a[/details]

[Sujan12]

@pwiwaves

Ionic CLI Version: 2.2.2

You should upgrade to the current Ionic CLI v3.1.2 (npm install -g ionic).
It doesn’t really makes sense for us to debug an obsolete version of the CLI.
Then you should also upgrade Ionic App Scripts to the current version 1.3.7.

[pwiwaves]

I upgraded as you suggested, unfortunately to no avail.
The problem remains the same.

My new system information:

global packages:

@ionic/cli-utils : 1.1.2
Cordova CLI      : 6.5.0
Ionic CLI        : 3.1.2

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.0.0-rc.2
@ionic/cli-plugin-ionic-angular : 1.0.0-rc.2
Ionic Framework                 : ionic-angular 3.2.1

System:

Node       : v6.10.2
OS         : macOS Sierra
Xcode      : Xcode 8.3.1 Build version 8E1000a
ios-deploy : 1.9.1
ios-sim    : 5.0.13

[Sujan12]

Damn.

@pwiwaves

@ionic/cli-plugin-cordova : 1.0.0-rc.2
@ionic/cli-plugin-ionic-angular : 1.0.0-rc.2

Take care of these, should be 1.1.2 for both.

@pwiwaves

I thought that “ionic emulate” works completely independent from “ionic upload”, serving me the current state of my code. But now it looks like the two are somehow tied together: “ionic emulate” serves me the state of the app, which was last deployed via “ionic upload”.

ionic upload takes whatever is in your /www and uploads that to Ionic’s servers, it probably also builds from /src to /www first - I am not sure.

ionic cordova emulate * first kicks off a build (which gets put into www), then cordova emulate which probably cordova prepares the result of that build to the www in the platform folder, and then starts an emulator with the project in the platform folder (containing the www).

Which both doesn’t really explain your problems of course, only shows how this stuff is interconnected by using the same /www folder or a build run by Ionic as a base.

[pwiwaves]

Thanks for the explanation!
Unfortunately the problem persists after uprading @ionic/cli-plugin-cordova and @ionic/cli-plugin-ionic-angular to version 1.1.2.

When I save a changed file (e.g. a page’s HTML template), while “ionic cordova emulate ios --livereload” is running, the build finishes incredibly fast (~200ms), as you can see in the screenshot:

The initial build takes more than 21 seconds on my machine:

I now realize that initially it says “build dev started”, while file changes trigger “build started” without the “dev”.
Perhaps this is relevant?

Another observation I made is the following:
The reason why “emulate” only serves me the up-to-date code after e.g. “ionic upload --note “foo” --deploy production” was entered in terminal, is that the app then updates itself while running in Simulator, because this code in app.component.ts’s constructor gets executed (based on examples from here: https://docs.ionic.io/services/deploy/):

this.platform.ready().then(() => {
  this.deploy.check().then((snapshotAvailable: boolean) => {
    if (snapshotAvailable) {
      this.deploy.download().then(() => {
        return this.deploy.extract();
      }).then(() => {
        this.deploy.load();
      });
    }
  });
});

Apparently “emulate” always serves me the latest snapshot that was loaded in the app via Ionic Deploy. (It looks like it has nothing to do with the --livereload option.)

Any thoughts on what I should try next?
Does it make sense to start a new empty project based on the same package.json and see if “emulate” works there as expected?
Or perhaps someone has a better idea to share?

[Sujan12]

@pwiwaves

Does it make sense to start a new empty project based on the same package.json and see if “emulate” works there as expected?

Yes, especially the side effects of Ionic Deploy have to be removed to completely understand what is happening.

@pwiwaves

Any thoughts on what I should try next?

Sign in to GitHub · GitHub seems like a good idea if you can dumb the problem down to a new project.

[pwiwaves]

Thanks for the advice, Jan!
The problem keeps happening in new projects, even with Ionic CLI 3.2.0.
So, I have raised a new issue: https://github.com/driftyco/ionic-cli/issues/2353

[pwiwaves]

Unfortunately the issue got closed with this response:

The logic of when an app updates is up to you. If you have it check for updates from your deploy channel when your app boots up, it’s going to update the app with the latest snapshot from that channel. That example is to show the simplest example of deploy functionality.

If you want to continue updating when the app boots up, I suggest you look into setting up different environments (dev vs prod) for your app.

Either this response misses the point of my issue, or I’m lacking some basic understanding.

I think it all boils down to this question: Should ionic cordova emulate ios --livereload always build and display the app based on the actual code on my development machine?

[Sujan12]

Ok, we didn’t talk about your “Ionic Deploy” code here yet.

Does your app update via Ionic Deploy after being started with --livereload? If so, it naturally destroys livereload as the complete app is replaced with the downloaded version of the app. Not ionic upload is the problem, but that your code always updating the app when a new snapshot is available.

Does the same problem happen if you remove the “autoupdate my app” code?

[pwiwaves]

Thank you very much! Now I understand my mistake.
I will have to go over my deploy logic, and take care of the difference between prod and dev.

[richardshergold]

@pwiwaves I’m having the same problem - what did you do in your app to prevent this happening?

[pwiwaves]

I had to differentiate between dev and prod environment. (If you haven’t set up environment variables yet, you might find this helpful: http://roblouie.com/article/296/ionic-2-environment-variables-the-best-way/).

Usually when emulating, I’m in development mode and I don’t apply any uploaded snapshots.
I only use Ionic Deploy, if the app is running in production mode.

So, basically my deploy logic looks like this now:

    if (ENVIRONMENT === 'production') {
      this.deploy.check().then((snapshotAvailable: boolean) => {
        if (!snapshotAvailable) return;
        this.deploy.download()
          .then(() => this.deploy.extract())
          .then(() => this.deploy.load())
        ;
      });
    }

Hope this helps!