search

nxtend-team / nxtend

MIT License
190 stars 41 forks source link

running capacitor with live reload  #304

Open paulparton opened 3 years ago

paulparton commented 3 years ago

In a regular ionic project i can run a native app with live reload like this

npx ionic capacitor run ios --livereload --external

Is it currently possible to achieve the same thing with nxtend/capacitor?

devinshoemaker commented 3 years ago

Thanks for the suggestion! This definitely should be doable. I can look into updating the plugin over the next couple weeks.

devinshoemaker commented 3 years ago

@paulparton I looked into this a couple times, and I don't think I can accomplish this very elegantly at the moment. The main issue is that the Ionic CLI doesn't play well with Nx, so we have to use the Capacitor CLI. I haven't tried it myself, but you should be able to follow this documentation to get this working.

https://capacitorjs.com/docs/guides/live-reload#using-with-framework-clis

damienromito commented 3 years ago

@paulparton I have no solution, but i'm stuck with the same problem. Do you tried with the multi-app configuration ?

josepmorey commented 3 years ago

Try to set ionic-config.json at root folder like a ionic multi project. Then run ionic capacitor run android -l for example. Works for me

paulparton commented 3 years ago

My solution so far has been to add the code below to my angular.json under architect for my ionic project which lets me run livereload for ios and anrdoid by runnng nx run my-app-name:run-ios or nx run my-app-name:run-ios

"run-ios": {
  "builder": "@nrwl/workspace:run-commands",
  "options": {
    "command": "npx ionic capacitor run ios --project='my-app-name' --livereload --external",
    "platform": "",
    "cwd": "apps/my-app-name"
  },
  "configurations": {
    "platform": "android",
    "ios": {
      "platform": "ios"
    },
    "android": {
      "platform": "android"
    }
  }
},
"run-android": {
  "builder": "@nrwl/workspace:run-commands",
  "options": {
    "command": "npx ionic capacitor run android --project='my-app-name' --livereload --external",
    "platform": "",
    "cwd": "apps/my-app-name"
  },
  "configurations": {
    "platform": "android",
    "ios": {
      "platform": "ios"
    },
    "android": {
      "platform": "android"
    }
  }
},
imjose commented 3 years ago

My solution so far has been to add the code below to my angular.json under architect for my ionic project which lets me run livereload for ios and anrdoid by runnng nx run my-app-name:run-ios or nx run my-app-name:run-ios

"run-ios": {
  "builder": "@nrwl/workspace:run-commands",
  "options": {
    "command": "npx ionic capacitor run ios --project='my-app-name' --livereload --external",
    "platform": "",
    "cwd": "apps/my-app-name"
  },
  "configurations": {
    "platform": "android",
    "ios": {
      "platform": "ios"
    },
    "android": {
      "platform": "android"
    }
  }
},
"run-android": {
  "builder": "@nrwl/workspace:run-commands",
  "options": {
    "command": "npx ionic capacitor run android --project='my-app-name' --livereload --external",
    "platform": "",
    "cwd": "apps/my-app-name"
  },
  "configurations": {
    "platform": "android",
    "ios": {
      "platform": "ios"
    },
    "android": {
      "platform": "android"
    }
  }
},

I have tried your solution with no success, it seems that Capacitor tries to find the corresponded ios/android folders in the project root and not inside the specified project folder. ex. apps/my-app/ios.

magz99 commented 3 years ago

My solution so far has been to add the code below to my angular.json under architect for my ionic project which lets me run livereload for ios and anrdoid by runnng nx run my-app-name:run-ios or nx run my-app-name:run-ios

"run-ios": {
  "builder": "@nrwl/workspace:run-commands",
  "options": {
    "command": "npx ionic capacitor run ios --project='my-app-name' --livereload --external",
    "platform": "",
    "cwd": "apps/my-app-name"
  },
  "configurations": {
    "platform": "android",
    "ios": {
      "platform": "ios"
    },
    "android": {
      "platform": "android"
    }
  }
},
"run-android": {
  "builder": "@nrwl/workspace:run-commands",
  "options": {
    "command": "npx ionic capacitor run android --project='my-app-name' --livereload --external",
    "platform": "",
    "cwd": "apps/my-app-name"
  },
  "configurations": {
    "platform": "android",
    "ios": {
      "platform": "ios"
    },
    "android": {
      "platform": "android"
    }
  }
},

Thanks @paulparton , I was able to get my ios running with this:

"run-ios": {
  "builder": "@nrwl/workspace:run-commands",
  "options": {
    "command": "npx ionic capacitor run ios --project='my-app' --livereload --external --target=<simulator-unique-id> --public-host=localhost",
    "platform": "ios",
    "cwd": "apps/my-app"
  }
}
troywweber7 commented 2 years ago

Any progress on this?

SergioZhydecky commented 2 years ago

I can't get it work

distante commented 2 years ago

My solution so far has been to add the code below to my angular.json under architect for my ionic project which lets me run livereload for ios and anrdoid by runnng nx run my-app-name:run-ios or nx run my-app-name:run-ios

"run-ios": {
  "builder": "@nrwl/workspace:run-commands",
  "options": {
    "command": "npx ionic capacitor run ios --project='my-app-name' --livereload --external",
    "platform": "",
    "cwd": "apps/my-app-name"
  },
  "configurations": {
    "platform": "android",
    "ios": {
      "platform": "ios"
    },
    "android": {
      "platform": "android"
    }
  }
},
"run-android": {
  "builder": "@nrwl/workspace:run-commands",
  "options": {
    "command": "npx ionic capacitor run android --project='my-app-name' --livereload --external",
    "platform": "",
    "cwd": "apps/my-app-name"
  },
  "configurations": {
    "platform": "android",
    "ios": {
      "platform": "ios"
    },
    "android": {
      "platform": "android"
    }
  }
},

This triggers a server and copies the assets, but the app is deployed without livereload (at least in android)

ben-kn-app commented 2 years ago

I got live reloading working, using the regular nx cli, without the ionic cli.

Steps for anyone interested:

Live reloading should now be working.

DISCLAIMER: Be careful not to commit the capacitor server config to source control!

orl99 commented 2 years ago

Hey @ben-kn-app here Orlando Garcia, can you please attach the code in other to see your code configuration, please?

ben-kn-app commented 2 years ago

@orl99 I'll try to share what I can, what code exactly are you looking for, the project.json nx configuration? The capacitor.config.ts configuration or any other code?

wmehanna commented 2 years ago

I got live reloading working, using the regular nx cli, without the ionic cli.

Steps for anyone interested:

  • As @devinshoemaker pointed out, follow the capacitor framework cli guide
  • Do ipconfig (windows) or ifconfig on mac and get your internal ip address. For me it was 192.168.178.220
  • Add to capacitor conf "server": { "url": "http://192.168.178.220:4200", "cleartext": true }, Care: 4200 is my default nx serve port. If yours differs, then change it here.
  • nx run project-app:copy to copy the capacitor conf to ios/android
  • In order for nx serve command to accept incoming network request I had to add the host option to the serve command in workspace.json of my project "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "project:build", "host": "0.0.0.0" }, If you don't know what the difference is between host: localhost/127.0.0.1 or 0.0.0.0 you should definitely read this explanation
  • nx serve project-app
  • nx run project-app:open:android and run the app on your device/emulator

Live reloading should now be working.

DISCLAIMER: Be careful not to commit the capacitor server config to source control!

I would love to see a repo example of your recipe. I've been googling now for weeks now and I always fallback to your post; I'm missing something to make it work.