Feat(app): add capacitor support, fixes #4388 #4475

nklayman · 2019-06-25T23:19:28Z

What kind of change does this PR introduce? (check at least one)

Feature

Does this PR introduce a breaking change? (check one)

Yes
No

The PR fulfills these requirements:

It's submitted to the dev branch and not the master branch
When resolving a specific issue, it's referenced in the PR's title (e.g. fix: #xxx[,#xxx], where "xxx" is the issue number)
It's been tested on a Cordova (iOS, Android) app
It's been tested on a Electron app
Any necessary documentation has been added or updated in the docs (for faster update click on "Suggest an edit on GitHub" at bottom of page) or explained in the PR's description.

Other information:
Have not tested on mac or windows. To test:

Clone fork, cd into app, install deps, link with yarn link
create new project with quasar create capacitor-quasar (use yarn), or use existing project (backup first!)
link in project with yarn link @quasar/app
add mode with quasar mode add capacitor, and choose your platforms
dev with quasar dev -m capacitor --target [android|ios]
build with quasar build -m capacitor --target [android|ios]

…feat(app)--add-capacitor-support

rstoenescu · 2019-06-26T07:32:20Z

Hi Noah,

Excellent work! Few things:

In order to be consistent with the folder structure, can you place the new folders in a /src-capacitor instead?
Is there a way for us not to hard-code paths to capacitor executable? I'm worried about working with monorepos as this would break it.

nklayman · 2019-06-26T21:55:37Z

I don't think Capacitor has support for a different folder location, other than the root. It would be pretty complicated to get around it. You could open an issue in the capacitor repository to try and solve this.
execa has support for executing locally installed binaries. I'm not sure that it would support yarn workspaces either, but it might.

lucasfernog · 2019-06-26T22:50:09Z

Cant' you use "src-capacitor" as root, calling capacitor commands using appPaths.capacitor as cwd @nklayman ?

lucasfernog · 2019-06-26T22:53:00Z

About the execution of locally installed capacitor, can't you use something like what Electron is doing: https://github.com/quasarframework/quasar/blob/dev/app/lib/electron/index.js#L161 ?

nklayman · 2019-06-26T23:59:04Z

@lucasfernog using src-capacitor as the root could work, but capacitor would try to install npm deps there. This could possibly be prevented, but I'm not sure how to do that. As for executing the binaries, that's a great idea. I'll go ahead and implement it now. Using execa is still a good option, though, as it has a bunch of extra improvements over child_process.

nklayman · 2019-06-27T00:29:48Z

I added the require.resolve binary locating method, as well as a fallback to the old method as require.resolve doesn't work when using yarn link @quasar/app.

nothingismagick

On MacOS
yarn cap add ios =>
[error] cocoapods is not installed. For information: https://guides.cocoapods.org/using/getting-started.html#installation

Cocoapods requires ruby. Installed with:
brew install ruby
Ruby brings these deps:
==> Installing dependencies for ruby: libyaml, openssl and readline

CocoaPods installed with:
sudo gem install cocoapods
CocoaPods brings these deps:
thread_safe, tzinfo, concurrent-ruby, i18n, activesupport, nap, fuzzy_match, cocoapods-core, claide, cocoapods-deintegrate, cocoapods-downloader, cocoapods-plugins, cocoapods-search, cocoapods-stats, netrc, cocoapods-trunk, cocoapods-try, molinillo, atomos, CFPropertyList, colored2, nanaimo, xcodeproj, escape, fourflusher, gh_inspector, ruby-macho

After installing all deps and rerunning the cmd, this is the error:
[error] Capacitor could not find the web assets directory "/[redacted]/capacitor-quasar/dist/capacitor".

So I then run:
quasar build -m capacitor --target ios

Which does create the assets, but still throws an error:
[error] ios" platform has not been created. Use "npx cap add ios" to add the platform project.

So then I run yarn cap add ios and this works now.
It spends a bit of time (in my case still running the update loop after more than 15 minutes...) to update iOS native dependencies. Unfortunately this is all I see:

Updating iOS native dependencies with "pod install" (may take several minutes)

So there is ZERO information about what is being installed on my system, whether the cmd has hung etc. This is a little worrisome from a security standpoint, because I had to install cocoapods with sudo. Maybe it will tell me what it did at the end of its loop (if it ends)...

Will report back when it finally finishes. Note - I have not yet had the opportunity to run quasar dev -m capacitor --target ios

I stopped waiting and cancelled. Now, regardless of whether I try dev or build it hangs at Updating iOS native dependencies.

So I cd into ios/App and run $ pod install
It is downloading a really MASSIVE spec (ca 750MB) from here:
https://github.com/CocoaPods/Specs.git

CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. It has over 63 thousand libraries and is used in over 3 million apps. CocoaPods can help you scale your projects elegantly.

See this about saving time and storage:
http://blog.cocoapods.org/CocoaPods-1.7.2/

It did finally spawn xcode, but the xcode build failed on both dev and build. Can't triage at the moment.

lucasfernog · 2019-06-27T18:29:54Z

@nklayman About the src-capacitor issue, would this work? ionic-team/capacitor#691 (comment)

Sorry i don't know much about it beucase i never used Capacitor, i'm just blindly searching for a solution.

lucasfernog · 2019-06-27T20:56:57Z

I'm testing this and I found that capacitor init prompts me about using NPM or Yarn. It would be nice if you detected it before calling the command and uses the flag "--npm-client" from the command.

And we need to add the platform automatically when using quasar dev -m capacitor -T android|ios

lucasfernog · 2019-06-27T21:08:09Z

The default Android Studio path from Capacitor is not the one I have on my Arch Linux machine.. should we try to read it for users, and change the capacitor.config.json with it?

lucasfernog · 2019-06-27T21:13:10Z

app/lib/capacitor/index.js

+        }
+      }
+      await this.__runCapacitorCommand(['open', cfg.ctx.targetName])
+      if (!/^192/.test(url)) {


I believe this is not always true.. Quasar picked up my local network IP as url... I dont know

@rstoenescu what is the best way to test if the Quasar dev server url is on the network or just a localhost url?

lucasfernog · 2019-06-27T21:17:28Z

I think we can use our own templates for the android/ and ios/ folders... it would be SUPER COOL, it would be nice to use lodash templates and get rid of the cleartext validation

lucasfernog · 2019-06-27T21:33:02Z

Android worked easily on an emulator (already had Android installed)... Amazing job @nklayman !!

nklayman · 2019-06-27T22:22:50Z

@nothingismagick the cocoapods issue is with capacitor (ionic-team/capacitor#626 (comment)). You could open an issue on their repo to provide more helpful output when running the command. Not much I can do since I don't have a Mac.

@lucasfernog I made pr on capacitor to fix the npm-client prompt issue, since I added support for yarn to capacitor in the first place. It was already merged, and should be part of the next release. What do you mean by "using your own template for android and ios"? Android studio path detection on Linux has been discussed on capacitor at ionic-team/capacitor#560. I could try and fix it and open a PR to capacitor. Also, go Arch/Linux 👍!

lucasfernog · 2019-06-27T22:28:00Z

The contents that gets copied to /android is inside capacitor/android-template... can we use a custom one? It would be cool

nklayman · 2019-06-27T22:36:56Z

@lucasfernog You probably could. Instead of running yarn cap add android, just copy in your custom template and possibly yarn add -D @capacitor/android.

lucasfernog · 2019-06-27T23:09:57Z

Maybe we should have one template of our own.. so we can set it up in a better way

nklayman · 2019-06-28T05:01:22Z

At that point we might as well make quapacitor

eladcandroid · 2019-06-28T05:40:51Z

@nklayman Great job!! You can use "npx cap add ios --verbose" to see what's going on..

eladcandroid · 2019-07-03T19:02:59Z

@nklayman Please tell me if you need any help

nklayman · 2019-07-04T01:09:14Z

@eladcandroid or anyone else, can you try using a capacitor/cordova plugin? Make sure to pull the latest version and create a new project.

nothingismagick · 2019-07-04T21:37:49Z

@eladcandroid - we'd love some help putting together the docs for this as your time permits.

lucasfernog

add a _gitignore file to templates/capacitor with that content

lucasfernog · 2019-07-06T20:20:09Z

app/lib/mode/mode-capacitor.js

@@ -81,6 +81,8 @@ class Mode {
      ],
      appPaths.capacitorDir
    )
+    // Add copied package.json to .gitignore as it is auto-generated
+    fse.writeFileSync(appPaths.resolve.capacitor('.gitignore'), 'package.json')


Shouldn't this be part of the template/capacitor directory?

eladcandroid · 2019-07-09T14:47:21Z

@nklayman I've followed your instructions to test the repo on mac, and got this message:

nklayman · 2019-07-09T15:12:27Z

@eladcandroid I forgot to mention that you need to switch branches before linking. Run git checkout feat(app)--add-capacitor-support in the quasar/app folder.

eladcandroid · 2019-07-28T11:10:14Z

@nklayman
Checked here on Mac Mojave 10.14.5, Node version 12.6.0 and it works great including live reload! Thanks!
What's next?

nklayman · 2019-08-04T23:27:03Z

@eladcandroid can you try using a plugin on IOS? If that works, then we can merge this.

eladcandroid · 2019-08-09T11:09:42Z

@eladcandroid can you try using a plugin on IOS? If that works, then we can merge this.

Plugins work great out of the box!

Here's a screenshot using Device.getInfo() capacitor plugin

<template>
  <q-page class="flex flex-center">
    <q-list bordered separator>
      <q-item v-for="(value, key) in info" :key="key" clickable v-ripple>
        <q-item-section>
          <q-item-label>{{ key }}</q-item-label>
          <q-item-label caption>{{ value }}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

<style></style>

<script>
import { Plugins } from "@capacitor/core";

const { Device } = Plugins;

export default {
  name: "PageIndex",
  data() {
    return {
      info: {}
    };
  },
  async mounted() {
    this.info = await Device.getInfo();
  }
};
</script>

eladcandroid · 2019-08-14T05:16:29Z

@nklayman Any additional tasks for me? 👻

hugetiny · 2019-08-29T18:03:45Z

Although Capacitor is not currently compatible with some Cordova plugins.
Quapacitor is a perfect solution. I am looking forward to it

eladcandroid · 2019-09-25T11:46:28Z

@nklayman Do you need any help to finish with PR?

nklayman · 2019-09-25T16:21:13Z

Right now I am just waiting on review from razvan. He is extremely busy, but he should get a chance soon. If you are not deploying your app to production now you can use the fork to develop your capacitor app, and then once this gets merged you can switch off the fork and deploy your capacitor app.

eeerrrttty · 2019-10-05T22:59:40Z

Hello people! I do have a cordova app in production and, uol... It would be GREAT to use capacitor.

I do use some plugins:

For firebase (notifications and analytics)
Camera.

Would it be compatible?
Will the app now be native?

nklayman · 2019-10-06T01:13:01Z

If the plugins are compatible with capacitor they should work just fine. I know camera will work, but I'm not sure about firebase, is it a cordova or capacitor plugin? Your app will be "hybrid", meaning it is a native app, but all of your code will run in a webview.

mesqueeb · 2019-12-12T02:48:30Z

Lol, the name quapacitor is so awesome. 🤣

…ramework#4475) * feat(app): add support for building with Capacitor * feat(app/capacitor): add dev support * fix(app/capacitor): support yarn workspaces * fix(app/capacitor): fix dev server host location detection * feat(app/capacitor): use src-capacitor dir * fix(app/capacitor): copy package.json on build/dev * fix(app/mode): crashes if add/remove function returns null * feat(app/capacitor): require at least one platform to be added * feat(app/capacitor): automatically install platform if missing * fix(app/capacitor): rm proper dir on remove * feat(app/capacitor): add generated package.json to .gitignore * feat(docs): add instructions for using capacitor * feat(app/dev): support async mode add * docs(cli/developing-cordova-apps): remove old folder * docs(cli/developing-capacitor-apps): rename folder

nklayman added 2 commits June 25, 2019 14:13

feat(app): add support for building with Capacitor

4db6666

Merge branch 'dev' of https://github.com/quasarframework/quasar into …

4254017

…feat(app)--add-capacitor-support

feat(app/capacitor): add dev support

71a4850

fix(app/capacitor): support yarn workspaces

39ab754

nothingismagick suggested changes Jun 27, 2019

View reviewed changes

lucasfernog reviewed Jun 27, 2019

View reviewed changes

fix(app/capacitor): fix dev server host location detection

ece954c

feat(app/capacitor): use src-capacitor dir

4135c8a

nklayman mentioned this pull request Jun 29, 2019

[Big Feature] Replace Cordova with Capacitor #4388

Closed

fix(app/capacitor): copy package.json on build/dev

1919966

fix(app/mode): crashes if add/remove function returns null

26bfb1a

nklayman added 2 commits July 4, 2019 14:14

feat(app/capacitor): require at least one platform to be added

57dd4df

feat(app/capacitor): automatically install platform if missing

bc9b84b

nklayman added 4 commits July 4, 2019 14:38

Merge branch 'dev' into feat(app)--add-capacitor-support

0de8782

fix(app/capacitor): rm proper dir on remove

414d6ca

feat(app/capacitor): add generated package.json to .gitignore

eeed837

feat(docs): add instructions for using capacitor

de87a63

lucasfernog suggested changes Jul 6, 2019

View reviewed changes

feat(app/dev): support async mode add

d412316

nklayman added 3 commits August 20, 2019 09:49

Merge branch 'dev' into feat(app)--add-capacitor-support

ced804c

docs(cli/developing-cordova-apps): remove old folder

2dcf45a

docs(cli/developing-capacitor-apps): rename folder

a3c5cc7

nklayman changed the title ~~[WIP] Feat(app): add capacitor support, fixes #4388~~ Feat(app): add capacitor support, fixes #4388 Aug 20, 2019

rstoenescu changed the base branch from dev to capacitor-review October 6, 2019 12:06

Merge branch 'capacitor-review' into feat(app)--add-capacitor-support

6bf8fe9

rstoenescu merged commit 424f821 into quasarframework:capacitor-review Oct 6, 2019

Feat(app): add capacitor support, fixes #4388 #4475

Feat(app): add capacitor support, fixes #4388 #4475

Conversation

nklayman commented Jun 25, 2019 • edited Loading

rstoenescu commented Jun 26, 2019

nklayman commented Jun 26, 2019

lucasfernog commented Jun 26, 2019

lucasfernog commented Jun 26, 2019

nklayman commented Jun 26, 2019 • edited Loading

nklayman commented Jun 27, 2019

nothingismagick left a comment • edited Loading

Choose a reason for hiding this comment

lucasfernog commented Jun 27, 2019

lucasfernog commented Jun 27, 2019 • edited Loading

lucasfernog commented Jun 27, 2019

lucasfernog Jun 27, 2019

Choose a reason for hiding this comment

nklayman Jun 27, 2019

Choose a reason for hiding this comment

lucasfernog commented Jun 27, 2019

lucasfernog commented Jun 27, 2019

nklayman commented Jun 27, 2019

lucasfernog commented Jun 27, 2019

nklayman commented Jun 27, 2019

lucasfernog commented Jun 27, 2019

nklayman commented Jun 28, 2019

eladcandroid commented Jun 28, 2019

eladcandroid commented Jul 3, 2019

nklayman commented Jul 4, 2019

nothingismagick commented Jul 4, 2019

lucasfernog left a comment

Choose a reason for hiding this comment

lucasfernog Jul 6, 2019

Choose a reason for hiding this comment

eladcandroid commented Jul 9, 2019

nklayman commented Jul 9, 2019

eladcandroid commented Jul 28, 2019

nklayman commented Aug 4, 2019

eladcandroid commented Aug 9, 2019 • edited Loading

eladcandroid commented Aug 14, 2019

hugetiny commented Aug 29, 2019

eladcandroid commented Sep 25, 2019

nklayman commented Sep 25, 2019

eeerrrttty commented Oct 5, 2019

nklayman commented Oct 6, 2019

mesqueeb commented Dec 12, 2019

nklayman commented Jun 25, 2019 •

edited

Loading

nklayman commented Jun 26, 2019 •

edited

Loading

nothingismagick left a comment •

edited

Loading

lucasfernog commented Jun 27, 2019 •

edited

Loading

eladcandroid commented Aug 9, 2019 •

edited

Loading